每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于您的下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将您的网站提升到一个新的水平。 本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Clean Company Layout Pack 使用 Divi 的行对齐和动画设置创建滑入式 CTA。
为了帮助实现这一点，我们将从删除所有已经存在的动画开始。 这样，我们可以突出显示滑入的号召性用语。
让我们开始吧！
预览
让我们看一下我们将在这篇文章中处理的三个不同示例：
上传清洁公司登陆页面
添加新页面并切换到 Visual Builder
如前所述，我们将使用清洁公司布局包来创建本教程，但您可以随意将这种方法用于您正在构建的任何网站。 添加一个新页面，输入您的页面标题并立即切换到 Visual Builder。
上传清洁公司登陆页面
完成后，您会在屏幕上看到三个选项。 您可以从头开始构建、选择预制布局或克隆现有页面。 选择第二个选项。
搜索清洁公司布局包，选择登录页面布局并将其上传到您的页面。
删除页面上的所有动画设置
在页面上定位部分
将布局上传到您的页面后，继续并找到以下部分。
删除动画
打开其设置并删除已经存在的动画。
将样式扩展到所有部分
为了节省时间，我们将把这种动画风格扩展到页面上的所有设计元素。 我们将从页面上的部分开始，右键单击，选择“扩展动画样式”。 使其适用于整个页面的所有部分，然后单击“扩展”。
将样式扩展到所有行
重复相同的步骤，但改为将其应用于整个页面的所有行。
将样式扩展到所有模块
最后，使其也适用于页面上的所有模块。
创建 CTA #1
添加新行
地点
让我们开始创建第一个滑入式 CTA！ 在以下部分的底部添加一个新行：
立柱结构
为您刚刚添加的行选择以下列结构：
行对齐
我们要将行向左推以帮助创建滑入效果。
浆纱
我们还将减小行的宽度。
- 使用自定义宽度：是
- 自定义宽度：500px
间距
并摆脱不必要的空白，删除行的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加号召性用语模块
添加副本
我们现在可以添加我们的号召性用语模块！ 添加一些选择的内容。
添加链接
接下来添加指向您的 CTA 模块的链接。 如果您还没有重定向到的链接，您只需输入“#”即可。 如果不向此框中添加任何内容，您将无法看到该按钮，因此请确保不要将其留空。
删除背景颜色
CTA 模块默认具有背景颜色。 继续并在后台设置中将其删除。
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
复制截面渐变
打开包含蓝色渐变背景的部分。 在不更改任何内容的情况下，右键单击并复制设置。
在 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 行并进行更改
克隆行
要创建第二个示例，请继续克隆第一行。
拖动到部分
向下滚动页面并将副本放在这里：
删除部分顶部填充
打开您已将行放入的部分的设置并删除顶部填充。
删除部分左上边框半径
接下来转到边框设置并删除左上角的边框半径。
删除 CTA 右上角边框半径
然后，打开 CTA 模块并移除右上角的边框半径以允许部分和模块混合。
更改动画
对于这个滑入式 CTA，我们将使用不同的动画。 也可以随意使用其他动画选项。
- 动画方向：中心
- 动画开始不透明度：100%
- 动画速度曲线：线性
创建 CTA #3
克隆 CTA #1 行并进行更改
克隆行
为了创建最后一个示例，我们将再次克隆该行。
拖动到部分
将副本放在以下部分：
更改行对齐
打开模块的行设置并将对齐方式更改为右。
删除 CTA 渐变背景
移除模块的渐变背景。
改用背景颜色
请改用背景颜色。
- 背景颜色：#f2835a
更改按钮文本颜色
要匹配背景颜色，请同时更改按钮文本颜色。
- 按钮文本颜色：#f2835a
删除 CTA 边界半径
我们通过移除所有给定的边界半径，将 CTA 模块变成一个正方形。
更改动画
接下来更改动画设置。
- 动画方向：下
- 动画强度：100%
- 动画开始不透明度：100%
- 动画速度曲线：线性
删除部分底部填充
最后但并非最不重要的一点是，我们将通过删除它所在部分的底部填充将模块推到该部分的底部，我们就完成了！
预览
让我们最后看一下我们创建的滑入式 CTA 的三个示例。
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的清洁公司布局包创建滑入式 CTA。 我们从删除页面上已经存在的动画开始。 之后，我们创建了三个滑入式 CTA 来吸引注意力。 这篇博文是我们 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些东西。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
