如何在向下滚动页面时构建粘性 CTA 菜单

传统上，当页面加载时，粘性菜单在页面的顶部（或底部）可见。 但是，在用户向下滚动页面时构建粘性 CTA 菜单可以是一种创造性且有效的方法，可以让那些重要的 CTA 始终可点击。 在某些方面，它是两全其美的。 它允许 CTA 保持其在原始设计中的主要位置。 而且，它使 CTA（按钮）的缩小版本在用户熟悉的粘性菜单结构中可见。

在本教程中，我们将向您展示如何在 Divi 中向下滚动页面时构建粘性 CTA 菜单。 通过添加一种直观但独特的方式来吸引访问者采取行动，这对桌面和移动用户来说非常有用。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

https://youtu.be/kpjbG8frPTQ

订阅我们的 YouTube 频道

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

如何在 Divi 中滚动页面时构建粘性 CTA 菜单

构建 CTA #1

为了开始构建我们的第一个 CTA，我们将使用一个带有自定义 CTA 按钮的模糊模块，当用户滚动时，该按钮将停留在页面的顶部和底部。

首先，在常规部分中创建一个新的单列行。

添加模糊

在行的列内，添加一个模糊模块。

打开模糊设置并添加您选择的图像而不是默认图标。 我正在使用 Cryptocurrency Layout Pack 中的图像。

在设计选项卡下，更新文本样式如下：

• 标题标题级别：H2
• 标题字体：Titillium Web
• 标题字体粗细：半粗体
• 标题文本对齐：居中
• 标题文字大小：36px（桌面），28px（手机）
• 标题行高度：1.5em
• 车身线高：2em

为 CTA 按钮添加行

在包含我们刚刚创建的模糊的行下，添加一个新的单列行。

为了使粘滞按钮的功能正确排列，使行设置正确很重要。

打开行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：1400px（桌面），100%（平板）

添加号召性用语按钮

在新行内，添加一个号召性用语模块。 更新内容如下：

• 我们只需要这个模块中的按钮元素，这样我们就可以摆脱标题和正文文本。
• 确保添加按钮链接 URL（'#' 现在就可以了），以便在设计布局时该按钮可见。 您以后可以随时更新。
• 禁用“使用背景颜色”选项。

（注意：您将无法在白色背景上看到白色按钮，但在下一步中会发生变化）

在设计选项卡下，更新以下按钮样式：

• 按钮文字大小：14px（桌面），11px（手机）
• 按钮文字颜色：#1b1f50
• 按钮背景颜色：#09d5fe
• 按钮边框宽度：0px
• 按钮字母间距：2px
• 按钮字体：Titillium Web
• 按钮字体粗细：粗体
• 按钮字体样式：TT
• 按钮填充：顶部 1em，底部 1em

继续更新设计如下：

• 宽度：33.33%
• 模块对齐：居中
• 填充：0px 顶部，0px 底部

按钮的 33.33% 宽度将允许按钮在处于粘性位置时正好占据浏览器窗口的 1/3。 将此与其他两个按钮（每个按钮的宽度相同 33.33%）结合起来，将提供一个完整的 CTA 按钮菜单栏。

在高级选项卡下，将以下自定义 CSS 片段添加到促销说明（它有我们不需要的不必要的间距）：

display:none;

然后添加另一个片段促销按钮：

display:block;

使按钮具有粘性

为了使按钮具有粘性，我们将使用粘性位置选项来粘贴按钮以及浏览器窗口的顶部和底部。 我们还将为默认的 Divi 固定标头添加一个偏移量。

更新以下内容：

• 粘性位置：粘在顶部和底部
• 粘性顶部偏移：54px（桌面），0px（平板电脑）
• 从周围的粘性元素偏移：否

设置好粘性位置后，我们现在可以定位处于粘性状态的按钮的样式。 在这种情况下，我们希望将按钮移到左侧，以便为以后添加其他粘性按钮腾出空间。

在粘性状态下更新以下变换样式：

• Transform Translate X 轴（粘性）：-100%

一旦它粘在页面的顶部或底部，这将移动按钮的距离等于按钮的确切宽度（即 33.33%）。

构建 CTA #2

现在我们有一个部分完成了一个有效的粘性 CTA 按钮，我们可以复制上一部分并对按钮进行细微的调整。

首先，复制该部分。

在新部分中打开 Call to Action 模块的设置并更新转换选项，如下所示：

• Transform Translate X 轴（粘性）：0px

这实际上只是将它恢复到默认状态，因为我们不想移动这个按钮，因为它需要保持在中心。

构建 CTA #3

要构建第三个 CTA 部分，请复制上一部分。

然后在新部分中打开 Call to Action 模块的设置并更新转换选项，如下所示：

• 变换 平移 X 轴（粘性）：100%

一旦它粘在页面的顶部或底部，这会将按钮向右移动等于按钮的确切宽度（33.33%）的距离。

更新按钮文本和颜色

要完善设计，请更新 CTA 按钮文本和颜色以匹配您的网站设计。 以下是此示例的设置：

对于 CTA #2…

• 按钮文本：查看我们的计划
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#1b1f50

对于 CTA #3…

• 按钮文字：与我们聊天
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#4328b7

在顶部和底部添加临时边距以测试功能

在普通网站上，这些 CTA 将位于页面中间的某个位置，因此有额外的空间可以上下滚动页面。 现在，我们可以在页面的顶部和底部添加一些临时边距。

在顶部添加 90vh 顶部边距。

在底部，添加 90vh 底部边距。

最后结果

现在让我们看看最终的结果。

最后的想法

本教程向您展示了一种将那些重要的 CTA 放在最前沿的创造性方法，以便用户可以随时单击它们。 它还添加了一种微妙的微交互，可以在不分散页面主要内容的情况下吸引更多注意力。 希望这将有助于让这些创意源源不断，以便您可以尝试更多设计以使其变得更好。

我期待在评论中收到您的来信。

干杯!