Page 1 of 1

网站浮动按钮:不可或缺的销售工具

Posted: Thu Feb 20, 2025 9:47 am
by Mimaktsa10
文章解释道:

浮动按钮对您的网站和访问者的好处
关于在 Wordpress 网站上创建浮动按钮
如何在 HTML 网站上创建浮动按钮
关于网站上的浮动按钮的图片
移动应用程序的 8 个原创浮动按钮设计示例
关于 EnvyBox 的多按钮作为浮动按钮的替代品

使用神经网络提高网站利润 40% 的 5 种场景
免费下载
网站的浮动按钮是让客户更接近完成 捷克共和国 数字数据 目标操作的另一个机会。与弹出窗口不同,它不会让用户感到厌烦,而且功能极其强大。

可以对这样的按钮进行编程以同时执行多项操作。在我们的材料中,我们研究了在网站上创建它的几种方法。您可以使用工作代码作为示例或模板。

浮动按钮对网站和访问者的好处
为了方便网站访问者导航,以及吸引新用户,我们使用了一个非常有效,但同时又轻巧、动感、优雅和快速的助手——浮动按钮。通常,这是一个位于屏幕右侧的小元素,它不与特定页面绑定,而是随用户移动,从而使程序更方便,屏幕更具功能性。

根据谷歌的规范,该按钮必须满足一定的要求,比如赏心悦目、设计简洁、明亮、充满活力、图形清晰直观、可快速访问重要工具、不具有破坏性功能等。

说实话,许多网站即使没有浮动按钮也能够做得很好。然而,它给资源本身,即其所有者,以及游客带来了很多好处。

访客福利
通常,网站页面包含大量内容。当阅读长篇文章时,访问者的浏览量会越来越低,尤其是当文章结尾有大量评论时。而当一个人自己想要写一些东西时,这个过程就会变得更加复杂。

只要用户还没有到达页面底部并且全神贯注于阅读内容,滚动就不会打扰他们,但是当需要回到顶部查看网站上还有什么有趣的内容时,事情就没那么有趣了。通常,此时访问者会关闭资源。

这里带有向上箭头的浮动按钮将帮助用户快速舒适地返回网站页面顶部。

对网站的好处
对于网站本身的好处来说,浮动按钮让导航变得更加容易,用户开始主动对内容产生兴趣,也就是行为因素被激活了。

所有这些都使得资源对搜索引擎具有吸引力,并开始在搜索结果中占据更高的位置。


在 Wordpress 网站上创建浮动按钮
在 Wordpress 网站上创建浮动按钮

要在网站上制作浮动按钮,您必须首先打开包含页面代码的文件。对于在 WordPress 上制作的资源,您需要找到 footer.php 文件,转到最底部并在结束标记之前插入代码:

<div class="call_back"><a href="#">您的文本</a></div>

您不需要使用“您的文本”这个词,而是需要写下当您点击按钮时将发生的操作,例如,订购电话。

为了使这个块看起来像一个浮动按钮,您应该指定某些 CSS 属性。为此,您需要一个包含网站样式的文件。对于 WordPress,这是位于以下位置的 style.css 文件:

wp-content/themes/你的主题名称/style.css

我们深入到最后,写下了以下属性:

。打回来{

-webkit-transform:旋转(-90度); /*将带有按钮文本的块旋转30度*/

-moz-transform:旋转(-90度);

-ms-transform:旋转(-90度);

-o-transform:旋转(-90度);

变换:旋转(-90度);

位置:固定; /*滚动时固定按钮位置*/

z索引:999;

右:0px; /*右缩进*/

最高:35%; /*顶部缩进*/

右边距:-50px; /*右侧负缩进(按钮名称越长,此缩进的值应越大)*/

}

/*链接样式*/

.call_back { 复制代码

颜色:#fff!重要; /*链接颜色*/

显示:块;

背景:#DC3522; /*按钮背景颜色*/

字体大小:1.2em; /*字体大小*/

文本对齐:居中; /*对齐中心*/

填充:10px 20px; /*内部填充*/

字体粗细:粗体;/*粗体字体*/

边框半径:5px; /*圆角半径*/

边框:1px 实线#fff; /*按钮周围的框架*/

}