使用Elementor在网站中添加浮动按钮（Floating Button）

浮动按钮（Floating Button），有时也称为“浮动操作按钮”（Floating Action Button，简称FAB），是一种悬浮在网页上的用户界面元素，常被用于引导用户进行关键操作。本文将带你了解浮动按钮的核心功能、使用场景，并讲解添加步骤。

什么是浮动按钮？

浮动按钮是一种常见的网页交互元素，通常固定在页面的角落或边缘位置，并随着页面滚动持续显示。

它的几个关键特性如下：

• 突出显示：浮动按钮悬浮于页面内容之上，始终可见，方便用户随时点击。
• 重要操作：通常用于承载重要操作，如联系客服、发起聊天或添加新内容等。
• Material Design 风格：Google 的 Material Design 指南将其标准化，常带有动画和视觉吸引力。
• 图标识别：浮动按钮通常包含一个图标，如加号表示“新增”、铅笔表示“编辑”等。
• 可交互状态：按钮可根据用户操作显示不同的状态，如默认、按下、聚焦或禁用等，增强交互反馈。

常见使用场景

例如，Jan 刚开了一家花店。为了不错过任何潜在客户，她添加了一个浮动按钮，方便访客随时联系店员，无论他们浏览网站的哪个页面。

其他案例：

• 创建新内容：在邮件或笔记应用中，浮动按钮常用于快速新建内容。
• 快速导航：在某些界面中，浮动按钮可跳转至特定区域或页面。
• 触发操作：在任务管理类应用中，用于添加新任务。

添加浮动按钮的方法

需要注意：浮动按钮是模板，不是小工具或普通元素。它们在 WordPress 后台中添加，而不是在 Elementor 编辑器中直接使用。

以下是添加步骤的介绍。

添加浮动按钮：完整步骤

下面以创建一个“与客服聊天”的浮动按钮为例。这个按钮基于 Elementor 的浮动按钮模板实现。

⚠️ 提示：浮动按钮必须使用预设模板，虽然可以自定义内容，但无法从零创建新模板。

步骤一：创建模板

浮动按钮基于模板，因此必须先创建一个模板。

• 登录 WordPress 后台，进入：模板 > 浮动按钮（Templates > Floating Buttons）

• 右侧将打开“创建浮动元素”面板。

💡 提示：创建第一个浮动元素后，可随时通过点击“模板 > 新增”继续添加更多浮动按钮。

• 点击【新增浮动元素】（Add New Floating Element）

• 页面将打开模板库，自动切换至“浮动按钮”分类

• 鼠标悬停在你喜欢的模板上，点击【插入】

• 模板将加载到 Elementor 编辑器画布中

🔔 提醒：访客访问你的网站时，最开始只能看到 Messenger 图标。点击后，完整的浮动按钮界面才会展开。

步骤二：编辑浮动按钮内容

不同模板提供不同的设置项，以下为示例设置流程：

• 设置接收聊天的客服账号
  • 在面板中找到 Username 字段，输入将接收对话的客服账号
  • 访客点击聊天按钮后，消息将发送到该账号

📚 想要了解如何获取社交应用的用户名？请参考官方文档《How can I create smart links from my widgets?》

• 设置顶部栏显示的客服名称
  • 打开【顶部栏】（Top Bar）设置
  • 在【名称】字段中输入：Alex Smith

• 设置消息气泡中的昵称
  • 打开【消息气泡】（Message Bubble）设置
  • 在【名称】字段中输入：Alex

• 调整样式和形状
  • 切换至【样式】（Style）标签页
  • 打开【聊天框】（Chat Box）设置项
  • 通过“Corners”下拉菜单选择“圆形”以更改聊天框的形状

• 调整浮动按钮的位置
  • 切换至【高级】（Advanced）标签页
  • 设置“水平位置（Horizontal Position）”为左侧（Left）
  • 设置“垂直位置（Vertical Position）”为中间（Center）

• 完成编辑后，点击右上角的【发布】（Publish）

步骤三：为浮动按钮设置显示范围（Elementor Pro）

Elementor Pro 用户可以设置浮动按钮在哪些页面显示。建议设置为全站显示，以便在每一页都能使用该操作按钮。

小结

浮动按钮不仅是一种设计元素，更是帮助用户高效完成操作的重要功能。无论是增加互动、提供快捷支持，还是提升页面整体功能性，Floating Button 都有实际意义。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：[email protected]
④ 工作时间：周一至周五，9:30-18:30，节假日休息