在网站运营的过程中，用户体验的优化至关重要。悬浮按钮作为一种简洁而高效的交互元素，能够显著提升网站的导航便捷性和用户的操作体验。
借助于强大的页面构建工具 Elementor，即使是没有编程基础的用户也能轻松创建出美观且功能丰富的悬浮按钮。
本文将详细介绍如何利用 Elementor 制作悬浮按钮，为网站增添一份独特的交互设计。
前提条件
- 已在 WordPress 网站上安装并激活 Elementor 插件。并且使用Elementor制作出了一个Footer，且设置Footer为整站展示。
- 如果需要更高级的功能，可能需要 Elementor Pro。
1. 编辑Footer模板
我们通过在Footer中添加Icon或者其他按钮小部件，并让其固定浮动在我们网页中来实现底部悬浮按钮的效果。
如果你是使用Elementor Pro，那么就通过Templates –> Theme Builder来进入到Footer模板编辑页面。
如果你使用的是Elementor免费版 + Elementor Header & Footer Builder插件制作的Footer，那么可以通过Appearance –> Elementor Header & Footer Builder来编辑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按钮，即可将我们的悬浮按钮应用至整站。
