如何在没有代码的情况下在古腾堡中创建（固定）粘性块

您是否正在寻找在古腾堡中创建粘性块的方法？ 🤔

无论您是想创建联属网络营销免责声明、提供折扣还是吸引访问者注意您产品的重要功能，粘性块都可以帮助您实现这些目标。

即使用户向下滚动页面，粘性块（也称为固定块）在屏幕上仍然可见，从而确保您要突出显示的内容始终在他们的视图中。

👉 这是我们正在讨论的示例 - 即使用户滚动，您也可以看到社交图标如何“卡在”其位置：

在古腾堡中添加粘性块可提供无缝且引人入胜的用户体验，使您能够有效地传达信息并吸引受众的兴趣。

古腾堡不提供开箱即用的粘性块。 但是，您可以使用第三方工具向您的帖子和页面添加粘性块。

在本教程中，我们将向您展示如何使用名为 Otter Blocks 的流行古腾堡插件向您的 WordPress 网站添加粘性块。

让我们深入探讨一下。 🤿

如何在古腾堡编辑器中添加粘性块

要在古腾堡编辑器中添加粘性块，您需要执行以下步骤：

• 第 1 步：安装并激活 Otter Blocks 插件
• 第 2 步：为您的块启用“转换为粘性”工具
• 步骤 3：更改粘性块位置
• 步骤 4：配置偏移量
• 步骤 5：在移动设备上启用粘滞块
• 可选步骤：尝试浮动模式
• 可选步骤：指定块行为

第 1 步：安装并激活 Otter Blocks 插件🔌

Otter Blocks 是一个 WordPress 插件，可扩展古腾堡编辑器的功能。

它提供了一系列页面构建块、编辑器功能和模板，以帮助改进网站的设计和功能。

Otter 提供的一些最受欢迎的块包括定价表、推荐、社交图标、地图、进度条、动画、倒计时和产品评论等。 这是水獭块的完整列表。

Otter Blocks 有免费版和高级版（称为 Otter Pro）。

您可以使用免费版本在古腾堡中创建基本的粘性块，因此您可以免费遵循本教程。

但是，要执行我们介绍的一些步骤，例如增加块和屏幕之间的距离、删除前端的粘性块、在移动设备上显示粘性块等，您需要该插件的高级版本。

Otter Pro 的单个网站年费为 49 美元。 您可以从这里购买。 如果您想在使用插件之前尝试一下，请尝试一下这个演示。

➡️ 要继续，请安装 Otter 的免费版或高级版。 在下面的教程中，我们将尝试记录某个功能何时需要高级选项。

第 2 步：为您的区块启用“转换为粘性”工具 🚧

在古腾堡编辑器上打开要添加粘性块的页面或帖子。

选择要粘贴的块，然后转到编辑器右侧的面板。

在面板上导​​航到“阻止”并转到“阻止工具”选项。 通过选择加号展开“块工具”。

然后从下拉菜单中选择“转换为粘性” 。

一个名为“粘滞”的新选项将出现在“块工具”的正下方。 展开它并转到Sticky To 。

在“粘到”中，您可以设置想要块粘到的元素。 有四种选择：

1. 顶层块
2. 部分
3. 父块
4. 屏幕

要了解这些选项以及哪一个适合您的置顶帖子，请打开古腾堡编辑器上的文档概述，然后查看置顶帖子块周围的块。

最顶层的块是顶级块。 通过选择顶级块，您将使粘性块与最顶层的块固定在一起。 在我们的例子中，它是下图中的组块。

接下来，选择“Section”将确保粘性块固定到“Section”块，选择“Parent”块将使粘性块固定到粘性块正上方的块。

在我们的例子中，父块是部分列块。 请参见下图。

最后，选择“屏幕”选项将告诉编辑器忽略所有块，并将帖子粘贴到用户屏幕的顶部。

粘性块的位置默认设置为顶部。 要了解如何更改其位置，请继续执行下一步。

第三步：更改粘性块位置🚩

要更改粘性块位置，请返回右侧面板并在“粘到”选项正下方查找“位置” 。

您可以将粘性块放置在屏幕的顶部或底部。 底部位置仅对 Otter Pro 用户可用。

以下是该块在我们的演示网站之一上的外观：

第四步：配置偏移量⚙️

设置粘性块的位置后，尝试预览它。 如果该块看起来距离屏幕太远或太近，请使用“偏移”选项来增加或减少粘性块与屏幕之间的距离。

第 5 步：在移动设备上启用粘滞块📱

默认情况下，粘滞块仅出现在桌面上。 如果您想在移动设备上启用它，只需切换“在移动设备上启用”选项即可。

顺便说一下，只有 Otter Pro 用户可以访问移动选项。

可选步骤：尝试浮动模式🏄

当用户滚动页面时，粘性块可以设置为沿着屏幕浮动。 这是吸引用户注意力并将其指向粘性块的好方法。

只有 Otter Pro 用户可以使用浮动模式，并且它只能应用于顶级块，在我们的例子中是组块。

一旦您切换浮动模式，系统就会要求您定义块的width 、 side和side offset 。

当然，宽度是指块的宽度，而侧面可以帮助您定义块在屏幕上的位置（左侧或右侧）。 偏移量是指粘性块与所选边之间的距离。

我们建议您在配置浮动模式后预览页面并进行必要的调整。

可选步骤：指定阻止行为👨🏽‍💼

使用 Otter Block 插件，您可以在同一页面上创建多个粘性块。 有时这些块可能会相互碰撞。 您可以使用“行为”选项来指定粘性块在碰撞期间将如何响应。

您可以将行为设置为折叠、淡入淡出或堆叠。

选择折叠将使粘性块设置为具有相同的运动，以便在碰撞时将一个块折叠成另一个，如下所示：

选择淡入淡出会将块设置为淡出或消失到另一个块中。

最后，选择“堆叠”会将块堆叠在它碰撞到的其他粘性块的顶部，如下面的 gif 所示。

淡入淡出和堆叠仅适用于 Otter Pro 用户。

就是这样。 您现在已经在古腾堡中添加了一个粘性块。 🤩

在古腾堡创建您的第一个粘性块🧱

在古腾堡中添加固定或粘性块是吸引访问者注意 WordPress 网站重要部分的好方法。

由于古腾堡不提供默认的粘性块，因此您需要使用第三方插件将此功能添加到您的网站。

虽然有一些粘性块插件，但 Otter Blocks 是最简单、最用户友好的块插件。

它有免费版和高级版。 免费版本可用于创建粘性块，但一些高级设置（例如将块固定在屏幕底部或在移动设备上启用块）可以使用该插件的高级版本来实现。

👉 要使用 Otter Blocks 插件在您的页面上创建并运行粘性块，您需要按照以下步骤操作：

如果您对如何在古腾堡中创建粘性块有任何疑问，请在下面的评论部分告诉我们。