许多公司会在主页上包含“入门”CTA。 它通常是页面上的主要行动号召，因为它将引导用户完成某种预期的过程。 它可以是一个简单的“立即开始”按钮，链接到另一个页面。 或者它可以是页面的一部分，其中包括“入门”说明和/或用户可以采取的不同选项来启动公司预期的流程。
在本教程中，我们将向您展示如何创建一个“开始使用”CTA，它会在悬停时显示多个“开始使用”选项。 使用 Divi，我们将设计一个显示为大按钮的部分。 然后，当将鼠标悬停在按钮上时，选项将看起来很像垂直滑块会显示下一张幻灯片。
设计优雅，功能可以在许多方面有用。
让我们开始吧。
抢先看
下面是我们将在本教程中构建的“入门”CTA 的快速浏览。
免费下载“入门”CTA Divi 布局
要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。
让我们来看看教程好吗？
你需要什么开始
要开始，您需要具备以下条件：
- Divi 主题已安装并处于活动状态
- 在前端从头开始构建的新页面（可视化构建器）
- 用于模拟内容的图像
之后，您将有一个空白画布开始在 Divi 中进行设计。
在 Divi 中实施“从这里开始”CTA 设计
此设计背后的基本思想是在将鼠标悬停在该部分上时向上移动该部分的内容。 为此，我们需要确保我们的部分有一个固定的高度，并且隐藏了溢出。 这将在悬停状态之前隐藏 CTA 选项。 然后我们可以使用 margin 来定位我们的模块和 top padding 在悬停时将内容移动到视图中。
让我们从部分开始。
创建截面
首先，创建一个具有单列行的常规部分。 然后在我们添加任何模块之前，让我们更新部分设置。
打开部分设置并更新以下内容：
背景颜色：#2b87da
宽度：90%
最大宽度：1100px
截面对齐：居中
边距：6vw 顶部，6vw 底部（只是给它一点呼吸的空间）
内边距（桌面）：顶部 300 像素，底部 0 像素
内边距（平板电脑）：顶部 0px，底部 15%
然后添加一些圆角。 每当我们给该部分一个最大高度时，这将创建我们的类似按钮的设计。
圆角：140px（桌面）、20px（悬停）、10px（平板电脑）
然后给它一个盒子阴影（见截图）。
此时我们不会添加最终设计所需的所有设置。 我们需要回来给它一个固定的高度和悬停效果。 但是现在让我们添加内容。
创建第一行内容
打开您创建的一列行的设置并更新以下内容：
宽度：100%
内边距：顶部 0px，底部 0px，左侧 5%，右侧 5%
在一列行内，添加一个文本模块。
然后将以下 h2 标题添加到正文内容中。
<h2>Get Started Here...</h2>
更新设计设置如下：
标题 2 字体：Nunito
标题 2 字体粗细：粗体
标题 2 文本颜色：#ffffff
标题 2 文字大小：78px（台式机和平板电脑），46px（手机）
最大宽度：500px
高度：300px（桌面），自动（平板电脑和手机）
边距：-300px 顶部（桌面），0px 顶部（平板电脑和手机）
填充：顶部 7%
300px 的高度和 -300px 的顶部边距使文本模块向上填充该部分的 300px 顶部填充。 稍后，每当我们在悬停时移除顶部填充时，文本模块都会在该部分上方向上滚动。
创建第二行内容
第二行内容是我们将添加 CTA 选项的地方。 继续并添加一个具有三列布局的新行。
然后按如下方式更新行设置：
宽度：100%
最大宽度：100%
内边距：0px 顶部，0px 底部
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
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店铺优化服务
然后在第 1 列中添加一个简介模块。
然后更新简介设置如下：
取出默认正文并保留标题。
然后添加一个图像图标 (90 X 90)。 或者，您可以根据需要使用常规的 Divi 图标。
添加背景并更新标题文本的设计。
背景颜色：#ffffff
标题字体：Nunito
标题字体粗细：超粗体
标题字体样式：TT
标题文本对齐方式：居中
标题文字颜色：#2b87da
标题文字大小：14px
在我们可以使宣传片变成圆形之前，首先我们需要给宣传片一个相等的高度和宽度。 然后我们可以使用间距来对齐中心的blurb和blurb内容。
内容宽度：200px（桌面），250px（平板）
宽度：250px（桌面），300px（平板）
模块对齐：中心
高度：250px（台式机），300px（平板电脑）
边距：顶部 25px，底部 0px
内边距：50px 顶部（桌面），75px 顶部（平板电脑和手机）
要完成圆形设计，请给简介一个圆角和一个盒子阴影。
圆角：50%
盒子阴影：见截图
这照顾了我们的第一个简介。 创建接下来的两个。 复制简介并将其粘贴到第 2 列和第 3 列。然后更新每个的图像图标。 它应该如下所示：
最后润色部分
要完成“入门”CTA 设计，我们需要进一步更新该部分。 更新以下部分设置：
高度：300px（桌面），自动（平板电脑和手机）
水平溢出：隐藏
垂直溢出：隐藏
这将使该部分与第 1 行和第 2 行中的内容保持相同的高度。隐藏溢出将使第 2 行中的内容保持隐藏，直到我们在悬停时将其显示出来。
要将第 2 行的内容显示出来，我们需要在悬停时取出该部分的顶部填充。
填充（悬停）：0px 顶部
现在看看到目前为止的结果。 内容将向上滚动以显示第 2 行中的内容，其中显示了三个 CTA 选项。
为了使该部分看起来更像一个按钮，我们可以使用转换选项将其缩小，然后在悬停时将其恢复为正常大小。 更新该部分的以下转换选项。
变换比例（桌面）：70%
变换比例（悬停）：100%
变形比例（平板电脑）：100%
现在添加一个背景图像图形 (500 X 500) 以占据该部分的正确大小。
背景图片：插入图片
背景图片尺寸：实际尺寸
背景图像位置：右中（桌面）、右上（平板电脑）、左上（手机）
将链接 URL 添加到 Blurbs 并在悬停时缩放它们
由于我们的简介实际上是用作圆形按钮，因此我们需要为每个简介添加模块链接 URL。 您当然需要添加自己的以满足您的需求。
由于简介隐藏在可视化构建器中，因此切换线框视图模式并使用模块链接 URL 更新每个简介设置。
然后保持线框视图模式并使用多选来选择所有三个简介。 并打开其中一个简介的设置以更新所有三个的元素设置。 然后更新转换选项如下：
变换比例（悬停）：105%
就是这样！
最终结果
让我们看看“Get Started”CTA 的最终设计。
这是平板电脑和手机上的设计。
最后的想法
“Get Started” CTA 在当今的网络上很常见。 希望本教程能帮助您更上一层楼。 而且，不要害怕考虑使用此功能的其他方法。 想想看。 您可以将任何您想要的内容添加到该部分！
请随时在下面的评论中分享您的想法。
我期待着您的回音。
干杯!
