如何使用 Divi 在华丽的 CTA 部分强调您的粘性按钮

当 Divi 粘性选项功能发布时，我们博客上的发布帖子附有现场演示，向您展示了此新功能的多功能性。 为了帮助您更好地理解粘性选项并开始在您的设计中使用它们，我们将向您展示如何在本教程中重新创建一个现场演示设计。 我们正在重新创建的设计侧重于强调您的粘性按钮。 这是一个基于文本的 CTA 部分，可让您以漂亮的方式突出您的号召性用语。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载 CTA 部分布局

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

下载文件

免费下载

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

下载

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

1. 构建元素结构

添加新部分

背景颜色

首先向您正在处理的页面添加一个新部分。 这可以是新页面或现有页面，但我们建议将其添加到已经包含一些内容的页面，这样就有足够的滚动空间让您真正看到栩栩如生的效果。 打开部分设置并应用您选择的背景颜色。

• 背景颜色：#00965a

浆纱

移至该部分的设计选项卡并应用最大高度。 这个最大高度将帮助我们确保该部分的高度是有限的。

• 最大高度：100vh

溢出

由于我们稍后将在本教程中应用一些滚动效果，因此我们还需要隐藏部分的溢出以确保没有任何内容超出部分容器。

• 水平溢出：隐藏
• 垂直溢出：隐藏

添加新行

列结构

部分设置到位后，使用以下列结构添加新行：

浆纱

尚未添加任何模块，打开行设置并应用一些自定义大小设置。 这些大小设置将允许行容器占据整行的宽度，从而为我们的设计提供全屏效果。

• 宽度：100%
• 最大宽度：无

第 2 列设置

间距

接下来打开第 2 列设置并在不同的屏幕尺寸上应用一些自定义填充值。

• 底部填充：60px
• 左填充：
  • 平板电脑和手机：5%
• 右填充：
  • 台式机：10vw
  • 平板电脑和手机：5%

将文本模块添加到第 1 列

添加内容

是时候添加模块了，从第 1 列中的文本模块开始。添加一些您选择的内容。 要创建与本文预览中完全相同的设计，请插入一些有助于增强 CTA 的相关词，我们将在本教程后面的第 2 列中放置这些词。 确保将每个单词也放在自己的行中。

文字设置

转到模块的设计选项卡并更改文本设置。 您会注意到我们使用视口宽度作为我们的文本大小单位。 使用视口宽度单位将帮助我们在所有屏幕尺寸上保持文本响应。

• 文字字体：Work Sans
• 文字字体粗细：粗体
• 文字颜色：#000000
• 文字大小：10vw
• 文本行高：0.2em

将文本模块添加到第 2 列

添加内容

进入第二列。 在那里，添加一个带有一些您选择的号召性用语副本的文本模块。

文字设置

转到模块的设计选项卡并相应地更改文本设置：

• 文字字体：Work Sans
• 文字颜色：#ffffff
• 文字大小：56px
• 文本行高：1.2em

浆纱

也为文本模块分配最大宽度。

• 最大宽度：400px

将按钮模块添加到第 2 列

添加副本

我们设计中需要的下一个也是最后一个模块是第 2 列中的按钮模块。添加一些您选择的副本。

按钮设置

转到模块的设计选项卡并相应地设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：16px
• 按钮文字颜色：#000000
• 按钮背景颜色：
  • 默认值：#ffffff
  • 悬停：rgba(255,255,255,0.7)
• 按钮边框宽度：5px
• 按钮边框颜色：rgba(0,0,0,0)

• 按钮边框半径：5px
• 按钮字体：Work Sans
• 显示按钮图标：否

2. 应用滚动和粘性效果

将垂直运动添加到第 1 列中的文本模块

现在我们的设计基础已经建立，是时候应用滚动和粘性效果了！ 打开第 1 列中的文本模块并应用一些响应式垂直运动。

• 启用垂直运动：是
• 起始偏移：
  • 桌面：10
  • 平板和手机：0
• 中间偏移：0
• 结束偏移：
  • 桌面：-10
  • 平板和手机：0
• 运动效果触发器：元素顶部

向第 2 列添加粘性效果

接下来，我们将打开第 2 列设置并在桌面上应用粘性效果。 由于较小屏幕尺寸上的列和模块放置在彼此下方，而不是彼此相邻，因此我们将在较小屏幕尺寸上将粘性设置恢复为“不粘贴”。

• 粘性位置：
  • 桌面：坚持到顶部
  • 平板电脑和手机：请勿粘贴
• 粘性顶部偏移：80px
• 底部粘性限制：部分
• 从周围的粘性元素偏移：是
• 过渡默认和粘性样式：是

将粘性样式添加到第 2 列中的按钮

既然第 2 列已变为粘性，我们将能够将粘性样式应用于列本身和列内的模块。 然而，我们将进行的唯一粘性更改集中在按钮上。 打开模块，转到按钮设置并反转文本和按钮颜色。 就是这样！ 保存布局并退出视觉构建器后，您可以在网站上实时观看精美的设计。

• 按钮文字颜色：#ffffff
• 按钮背景颜色：#000000

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何重新创建在粘性选项功能更新帖子中用作演示的设计之一。 此设计侧重于通过在启用粘滞状态后更改样式来突出显示粘滞按钮。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。