Elementor 中添加 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 的用户可以设置显示条件和页面范围，使其与网站风格更加契合。

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