如何在 WordPress 中创建 Elementor 表
lyc054211使用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 都有实际意义。
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章 暂无评论... |
|---|
