在网站的持续运营中，用户体验优化始终是我们关注的核心。作为轻量而高效的交互组件，悬浮按钮能把常用入口固定在用户视线范围内，显著缩短点击路径、提升导航效率与操作顺畅度。
借助Elementor这个WordPress插件的可视化构建，即便没有编程基础，也能通过拖拽快速制作出美观、响应式、功能完善的悬浮按钮。
接下来，本Elementor教程将手把手演示制作流程，并提供样式、移动端适配与可访问性等实战要点，帮你为网站增添一处“好用不打扰”的交互。
前提条件
- 已在 WordPress 网站上安装并激活 Elementor 插件。并且使用Elementor制作出了一个Footer，且设置Footer为整站展示。
- 如果需要更高级的功能，可能需要 Elementor Pro。
1. 编辑Footer模板
我们通过在Footer中添加Icon或者其他按钮小部件，并让其固定浮动在我们网页中来实现底部悬浮按钮的效果。
如果你是使用Elementor Pro，那么就通过Templates –> Theme Builder来进入到Footer模板编辑页面。
如果你使用的是Elementor免费版 + Elementor Header & Footer Builder这个WordPress插件制作的Footer，那么可以通过Appearance –> Elementor Header & Footer Builder来编辑Footer。
制作Footer的过程不再赘述，如果你还没有制作好Footer，可以看我这篇文章先开始。
我们进入到Footer的可视化编辑界面后，在Footer容器下新建一个Flexbox容器，用来装我们的底部悬浮元素，像这样子：
2. 添加Icon小部件
在 Elementor 编辑器左侧的元素面板中，找到 “Icon” 小部件。将 “Icon” 小部件拖放到悬浮按钮容器中。
3. 设置Icon小部件
我们先给Icon小部件设置样式，具体设置什么样式，根据我们自己的需求来定：
- 如果是返回顶部按钮，那么就给它设置一个向上的箭头；
- 如果是需要一个联系方式的悬浮按钮，那么我们可以给它设置一个微信的LOGO。
我们在做悬浮按钮的时候，要让用户看到这个悬浮图标就能够知道预期的一个跳转效果是什么。
我们添加了三个Icon小部件，分别对应：微信、WhatsApp、以及返回顶部功能。
设置悬浮按钮的内容
比如我们要做一个联系方式的悬浮按钮，那么我们可以选择使用微信的LOGO，点击该悬浮按钮后跳转至联系页面，然后让用户扫码加微信。
设置悬浮按钮的样式
这边的Icon样式对应的表现形式如下图注释，可根据实际需求自行调整：
设置悬浮按钮为悬浮状态
我们给第一个Icon小部件设置Fixed布局，使其固定在我们的浏览器窗口的某个位置。
- 点击左侧面板的 “Advancaed” 选项卡。
- 定位设置：
- 展开 “Position” 部分。
- 将 “Position” 设置为 “Fixed”。
- 选择位置：
- 在 Horizontal Orientation 和 Vertical Orientation 中设置为右，下。
- 调整偏移量：
- 如果需要微调按钮的位置，可以调整 “水平偏移” 和 “垂直偏移” 数值。
- 设置 Z 索引：
- 在 “Z-index” 字段中输入较高的数字（如 999），确保按钮位于其他内容之上。下图中漏设了。
如下图所示：
然后其他两个悬浮按钮也重复上述步骤，即可得到以下效果：
4. 设置在其他设备端下的样式
我们完成第三步以后，我们就已经实现了在PC端下的悬浮按钮样式的设置。
但是如果想要在其他设备端正常显示，我们需要通过Elementor的响应式布局功能来实现。
我们点击顶部栏的不同设备可以切换预览在不同设备下的显示效果：我们可以对这些悬浮按钮进行一些细微的调整来达到最优的效果。比如，字体大小、间距等等。
在不同的设备端调整的样式最终会在不同的设备端显示出来。
平板端：
M端：
比如说我不想在M端显示WhatsApp这个悬浮按钮，那么我们就可以通过“Advanced”选项卡中的“Responsive”属性来设置隐藏，效果如下：
5. 设置展示条件并发布悬浮按钮
完成以上四步以后，如果达到你满意的效果，那么此时我们点击右上角的Publish按钮，即可将我们的悬浮按钮应用至整站。