浮动区块构建器

浮动区块构建器允许您创建固定的、非模态的元素，这些元素在访客浏览或滚动页面时保持可见。浮动区块适用于促销横幅、信息栏、持续的号召性用语以及其他无需打开模态窗口即可随时访问的内容。

创建浮动区块

1. 导航至 仪表盘 -> 浮动区块 并点击 添加新。

2. 选择 空白 从头开始，或选择一个预定义的浮动区块分类。

3. 如果您选择了预定义分类，请选择其中一个区块模板。

4. 输入一个易于识别的区块名称，然后点击 创建浮动区块。

5. 根据您网站上配置的页面构建器，使用 Gutenberg、Elementor 或 WPBakery 构建或编辑区块内容。

6. 配置区块位置、显示模式和条件，然后发布它。

在编辑器中打开浮动区块设置

浮动区块设置在支持的每个构建器中都包含相同的功能，但它们的位置取决于当前使用的编辑器。

Gutenberg

点击编辑器顶部工具栏中的 浮动区块设置 齿轮图标以打开设置侧边栏。

如果齿轮图标被隐藏，请打开右上角的三个点菜单，然后选择 浮动区块设置。在打开的面板中，激活星形图标以将浮动区块设置保留在顶部工具栏中。

Elementor

通过 Elementor 编辑器中的齿轮图标打开浮动区块文档设置。区块设置显示在编辑器面板中。

WPBakery

浮动区块设置显示在 WPBakery 内容编辑器下方的 设置 面板中。

配置浮动区块

• 区块 — 控制响应式宽度和高度、内容对齐、屏幕位置、间距、背景、边框、阴影和打开动画。使用 Z-index 将区块置于其他页面元素之上或之下。
• 关闭行为 — 添加并设置关闭按钮的样式，允许通过 按选择器关闭 让另一个元素关闭区块，并通过 持久关闭 控制已关闭的区块是否保持隐藏。
• 显示模式 — 决定区块是立即显示还是等待触发器。
• 条件 — 决定区块在何处可用。结合 包含 和 排除 规则，以定位整个网站、选定的文章类型、单个页面、分类法、术语、用户角色或其他支持的上下文。
• 响应式 — 控制浮动区块是否在桌面端、平板端或移动端隐藏。

定位区域

定位区域 决定用于对齐浮动区块的区域：

• 全宽 — 相对于整个浏览器宽度定位区块。
• 容器 — 相对于网站内容容器定位区块。

水平和垂直对齐可以分别为桌面端、平板端和移动端配置。内边距在区块边界与其内容之间创建空间，而外边距在区块与其定位区域边缘之间创建空间。

显示模式

• 始终 — 当显示条件满足时立即显示区块。
• 使用触发器 — 保持区块隐藏，直到其启用的触发器之一被激活。

可用的触发器包括页面加载、滚动、不活动、退出意图、点击、URL 值、页面浏览和会话。有关详细信息，请参阅 触发器 文章。

默认设置

• 区块的宽度和高度会根据其内容自动调整。
• 区块具有透明背景，居中显示在屏幕上，并使用 全宽 定位区域。
• 打开动画已禁用。
• 默认条件包含整个网站。
• 显示模式 设置为 始终，因此不使用触发器，区块会立即出现。
• 关闭按钮和 持久关闭 已禁用。

弹窗还是浮动区块？

弹窗是显示在页面上方并带有遮罩层的模态窗口。浮动区块是固定的、非模态的元素，显示时没有遮罩层，因此访客可以继续与页面交互。有关弹窗的工作流程，请参阅 弹窗构建器。

关闭后测试浮动区块

如果在编辑浮动区块时它不再出现，请暂时禁用 持久关闭，并为每个活动触发器禁用 仅触发一次。测试完成后，恢复所需的值。

您也可以在隐私浏览窗口中测试浮动区块，或清除当前浏览器中的网站 Cookie。默认 Cookie 有效期为 7 天。

视频教程