使用 Divi 以令人惊叹的设计优雅地将您的副本隐藏在分区分隔线下方

Divi 的内置选项允许您将一种特定的设计设置用于多种用途，从而有助于激发创造力。 今天，我们将以一种独特的方式使用分区分隔符来优雅地隐藏您网站的副本。 这是在不需要自定义代码的情况下向页面添加额外交互的好方法。 我们将从头开始重新创建一个漂亮的示例，您也可以免费下载示例的 JSON 文件。

让我们开始吧！

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

让我们开始重建吧！

添加第 1 节

您需要做的第一件事是向您正在处理的页面添加一个新的常规部分。

添加新行

列结构

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

将文本模块添加到列

添加 H2 内容

我们在这一行中需要的第一个模块是带有一些 H2 内容的文本模块。

H2 文本设置

转到设计选项卡并更改 H2 文本设置。

• 标题 2 字体：Playfair Display
• 标题 2 字体粗细：常规
• 标题 2 文本对齐：居中
• 标题 2 文字大小：70 像素（桌面）、40 像素（平板电脑）、30 像素（手机）

将分隔模块添加到列

能见度

我们在这一行中需要的第二个也是最后一个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

我们还更改了设计选项卡中的线条颜色。

• 线条颜色：#000000

浆纱

继续调整大小设置并应用以下设置：

• 分隔线重量：5px
• 宽度：27%
• 模块对齐：居中

添加第 2 节

背景颜色

将第二个常规部分添加到您的页面，打开部分设置并更改背景颜色。

• 背景颜色：#f7f7f7

溢出

确保在高级选项卡中也隐藏了部分溢出。 这将确保没有超出部分容器的内容。

• 水平溢出：隐藏
• 垂直溢出：隐藏

过渡

在这篇文章的后面，我们将创建一个悬停过渡。 为确保此操作顺利进行，我们将在高级选项卡中增加过渡持续时间。

• 转换持续时间：800ms

添加新行

列结构

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

浆纱

在不添加任何模块的情况下，打开行设置并通过应用以下设置允许行占据部分容器的整个宽度：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

将文本模块 #1 添加到列

添加H3内容

是时候开始添加模块了，从文本模块开始。 输入您选择的一些 H3 内容。

H3 文本设置

转到设计选项卡并更改 H3 文本设置。

• 标题 3 字体：Playfair Display
• 标题 3 文本对齐：居中
• 标题 3 文本颜色：#000000
• 标题 3 文字大小：3vw（桌面）、6vw（平板电脑）、7vw（手机）

将分隔模块添加到列

能见度

我们在这一行中需要的第二个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

还要更改分隔线的颜色。

• 线条颜色：#000000

间距

并添加一些自定义的顶部和底部边距以创建空间。

• 最高利润率：2vw
• 底边距：2vw

将文本模块添加到列

添加内容

我们需要的下一个模块是另一个文本模块。 添加一些您选择的段落内容。

文字设置

移至设计选项卡并更改文本设置。

• 文字字体：Open Sans
• 文本对齐：居中
• 文字颜色：#777777
• 文字大小：0.8vw（桌面）、1.7vw（平板电脑）、2.2vw（手机）
• 文本行高：1.8em

间距

接下来添加一些自定义边距值。

• 左边距：3vw（桌面）、7vw（平板电脑）、10vw（手机）
• 右边距：3vw（桌面），7vw（平板电脑和手机）

将按钮模块添加到列

添加副本

我们在这一行中需要的下一个也是最后一个模块是按钮模块。 输入您选择的一些副本。

结盟

在设计选项卡中更改按钮对齐方式。

• 按钮对齐：居中

按钮设置

继续设置按钮设置的样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 按钮文字颜色：#000000
• 按钮边框宽度：1px
• 按钮边框半径：0px
• 按钮字体：Playfair Display

间距

并添加一些自定义间距值。

• 最高利润率：2vw
• 顶部填充：1vw
• 底部填充：1vw
• 左填充：3vw（桌面）、6vw（平板电脑）、8vw（手机）
• 右填充：3vw（桌面）、6vw（平板电脑）、8vw（手机）

附加部分设置

默认顶部分隔线

完成将所有模块添加到该部分后，是时候进行一些其他部分设置了。 打开部分设置，转到设计选项卡并添加以下顶部分隔线：

• 分隔线样式：在列表中查找
• 分隔线颜色：#e8e8e8
• 分隔线高度：7000px
• 分隔线翻转：垂直
• 分隔线安排：在部分内容的顶部

悬停顶部分隔线

在悬停时更改分隔线高度。

• 分隔线高度：0px

底部分隔线

还要添加一个底部分隔线。

• 分隔线样式：在列表中查找
• 分隔线颜色：#5c26ff
• 分隔线高度：600px
• 分隔线安排：在部分内容的顶部

悬停底部分隔线

并在悬停时移除分隔线高度。

• 分隔线高度：0px

间距

正如您在这篇文章的预览中所注意到的，我们将这一部分转了一圈。 为此，我们首先需要在不同的屏幕尺寸上添加一些自定义边距和填充值：

• 左边距：10vw（桌面）、11vw（平板电脑）、0vw（手机）
• 右边距：47vw（桌面）、11vw（平板电脑）、0vw（手机）
• 顶部填充：8vw（桌面）、15vw（平板电脑）、16vw（手机）
• 底部填充：8vw（桌面）、15vw（平板电脑）、16vw（手机）

边界

继续在每个角上添加“50vw”，将截面变成圆形。 我们还使用以下设置添加边框：

• 边框宽度：1px
• 边框颜色：rgba(255,255,255,0)

悬停边框

更改悬停时的边框颜色。

• 边框颜色：#000000

克隆部分两次

完成所有部分设置后，您可以继续克隆该部分两次。

修改重复 #1

更改顶部分隔线颜色

我们将修改两个部分的副本，从第一个开始。 打开部分设置并更改顶部分隔线颜色。

• 分隔线颜色：#5c26ff

更改底部分隔线颜色

还要修改底部分隔线颜色。

• 分隔线颜色：#ff3a5e

更改间距

然后，转到间距设置并确保以下值适用：

• 上边距：-20vw（台式机），0vw（平板电脑和手机）
• 左边距：47vw（桌面）、11vw（平板电脑）、0vw（手机）
• 右边距：10vw（桌面）、11vw（平板电脑）、0vw（手机）

修改重复 #2

更改顶部分隔线颜色

打开第二个副本的设置并更改顶部分隔线颜色。

• 分隔线颜色：#ff3a5e

更改底部分隔线颜色

还要更改底部分隔线颜色。

• 分隔线颜色：#e8e8e8

更改间距

并在这里修改间距值。

• 上边距：-20vw（台式机），0vw（平板电脑和手机）
• 底边距：7vw
• 左边距：10vw（桌面）、11vw（平板电脑）、0vw（手机）
• 右边距：47vw（桌面）、11vw（平板电脑）、0vw（手机）

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何优雅地将您的副本隐藏在分区分隔线下方。 这是一种以不同于您习惯的方式使用某些 Divi 直观内置选项的好方法。 我们希望本教程也能激发您使用此技术创建自己的替代设计。 如果您有任何问题或建议，请务必在下方评论区留言！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。