创建一个“入门”号召性用语，显示悬停时的多个选项

已发表: 2019-06-26

许多公司会在主页上包含“入门”CTA。它通常是页面上的主要号召性用语，因为它将引导用户完成某种预期的过程。它可以是一个简单的“立即开始”按钮，链接到另一个页面。或者它可以是页面的一部分，其中包括“入门”说明和/或用户可以采取的不同选项来启动公司预期的流程。

在本教程中，我们将向您展示如何创建一个“入门”CTA，它将在悬停时显示多个“入门”选项。使用 Divi，我们将设计一个显示为大按钮的部分。然后，当鼠标悬停在按钮上时，选项会像垂直滑块显示下一张幻灯片一样出现。

设计优雅，功能在很多方面都很有用。

让我们开始吧。

抢先看

这是我们将在本教程中构建的“入门”CTA 的快速浏览。

在 divi 中开始 cta

免费下载“入门”CTA Divi 布局

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

下载文件

免费下载

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

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

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要具备以下条件：

已安装并激活 Divi 主题
在前端从头开始构建的新页面（可视化构建器）
用于模拟内容的图像

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

在 Divi 中实现“从这里开始”CTA 设计

此设计背后的基本思想是将鼠标悬停在该部分上时向上移动该部分的内容。为此，我们需要确保我们的部分具有固定的高度并隐藏溢出。这将在悬停状态之前隐藏 CTA 选项。然后我们可以使用边距来定位我们的模块和顶部填充以在悬停时将内容移动到视图中。

让我们从部分开始。

创建部分

首先，创建一个带有一列行的常规部分。然后在我们添加任何模块之前，让我们更新部分设置。

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

背景颜色：#2b87da
宽度：90%
最大宽度：1100px
截面对齐：居中
边距：6vw 顶部，6vw 底部（只是给它一点呼吸的空间）
填充（桌面）：顶部 300 像素，底部 0 像素
填充（平板电脑）：顶部 0px，底部 15%

在 divi 中开始 cta

然后添加一些圆角。每当我们为该部分提供最大高度时，这将创建我们的按钮式设计。

圆角：140px（桌面）、20px（悬停）、10px（平板）

然后给它一个盒子阴影（见截图）。

在 divi 中开始 cta

此时我们不会添加最终设计所需的所有设置。我们需要回来给它一个固定的高度和悬停效果。但是现在让我们添加内容。

创建第一行内容

打开您创建的一列行的设置并更新以下内容：

宽度：100%
填充：顶部 0px，底部 0px，左 5%，右 5%

在 divi 中开始 cta

在一列行内，添加一个文本模块。

在 divi 中开始 cta

然后将以下 h2 标题添加到正文内容中。

<h2>Get Started Here...</h2>

在 divi 中开始 cta

更新设计设置如下：

标题 2 字体：Nunito
标题 2 字体粗细：粗体
标题 2 文本颜色：#ffffff
标题 2 文字大小：78px（桌面和平板电脑），46px（手机）
最大宽度：500px
高度：300px（桌面），自动（平板电脑和手机）
边距：-300px 顶部（桌面），0px 顶部（平板电脑和手机）
填充物：7% 顶部