Enfold主题添加粘性按钮

Enfold主题添加粘性按钮(无插件)

Enfold主题添加粘性按钮

  在您的网站上添加浮动按钮或粘性按钮可以让访问者更容易访问您的网页和内容。当然,结果,它会让您的访问者在您的网站上停留更长时间,并降低跳出率。此外,如果您可以很好地利用该插件,它可以帮助提高转化率和参与率。

  Enfold 是多用途WordPress主题,使用演示布局或从头开始构建任何类型的网站,其功能和优势值得一提。干净、易于接受、灵活,并带有用于即时网站构建的高级布局编辑器。本文晓得博客为你介绍Enfold主题添加粘性按钮。

  推荐:MetaSlider Pro免费下载WordPress滑块插件

什么是浮动按钮以及为什么要使用它

  浮动按钮或粘性按钮是“浮动”在网站屏幕一角的按钮,当您向下滚动页面时会粘在该位置。此按钮用作在您的网站上执行特定操作的快捷方式。因此,您可以自定义浮动按钮的内容,无论是添加小部件、社交媒体、链接还是其他。

  在您的网页设计中添加粘性操作按钮可以帮助访问者与您保持联系或浏览您的网页。此外,这将使您的访问者在您的网站上停留更长时间,增加每次会话的页面数,并降低跳出率。不仅如此,您还可以利用它来提高转化率和参与率。

  推荐:Enfold主题手机端设置Scroll-to-top返回顶部按钮

在Enfold主题中添加粘性按钮方法

Enfold主题添加粘性按钮
Enfold主题添加粘性按钮(无插件)

  将以下代码添加到function.php文件中,

// Add Header Code
function de_sticky_button() {
   	?>
		<!-- Start of Sticky Button -->
			 <a href="https://www.pythonthree.com/contact-us/" target="_blank" title="Click to donate" class="sticky-button">Contact us</a>
		<!-- End of Sticky Button -->
	<?php     
}
add_action('wp_body_open', 'de_sticky_button');

  推荐:如何在Xampp中安装PHP GD(GD Graphics Library)

使用CSS美化粘性按钮

使用CSS美化粘性按钮
Enfold主题添加粘性按钮(无插件)
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Sticky Bar
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a.sticky-button { background:  #FAA819; color: white; text-transform: uppercase; padding: 0px 15px 15px 15px; outline: none; text-decoration: none; position: fixed; top: 50%; right: 0; height: 40px; line-height: 45px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; transform-origin: 100% 0%; z-index:1000; text-transform:uppercase; box-shadow: 0 2px 40px rgba(0,0,0,0.2);
}

a.sticky-button:hover {text-decoration:none; background:#09AD50; transition: .5s ease;}

@media only screen and (max-width: 766px) {
	a.sticky-button {display:none;}
}

  Enfold主题添加粘性按钮效果:

Enfold主题添加粘性按钮效果
Enfold主题添加粘性按钮(无插件)

  推荐:[最新版]MonsterInsights Pro免费下载WordPress Google Analytics插件

总结

  以上是晓得博客为你介绍的 Enfold 主题添加粘性按钮的全部内容,使用浮动按钮使用户与您的网站的交互更加舒适。它可以通过改进网络资源的功能来增加转化率,希望对你的WordPress建站有所帮助,如有问题,可联系我们。当然选择高度可定制、功能丰富、轻量级浮动按钮插件也是可以的。

  推荐:如何在Xampp中安装PHP GD(GD Graphics Library)

  推荐:Enfold主题建站教程

5/5 - (2 votes)

晓得博客,版权所有丨如未注明,均为原创
晓得博客 » Enfold主题添加粘性按钮(无插件)

转载请保留链接:https://www.pythonthree.com/enfold-theme-add-sticky-button/

Claude、Netflix、Midjourney、Chatgpt Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折

Chatgpt-Plus注册购买共享账号
Kinsta-free-hosting主机
Kinsta-free-hosting主机
Elementor可视化创建WordPress网站
Elementor可视化创建WordPress网站
滚动至顶部