使用 Divi 的行对齐和动画设置创建滑入式 CTA

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。 本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Cleaning Company Layout Pack 使用 Divi 的行对齐和动画设置创建滑入式 CTA。

为了帮助实现这一点，我们将首先删除所有已经存在的动画。 这样，我们可以突出显示滑入的号召性用语。

让我们开始吧！

预览

让我们来看看我们将在这篇文章中处理的三个不同的例子：

上传清洁公司登陆页面

添加新页面并切换到 Visual Builder

如前所述，我们将使用 Cleaning Company Layout Pack 来创建本教程，但您可以随意将这种方法用于您正在构建的任何网站。 添加一个新页面，输入页面标题并立即切换到 Visual Builder。

上传清洁公司登陆页面

完成后，您会在屏幕上看到三个选项。 您可以从头开始构建，选择预制布局或克隆现有页面。 选择第二个选项。

搜索 Cleaning Company Layout Pack，选择登录页面布局并将其上传到您的页面。

删除页面上的所有动画设置

找到页面上的部分

将布局上传到您的页面后，继续并找到以下部分。

移除动画

打开它的设置并删除已经存在的动画。

将样式扩展到所有部分

为了节省时间，我们将把这个动画风格扩展到页面上的所有设计元素。 我们将通过右键单击我们页面上的部分开始，选择“扩展动画样式”。 使其适用于整个页面的所有部分，然后单击“扩展”。

将样式扩展到所有行

重复相同的步骤，但改为将其应用于整个页面的所有行。

将样式扩展到所有模块

最后，让它也适用于页面上的所有模块。

创建 CTA #1

添加新行

地点

让我们开始创建第一个滑入式 CTA！ 在以下部分的底部添加一个新行：

列结构

为您刚刚添加的行选择以下列结构：

行对齐

我们将向左推行以帮助创建滑入效果。

• 行对齐方式：左

浆纱

我们还将减少行的宽度。

• 使用自定义宽度：是
• 自定义宽度：500px

间距

为了摆脱不必要的空白，删除行的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

添加号召性用语模块

添加副本

我们现在可以添加我们的号召性用语模块！ 添加一些选择的内容。

添加链接

接下来添加指向 CTA 模块的链接。 如果您还没有要重定向到的链接，则只需输入“#”即可。 如果不向此框中添加任何内容，您将无法看到该按钮，因此请确保不要将其留空。

删除背景颜色

CTA 模块默认具有背景颜色。 继续并在后台设置中将其删除。

复制截面渐变

打开包含蓝色渐变背景的部分。 在不更改任何内容的情况下，右键单击并复制设置。

在 CTA 模块中粘贴渐变

将此渐变背景粘贴到 CTA 模块上。

标题文字设置

再次打开 CTA 模块设置，转到标题文本设置并进行一些更改以匹配布局包：

• 标题字体：Ubuntu
• 标题字体粗细：粗体
• 标题文字大小：24px（桌面和平板电脑），16px（手机）
• 标题行高度：1.2em

正文设置

还要更改正文的正文字体粗细。

• 正文字体粗细：半粗体

按钮设置

接下来更改按钮设置。

• 为按钮使用自定义样式：是
• 按钮文字大小：18px
• 按钮文字颜色：#557df3
• 按钮背景颜色：#FFFFFF
• 按钮边框宽度：10px
• 按钮边框颜色：#FFFFFF
• 按钮边框半径：0px
• 按钮字体：Ubuntu
• 字体粗细：粗体

间距

也增加模块的填充。

• 顶部填充：80px
• 底部填充：80px
• 左填充：50px
• 右填充：50px

边界

然后，在边框设置中添加一些右上角和右下角的边框半径。

• 右上角：100px
• 右下角：100px

盒子阴影

为了创造更多的深度，我们将添加一个微妙的框阴影。

• 框阴影模糊强度：71px
• 框阴影扩散强度：-5px

动画片

最后但并非最不重要的一点是，为您的 CTA 模块添加动画效果。

• 动画方向：右
• 动画强度：100%
• 动画开始不透明度：100%
• 动画速度曲线：线性

创建 CTA #2

克隆 CTA #1 行并进行更改

克隆行

要创建第二个示例，请继续克隆第一行。

拖到分区

向下滚动页面并将副本放在此处：

删除部分顶部填充

打开您将行放入的部分的设置并删除顶部填充。

• 顶部填充：0px

移除部分左上边界半径

接下来转到边框设置并删除左上角边框半径。

删除 CTA 右上角边框半径

然后，打开 CTA 模块并移除右上角的 border-radius 以允许部分和模块混合。

更改动画

对于这个滑入式 CTA，我们将使用不同的动画。 也可以随意使用其他动画选项。

• 动画方向：中心
• 动画开始不透明度：100%
• 动画速度曲线：线性

创建 CTA #3

克隆 CTA #1 行并进行更改

克隆行

为了创建最后一个示例，我们将再次克隆该行。

拖到分区

将副本放在以下部分：

更改行对齐方式

打开模块的行设置，将对齐改为右对齐。

• 行对齐：右

删除 CTA 渐变背景

删除模块的渐变背景。

改用背景色

请改用背景颜色。

• 背景颜色：#f2835a

更改按钮文本颜色

要匹配背景颜色，请同时更改按钮文本颜色。

• 按钮文字颜色：#f2835a

删除 CTA 边框半径

我们通过移除给定的所有边界半径将 CTA 模块变成一个正方形。

更改动画

接下来更改动画设置。

• 动画方向：下
• 动画强度：100%
• 动画开始不透明度：100%
• 动画速度曲线：线性

删除部分底部填充

最后但并非最不重要的一点是，我们将通过移除模块所在部分的底部填充将模块推到该部分的底部，我们就完成了！

• 底部填充：0px

预览

让我们最后看看我们创建的三个滑入式 CTA 示例。

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的 Cleaning Company Layout Pack 创建滑入式 CTA。 我们首先删除了页面上已经存在的动画。 之后，我们创建了三个滑入式 CTA 以引起注意。 这篇博文是我们 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中放入一些东西。 如果您有任何问题或建议，请务必在下方评论区留言！