使用文本模块创建独特的 Divi 按钮设计

使用文本模块创建独特的 Divi 按钮设计可能已经让您想到了。 如果是这样，你比你知道的更有创意！ 随着 Divi 中悬停选项的发布，所有模块都可以点击。 这为将任何模块（及其所有内置设计设置）用作可点击的 CTA 或按钮打开了大门。 例如，文本模块允许您以不同格式向模块添加任意数量的文本。 此外，文本模块还有一些强大的设计选项，用于自定义圆角以创建独特的形状。

在本教程中，我将探索一些可以使用文本模块实现的独特 Divi 按钮设计。

让我们开始吧！

抢先看

以下是我们将使用文本模块轻松创建的一些示例按钮设计。

这是一个带有两行文字的按钮……

这是一个使用列表项的按钮……

这是一个使用创意角的按钮......

使用文本模块创建独特的 Divi 按钮设计

订阅我们的 YouTube 频道

#1 创建带有多行文本的按钮

如前所述，文本模块允许无限量的文本，因此使用多种格式的文本模块可以轻松创建仅包含两行文本的按钮。 使用所见即所得或文本编辑器，您可以添加段落文本、标题、链接、列表和块引用。 文本模块最好的部分是，您可以使用内置于可视化构建器设计设置中的选项卡 UI 分别定位和设置每种文本格式的样式。

这使得添加多行文本变得非常容易，然后单独设置每行文本的样式以获得独特的按钮布局。

以下是如何将文本模块设置为具有多行文本的按钮的快速示例。

如果您还没有，请创建一个新页面并部署可视化构建器。 选择“从头开始构建”选项。 然后创建一个新部分的一列行。 然后向该行添加一个文本模块。

对于文本内容，使用 html 选项卡并输入以下内容：

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

我们可以添加很多不同的背景样式到我们的模块中，但是对于这个例子，tet 添加一个简单的渐变背景：

背景渐变左颜色：#FEE140
背景渐变右颜色：#FA709A

然后转到设计选项卡并使用标题选项卡 UI 设置 h3 和 h4 标题标签的样式，如下所示：

标题 3 字体粗细：超粗体
标题 3 字体样式：TT
标题 3 文本颜色：#ffffff
标题 4 字体样式：TT
标题 4 文本颜色：#ffffff
标题 4 文字大小：16px

现在我们需要做的就是调整文本模块的大小，使其看起来更像一个按钮。 为此，请更新以下内容：

宽度：230px
自定义填充：顶部 1em，底部 0.5em，左侧 2em，右侧 2em

自发布 Divi 的新悬停选项以来，所有模块都可以像按钮一样变得可点击。 为此，请返回内容选项卡并输入模块链接 URL。

这是最终结果。

作为悬停效果，您可以添加一个横扫按钮的框阴影，最终应用新的背景颜色来替换渐变。

为此，请打开文本模块设置并更新以下内容：

盒子阴影：见截图
框阴影水平位置：0px（默认），230px（悬停）
框阴影垂直位置：0px
阴影颜色：rgba(0,0,0,0)（默认），#fee140（悬停）

这是悬停时的样子。

#2 创建一个列表项按钮

因为文本模块允许您向内容添加列表（无序或有序），所以您可以利用此功能来创建列表按钮。 基本上，您需要做的就是在内容框中创建一个包含一个列表元素的列表。 然后将您的列表项包装在标题标签中，以便您可以分别设置列表项目符号和标题文本的样式。

如果您还没有，请创建一个新页面并部署可视化构建器。 选择“从头开始构建”选项。 然后创建一个新部分的一列行。 然后向该行添加一个文本模块。

然后在内容设置的文本选项卡中添加以下 html：

<ol><li><h3>Contact Us</h3></li></ol>

将列表项文本包装在标题标签中很重要，以便我们可以将列表项项目符号/编号与文本分开设置。

现在跳转到设计选项卡并完成将文本模块设计为按钮：

在文本设置类别下，选择有序列表选项卡并更新以下内容：

有序列表字体：Exo 2
有序列表字体重量：轻
有序列表文本颜色：#000000
有序列表文本大小：20px
有序列表字母间距：5px
有序列表样式类型：十进制前导零
有序列表样式位置：外部
有序列表项缩进：2em

在标题文本类别下，单击 H3 选项卡并更新以下内容：

标题 3 字体：Exo 2
标题 3 字体粗细：半粗体
标题 3 字体样式：TT
标题 3 文本颜色：#0c71c3
标题 3 文字大小：26px
标题 3 行高：0.3em

接下来，更改模块的宽度并为其设置边框和间距，使其看起来像一个按钮：

宽度（模块）：262px
模块对齐：居中
自定义填充：顶部 2em，底部 0px，左侧 2em，右侧 2em
圆角：10px2em
边框宽度：1px
边框颜色：#000000
边框样式：纯色

并且不要忘记将指向您的模块的链接添加到您选择的指定 URL。

这是最终的设计。

随意探索新的列表样式类型（如 Upper Roman）以获得独特的列表按钮设计。

#3 创建一个带有创意角的按钮（如一片叶子）

对于下一个设计，我们将利用文本模块中的圆角设计设置。 基本思想是设置不同的角半径值来创建形状独特的按钮。 在这个例子中，我将把我们的模块塑造成一个叶子按钮。

如果您还没有，请创建一个新页面并部署可视化构建器。 选择“从头开始构建”选项。 然后创建一个新部分的一列行。 然后向该行添加一个文本模块。

打开文本模块设置，在内容框的文本选项卡中输入以下html：

<h3>grow</h3>
<h4>with us</h4>

这允许我们将按钮文本放在两行上（减少垂直宽度）并独立设置它们的样式。

接下来添加具有更“叶状”颜色的渐变背景。

背景渐变左颜色：#7cda24
背景渐变正确颜色：#26e051
渐变方向：90度

现在让我们跳到设计设置以将我们的文本居中并设置标题标签的样式。 您需要选择 h3 选项卡来设计 h3 标题并选择 h4 选项卡来设计 h4 标题：

文字方向：居中
标题 3 字体：Oswald
标题 3 字体粗细：轻
标题 3 字体样式：TT
标题 3 文本颜色：#ffffff
标题 3 文字大小：27px
标题 4 字体：Oswald
标题 4 字体样式：TT
标题 4 文本颜色：#ffffff

继续更新设计，为您的文本模块提供适当的按钮宽度和间距。

宽度：178px
模块对齐：居中
自定义填充：顶部 2em，底部 2em，左侧 1em，右侧 1em

最后，我们可以添加我们自定义的圆角给模块一个叶子形状，然后添加一个框阴影使叶子更生动。 为此，请更新以下内容：

首先解锁圆角选项，以便您可以为每个角分配单独的值。

左上角：100px
右下角：100px

然后添加一个框阴影...

盒子阴影：见截图
框阴影水平位置：25px
框阴影垂直位置：-4px
框阴影扩散强度：-12px
阴影颜色：rgba(0,0,0,0.25)

不要忘记添加您的模块链接 URL，以便您的模块链接到所需的位置。

这是最终的设计。

对于悬停效果，您可以交替使用圆角值以将按钮设计置于悬停时的相反方向：

这是悬停效果的样子。

最后的想法

在使用 Divi 设计网站时，偶尔跳出框框思考总是很好的。 希望本教程能很好地帮助思考使用文本模块的新的和有创意的 divi 按钮设计。 事实上，我建议探索其他模块（如 Blurb 模块）以获得更多设计选项。

我期待在评论中收到您的来信。

干杯!