文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

2024最新Elementor Floating Buttons使用教程(附视频)

文章导航

本文介绍最新版本Elementor Floating Buttons使用教程,本功能基于Elementor 3.23本及以上,如果你网站的Elementor版本比这版本低,请先升级到此版本以上。Elementor Floating Buttons功能以模版的形式提供功能,免费版本的有3个预制模版可以使用,Elementor Pro版本则可以使用30多个预制模版。

Elementor Floating Buttons模版

启用Elementor Floating Buttons功能

将Elementor升级到3.23版本及以上之后,进入Elementor设置页面,切换到Featured标签。

image 57 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

激活Floating Buttons功能,注意目前它还是Beta功能,如果你不是新的网站,请做好备份再启用这个功能。

另外,这个功能有前置要求,你需要开启Flexbox Container,此功能也在当前的页面开启。

image 58 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

如果你还不了解Elementor Container,请先阅读我写的文章《Elementor Container超详细讲解教程(附视频)》

添加Elementor Floating Buttons模版

开启功能之后,你可以在网站后台的Templates菜单下看到一个Floating Buttons菜单。

image 59 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

点击Floating Buttons菜单,进入界面,并点击【Add New】添加一个新的Floating Buttons模版。

image 60 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

在跳转页面中你可以在模板库中选择你喜欢的风格的模版直接导入并编辑。(注意:这里你只能导入和编辑,如果没有导入并关闭了模版库窗口,就会自动弹出返回到模版列表页面

image 62 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

点击导入的过程中可能需要你链接一下账号,不然会导入失败!

导入之后就进入了Elementor模版编辑,并且在画布中可以看到导入的浮动按钮。

image 63 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

编辑Elementor Floating Buttons的内容和外观

导入之后你就可以通过Elementor编辑浮动按钮的内容和外观,当然导入不同模版在内容上编辑修改有所不同。

修改 Floating Buttons的内容

这里以我导入的Interactive(交互式)浮动按钮作为例子。在Content中设置浮动按钮的内容,你可以增加和删除按钮选项。选择每个选项的联系平台,设置弹出的文字内容,设置联系方式。

浮动按钮可以使用的联系平台。

同时你可以通过拖拽项目修改顺序。

修改 Floating Buttons的外观

在Interactive的Style中修改外观和风格。这里你可以修改浮动按钮的颜色,字体,颜色,投影,边距,动画等外观风格,这里我就不一一介绍,自己每个选项修改一下就能立马看到效果,根据你自己喜欢的风格去设置即可。

image 67 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

修改Floating Buttons在页面中的位置

Interactive的Advanced中,你可以修改浮动按钮的位置。

image 69 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

Layout选项中设置横向和纵向对齐,Offset是设置和边缘的距离。

设置浮动按钮的响应式

你可以设置浮动按钮显示的终端,Elementor提供了手机端的浮动按钮模版,你可以创建一个手机端的浮动按钮,并设置PC段的浮动按钮模版,只需要在对应的模版中将浮动在不需要显示的终端隐藏即可。

可以选择的手机端浮动按钮模版。

image 75 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

当然,你也可以所有终端都用一个悬浮按钮模版。这个根据你自己的需求和实际情况。

发布和设置Display Condition

设置完成之后我们需要发布模版,点击【发布】按钮。

点击发布会自动跳转到Display Condition设置,你可以设置浮动按钮要显示的页面,一般情况下如果整个网站都要显示浮动按钮,那么按照如下图片设置即可,设置之后保存并关闭模版。

如果你的浮动按钮需要设置在不同的页面显示,比如你制作了一个浮动按钮希望它只在产品详情页面显示,那么你可以如下图设置:

image 74 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

最后访问页面,查看自己做好的悬浮按钮展示情况。

image 76 - 2024最新Elementor Floating Buttons使用教程(附视频) - NUTSWP

视频教程

B站视频:https://www.bilibili.com/video/BV1si421a7xV

Youtube视频:https://www.youtube.com/watch?v=MVy4HDhZJy8

相关内容
Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程

本文介绍如何使用Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程,将Zapier流程集成到Elementor Form中可以实现表单消息关键词过滤和转发。 此方法适合需要过滤垃圾关键词询盘邮件消息的用户,一般表单安全验证主要是防止机器人提交垃圾信息,但是无法阻止人工发送的垃圾询盘,

阅读全文 »
如何通过CSS控制文本的行数?

我通常在使用Elementor Loop Items模版制作产品列表时,会使用CSS代码来控制一下摘要的行数,这样内容看起来比较整齐。 如果你直接选择的摘要元素,是可以控制文本单词数量。 但是如果你使用的摘要内容是一个自定义字段,通过文本元素去获取和展示,将没有长度选项去控制,这是我会通过下面的CS

阅读全文 »
WP基础:固定链接设置

本文介绍WordPress网站的固定链接设置,这是一项基础的WordPress设置,固定链接对SEO也有一定的影响。固定链接结构应该在网站创建之初或者网站上线之前设置好。 WordPress 中的固定链接是什么? 固定链接实际上就是用户通过浏览器访问某一个页面的唯一的地址,之所以称其为固定链接,就是

阅读全文 »
WP基础:搜索引擎可见性设置

通常我们安装启动一个新的WordPress网站,WordPress的基础设置中默认的搜素引擎可见性是开启的,但是我们在制作网站的过程中,网站内容是不完备的,所以并不希望搜索引擎索引网站的页面。 我们可以通过WordPress基础设置中的阅读设置页面,勾选上【 建议搜索引擎不索引本站点】,这样搜索引擎

阅读全文 »
文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!