如何为您的下一个 Divi 项目创建充满活力的部分标题

我们知道你们中的大多数人一直在寻找新的方法来使您创建的网站独一无二。 使用 Divi，有很多方法可以让您的网站从其他网站中脱颖而出。 今天，我们将向您展示如何仅使用 Divi 的内置选项创建令人惊叹的部分标题。 如果您想创建令人惊叹的设计、保持整体页面结构并保持导航无缝，这种方法非常有用。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们先看看我们的目标是在不同的屏幕尺寸上实现的结果：

让我们开始创作吧！

添加新的常规部分

间距

首先打开一个新页面，切换到 Visual Builder 并添加您的第一部分。 在不添加任何行或模块的情况下，打开部分设置并添加一些填充：

• 顶部填充：0px
• 底部填充：0px

添加新行

列结构

继续使用以下列结构添加一行：

背景颜色

接下来打开行设置并为整行添加背景颜色：

• 背景颜色：#f9f9f9

第 1 列渐变背景

然后，为您的第一列添加微妙的渐变背景。 这将有助于在列之间创建部分标题的重叠。

• 颜色 1：#0031c4
• 颜色 2：#00aeff
• 第 1 列梯度方向：125deg

浆纱

还要更改行的间距，以确保它占据屏幕的整个宽度。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是

间距

最后，根据不同的屏幕尺寸更改间距设置：

• 顶部填充：0px
• 底部填充：0px
• 第 2 列顶部填充：200px
• 第 2 列底部填充：200px
• 第 2 列左填充：350 像素（桌面）、50 像素（平板电脑和手机）
• 第 2 列右填充：50px

将章节标题文本模块添加到第 1 列

H2 文本设置

现在所有行设置都已就位，我们可以开始添加模块。 我们将从第一列开始。 在这里，我们唯一需要的模块是文本模块。 在内容框中添加 H2 内容后，继续更改 H2 文本设置：

• 标题 2 字体粗细：超粗体
• 标题 2 字体样式：大写
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#ffffff
• 标题 2 文字大小：150px
• 标题 2 行高：1.25em
• 标题 2 文字阴影垂直长度：-0.55em
• 标题 2 文本阴影颜色：rgba(0,255,255,0.25)

间距

在台式机、平板电脑和手机上，列之间的重叠是不同的。 为了创建重叠，我们将对文本模块的间距设置进行一些更改：

• 上边距：325px（桌面），150px（平板和手机）
• 下边距：325px、-120px（平板电脑）、-110px（手机）
• 右边距：-100%（桌面），0px（平板和手机）

筛选

最后但并非最不重要的一点是，我们将使用混合模式为显示的文本创建颜色差异。

• 混合模式：叠加

将标题文本模块添加到第 2 列

H3 文本设置

让我们继续第二列。 在那里，我们需要的第一个模块是标题文本模块。 添加 H3 内容后，更改 H3 文本设置：

• 标题 3 字体粗细：半粗体
• 标题 3 文本颜色：#00aeff
• 标题 3 文字大小：60px
• 标题 3 字母间距：-3px

间距

接下来通过添加底部边距来创建一些空间：

• 下边距：50px

将分隔模块添加到第 2 列

分隔线颜色

我们需要的第二个模块是分频器模块。 打开颜色设置并更改颜色以匹配设计的调色板：

• 分隔线颜色：#00ffff

浆纱

然后，修改大小设置：

• 高度：56px
• 宽度：75%

将描述文本模块添加到第 2 列

文字设置

继续使用以下文本设置添加描述文本模块：

• 文字大小：17px
• 文本行高：1.3em
• 文本方向：对齐

浆纱

接下来更改大小设置：

• 尺寸：70%（桌面），100%（平板和手机）

间距

还使用底部边距在此模块下方添加一些空间：

• 下边距：50px

将按钮模块添加到第 2 列

按钮设置

本专栏中我们需要的最后一个模块是按钮模块。 添加 CTA 后，更改按钮设置：

• 为按钮使用自定义样式：是
• 按钮文字大小：17px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#00aeff
• 按钮边框宽度：0px
• 按钮边框半径：100px
• 按钮字母间距：-1px
• 字体粗细：超粗
• 字体样式：大写

间距

为了给按钮一个更干净的外观和感觉，我们还将添加一些填充：

• 顶部填充：10px
• 底部填充：10px
• 左填充：30px
• 右填充：30px

盒子阴影

最后但并非最不重要的是，我们将使用一个微妙的框阴影为我们的部分添加一点深度：

• 框阴影模糊强度：54px
• 框阴影扩散强度：-8px
• 阴影颜色：rgba(0,0,0,0.3)

克隆部分

更改所有副本

要创建第二部分，我们只需克隆我们已经创建的部分，然后更改所有副本。

更改行背景颜色

对于这个新部分，我们将使用另一个调色板。 首先更改行的背景颜色。

• 背景颜色：#efefef

更改第 1 列渐变背景

然后，也选择另一个渐变背景。

• 颜色 1：#5f00a8
• 颜色 2：#9000ff

更改部分标题阴影颜色

我们也将文本阴影颜色与我们的新调色板相匹配：

• 标题 2 文本阴影颜色：rgba(255,0,255,0.24)

更改章节标题间距设置

根据您使用的副本的长度，您需要使用负的右边距。

• 右边距：-110%（桌面）

更改标题文本模块文本颜色

然后，更改第 2 列中标题文本模块的文本颜色。

• 标题 3 文本颜色：#9000ff

更改分隔线颜色

同样，使分隔线颜色与设计相匹配。

• 颜色：#ff00ff

更改按钮背景颜色

最后，您需要更改按钮模块的背景颜色。

• 按钮背景颜色：#9000ff

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的最终结果：

最后的想法

有很多方法可以让您的网页设计从其他网站中脱颖而出。 在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项创建令人惊叹的部分标题和一般部分。 我们将列渐变背景与文本模块重叠、文本阴影和混合模式相结合，以创建令人惊叹的最终结果。 如果您有任何问题或建议，请务必在下方评论区留言！