WordPress divi主题

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

by | May 17, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

抢先看

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

这是一个有两行文字的按钮……
divi按钮设计

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

这是一个使用创意角的按钮……
divi按钮设计

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

订阅我们的 Youtube 频道

#1 创建一个包含多行文本的按钮

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

WordPress divi主题

divi按钮设计

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

这是一个快速示例,说明如何将文本模块设置为具有多行文本的按钮。

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

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

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

divi按钮设计

我们可以向我们的模块添加很多不同的背景样式,但是对于这个例子,tet 添加了一个简单的渐变背景:

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

divi按钮设计

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

fiverr建站WordPress程序员

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

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

宽度:230 像素
自定义填充:顶部 1em,底部 0.5em,左侧 2em,右侧 2em

divi按钮设计

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

独立站选品工具

divi按钮设计

这是最终结果。

divi按钮设计

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

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

高质量外链购买

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

divi按钮设计

这是悬停时的样子。

divi按钮设计

#2 创建一个列表项按钮

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

JasperAI 10000字免费额度试用

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

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

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

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

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

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

WordPress备份工具updrafplus

有序列表字体:Exo 2
有序列表字体粗细:Light
有序列表文本颜色:#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
边框样式:实心

divi按钮设计

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

divi按钮设计

这是最终的设计。

divi按钮设计

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

#3 创建一个带有创意角的按钮(像一片叶子)

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

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

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

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

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

divi按钮设计

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

背景渐变左色:#7cda24
背景渐变右颜色:#26e051
渐变方向:90度

divi按钮设计

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

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

divi按钮设计

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

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

divi按钮设计

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

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

左上角:100px
右下角:100px

然后添加一个盒子阴影……

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

divi按钮设计

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

divi按钮设计

这是最终的设计。

divi按钮设计

对于悬停效果,您可以交替使用圆角值,以便在悬停时将按钮设计置于相反方向:

divi按钮设计

这是悬停效果的样子。

divi按钮设计

最后的想法

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

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

干杯!