如何使用 Elementor 表单收集和管理提交数据
lyc054211Elementor 中添加 Floating Bar 浮动栏的方法
Floating Bar（浮动栏）是一种固定在网页顶部或底部的横幅条，常用于展示促销信息、重要公告或行动号召（CTA），可以有效吸引访问者注意力，同时不会打断浏览体验。
请注意，Floating Bar 是模板，而不是小工具（Widget）或其他元素。它必须在 WordPress 后台中添加，不能在 Elementor 编辑器中直接创建。
常见使用场景
案例示例：
Jan 拥有一家服装店。天气预报显示未来几周将会下雨，她在网站上添加了一个浮动栏，提醒访问者他们销售雨伞。这个浮动栏显示在所有页面的底部。
其他使用场景：
- 促销活动：可在浮动栏中显示折扣码
- 导航跳转：引导用户前往新栏目或特别页面
- 行动触发：设置 CTA 按钮，引导用户订阅或点击聊天功能
添加 Floating Bar：逐步操作指南
以下是一个完整示例，我们创建一个浮动栏，引导用户与客服聊天。这个浮动栏基于 Elementor 提供的预设模板完成。
注意：
- Floating Bar 基于已有模板创建
- 内容可自定义，但结构必须从模板库中选择
第一步：创建浮动模板
因为 Floating Bar 属于模板类型，首先要创建一个模板。
- 登录 WordPress 后台，进入：
模板 > Floating Elements（浮动元素）
- 点击右侧按钮：添加新浮动元素（Add New Floating Element）
- 在下拉菜单中选择：Floating Bars
- （可选）为浮动栏命名，如“雨伞促销栏”
- 点击创建浮动元素（Create Floating Element）
系统会自动打开 Elementor 模板库，并跳转至 Floating Bars 分类。此时必须从中选择一个模板。
提示：带有“Pro”标记的模板仅供 Elementor Pro 用户使用。
第二步：插入模板
- 将鼠标悬停在喜欢的模板上，点击插入（Insert）
- 模板会在 Elementor 编辑器中加载
第三步：编辑浮动栏内容
可以根据所选模板，自由调整浮动栏中的图标、文字、CTA 按钮和位置等内容。
以下是示例中的操作：
1. 修改图标
- 找到面板中的 Icon 图标字段
- 点击右侧图标按钮，打开图标库
- 搜索并选择雨伞（umbrella）图标，点击“插入”
2. 修改横幅文本
- 找到 Announcement（公告内容）字段
- 修改内容为：Stormy Weather? Check out our umbrellas.（暴风雨将至？来看看我们的雨伞吧。）
3. 设置 CTA 按钮
- 打开 CTA 按钮字段
- 修改按钮文字为：Stay dry!
- 在按钮链接中添加跳转页面链接
4. 修改显示位置
- 切换到 高级（Advanced）选项卡
- 点击底部图标（代表将浮动栏放置在页面底部）
- 预览时会看到浮动栏出现在浏览器底部
第四步：发布与设置显示条件
- 点击右上角的发布（Publish）按钮
- 在弹窗中点击添加条件（Add Condition）
如果使用的是 Elementor Pro，可以设置浮动栏在哪些页面、文章、分类中显示。例如：只在首页显示，或在产品页显示。
- 设置完条件后，点击保存并关闭（Save & Close）
此时，Floating Bar 就会出现在指定页面中，用于吸引访问者的注意力。
小结
Floating Bar 是一种不打扰浏览的前端提示方式，适合展示推广、公告和交互按钮。它依赖模板创建，但内容和样式都具备自由度。使用 Elementor Pro 的用户可以设置显示条件和页面范围，使其与网站风格更加契合。
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
如何解决 WordPress 中 admin-ajax.php 的高使用率lyc054211
如何Elementor用更改站点标识和菜单lyc054211
如何使用Elementor在WordPress中创建自定义页面布局lyc054211 暂无评论... |
|---|