如何使用Elementor制作悬浮按钮?(视频)

标签:
文章导航

本文介绍如何使用Elementor来制作悬浮按钮。通常我们会在网站侧边添加一些悬浮按钮,放置一些促进转化的联系信息,例如:邮箱、询盘表单等内容。

文末附视频教程。

为了方便管理和维护,通常我会将悬浮按钮制作在Footer模板中。

1、进入Footer模板编辑

添加一个新的Section用于布局悬浮按钮

image 112 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

为了避免该Seciton占用像素,将Section的margin和padding全部设置为0像素

image 113 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

同时将section中column的margin和padding都设置为0像素

image 114 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

2、添加一个悬浮按钮

可以设置为悬浮按钮的元素有很多,你可以用Icon元素、按钮元素等等。

我习惯使用按钮元素。

添加一个按钮元素到刚添加到section中

image 115 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

设置按钮元素的宽度,在Advance中找到width将选项设置为Inline(Auto)

image 116 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

1)将Position设置为Fixed

2)水平方向设置为居右

3)水平方向的间距设置为30像素,可以和你的回到顶部按钮进行对齐

4)垂直方向设置为下

5)垂直方向的间距设置为80像素,让按钮居于回到顶部的上方。

image 117 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

如果你还要添加其它悬浮按钮,其它设置保持一致,调整垂直方向的间距以实现排列效果。

3、设置悬浮按钮样式

以联系邮箱为例,删除按钮文字,并设置按钮的图标,将按钮的间距设置为0

image 119 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

在Style里面调整字体大小,实际上通过字体大小来控制图标大小

image 120 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

设置按钮的padding,保持和你的回到顶部或者其它悬浮按钮保持一致

image 121 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

设置按钮链接,我这里是这是一个邮箱地址链接,你还可以添加页面链接,或者一个弹出框等等。

image 122 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

4、复制一个悬浮按钮

右击制作好的悬浮按钮,并点击Duplicate,即可得到一个新的悬浮按钮。

image 123 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

然后切换到Advance中设置垂直间距,我这里修改成130像素

image 125 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

然后修改链接和图标即可得到一个电话联系的悬浮按钮。

image 126 - 如何使用Elementor制作悬浮按钮?(视频) - NUTSWP

以此类推你还可以添加其它你想要悬浮按钮效果。

视频教程

通过悬浮按钮你可以知道回到顶部按钮,详细的过程可以阅读《如何使用Elementor制作一个回到顶部按钮?》

需要建站服务?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
企业微信
Whatsapp
相关文章
如何将Namecheep域名转移到Cloudflare?

本文介绍如何将如何将Namecheep域名转移到Cloudflare,我在Namecheep注册的域名最近提示要续费,费用要17.16美元,而Cloudflare域名续费只需要10.44美刀,相对来说便宜很多,于是我将域名迁移到了Cloudflare管理。 这里需要注意的是,如果你使用的服务器比如像

阅读全文 »
Elementor如何给产品详情添加动态FAQ内容(附视频)?

本文介绍Elementor如何给产品详情添加动态FAQ内容,在使用Elementor Single模版制作产品详情页的过程中,一般情况下,只能在模版中添加固定和通用的FAQ内容,这会导致每个产品都是一样的FAQ,无法实现在不同产品中添加不同的FAQ内容。 本文将介绍使用ACF的中继器字段并结合Unl

阅读全文 »
Admin Column设置页面无法访问处理

最近遇到Admin Column设置页面无法访问的问题,尝试停用所有的插件,切换主题都无法解决。也尝试了重新安装插件,或者安装之前版本,或者免费版本。 查阅了官方的文档说是用户权限的问题,经过各种尝试都没有解决。 最后找到下图中强制运行安装脚本的方式,尝试了一下,完美解决问题。 最后判断可能是数据库

阅读全文 »
WordPress网站添加WhatsApp聊天的终极指南

本文介绍实现WordPress网站添加WhatsApp聊天的方法,WhatsApp是外贸最常用的在线聊天工具之一,也是外贸网站最常用的聊天工具。 通常我们是通过实现点击跳转的方式打开本地的WhatsApp程序,并且直接打开链接对应的账号聊天窗口。 建议的做法网站设置一个全局的WhatsApp连接入口

阅读全文 »
B2B外贸建站Cookies同意横幅设置指南2025

本文介绍如何设置B2B外贸网站的Cookies同意横幅,Cookies同意横幅设置需要基于B2B外贸网站隐私政策和不同地区的法律要求去设置,本文将详细介绍需要设置Cookies同意横幅的场景,如何选择合适的CPM平台,如何完成网站Cookies横幅设置的详细操作步骤。 1、什么是Cookies? C

阅读全文 »
通过CSS代码美化Gtranslate自动翻译Popup的外观

本文介绍如何通过CSS代码美化Gtranslate自动翻译Popup的外观,默认的Popup外观虽然也很好看,但是他的弹出框在网页中是居中显示的,并且还会添加黑色蒙版,用户体验比较差。 Gtranslate小部件的其他显示模式也不能完全匹配网站的展示需求,调研了之后,我使用Popup模式,并通过CS

阅读全文 »
Elementor添加Bilibili视频2种方法

本文介绍Elementor添加Bilibili视频2种方法,第一种是通过HTML代码插入Iframe,另外一种是通过插件实现,本文会对这2种方法做详细的介绍。 我自己也会在网站中添加B站视频,通常我使用的都是Iframe的方法,这种方法可以写一个全局的CSS代码,来控制样式,然后复制的Iframe代

阅读全文 »
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!