如何使用分区分隔线高度悬停效果显示 Divi 中的内容

分区分隔线仍然是流行的 Divi 设计元素。 有许多分隔线样式可供选择，其中包含有用的选项，可以轻松地向页面添加独特的过渡和背景。

在本教程中，我们将使用不同的部分分隔符。 Divi 允许您调整每个分隔线的高度和排列。 这允许我们将分隔线放置在部分内的某些区域或内容上方。 通过使用分隔高度的悬停选项，我们可以添加独特的悬停效果，显示部分隐藏的内容。 这对于将注意力吸引到您希望访问者单击的特定号召性用语或按钮非常有用。

让我们开始吧。

抢先看

免费下载部分分隔线高度悬停效果

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

下载文件

免费下载

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

下载

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

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

让我们进入教程好吗？

订阅我们的 YouTube 频道

你需要什么开始

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

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 在设计中使用的一些模拟图像。 我将使用来自 Juice Shop Layout Pack 的一些具有透明背景的图像。

之后，您就可以开始了！

在Divi中实现Section Divider高度悬停效果设计

创建部分和行

首先，让我们创建一个有两列行的常规部分。

在添加模块之前，打开部分设置并更新以下内容：

背景渐变左颜色：#73ba57
背景渐变右颜色：#2a4c23
宽度：80%
最大宽度：1080px
截面对齐：居中

添加章节标题

要添加该部分的标题，请创建一个文本模块并使用以下 h2 标题更新正文内容：

<h2>The Juice</h2>

然后更新设计如下：

标题 2 字体：Lato
标题 2 文字大小：80px
标题 2 字母间距：-5px
边距：-50px 顶部，-40px 底部
Z-索引：-1

自定义边距和 z 索引将允许文本位于我们将在下一步中添加的图像后面。

添加图像

在第 1 列标题中的文本模块下，添加一个图像模块。 然后上传具有透明背景的图像。 我使用的是 Juice Shop Layout Pack 中 240 像素 x 300 像素的图像。

将图像对齐调整为居中。

在第 2 列中添加号召性用语

在第 2 列中，添加号召性用语模块。

添加按钮链接 URL 以确保按钮显示。

设置 CTA 背景和标题文本的样式

然后更新以下设计设置：

背景颜色：#ffffff
文字颜色：深色
标题字体：Lato
标题字体粗细：重
标题字体样式：TT
标题文字大小：18px

为 CTA 按钮设计样式

更新按钮设计如下：

按钮文字颜色：#ffffff
按钮背景颜色：#73ba57
按钮边框宽度：0px

CTA 边框样式

然后添加一个边框来框住模块，如下所示：

边框宽度：10px
边框颜色：rgba(115,186,87,0.15)

添加分隔线高度悬停效果以显示号召性用语

现在是时候添加部分分隔线高度悬停效果以显示号召性用语。 为此，我们必须首先创建我们的部分分隔符。

添加顶部分隔线

使用以下设置打开部分设置和顶部分隔线。

顶部分隔线样式：见截图
顶部分隔线颜色：#73ba57
顶部分隔线高度：70%（默认），0%（悬停）
顶部分隔线翻转：水平

请注意，分隔线高度从默认高度 70% 开始，然后在悬停时更改为 0% 高度。

添加底部分隔线

接下来将类似的底部分隔线添加到具有以下设置的部分。

顶部分隔线样式：见截图
顶部分隔线颜色：#73ba57
顶部分隔线高度：70%（默认），0%（悬停）
顶部分隔线翻转：水平
分隔线安排：在部分内容的顶部

这个底部分隔线也从 70% 的高度开始，在悬停时变为 0%。 但是，由于分隔符排列选项设置在内容的顶部，因此分区分隔符隐藏了第 1 列中号召性用语的底部。然后在悬停时，会显示号召性用语的其余部分。

查看到目前为止的结果。

为独特的过渡和设计添加框阴影悬停效果

对于悬停时的独特过渡和设计，我们可以添加一个框阴影悬停效果，该效果将与分隔高度悬停效果同时发生。 为此，将以下框阴影添加到该部分。

盒子阴影：见截图
框阴影水平位置：0px
框阴影垂直位置：0px
框阴影传播强度：0px（默认），150px（悬停）
框阴影颜色：#73ba57

减慢过渡持续时间

最后一步，让我们稍微放慢过渡持续时间。

转换持续时间：700ms

最后结果

这是桌面上的最终结果。

如果您不想在平板电脑和手机显示屏上隐藏内容，您可以轻松地将这些设备的分隔线排列更改为“下方内容”。

这是平板电脑和手机上的最终设计。

在几秒钟内尝试其他分区分隔样式以获得完全独特的设计

有了这个设置，您可以轻松地尝试不同的分隔样式和组合！

以下是我在免费下载中包含的更多内容。

最后的想法

希望这篇文章能给你一些灵感，让你知道如何创建一些独特的分区分隔高度悬停效果来显示内容。 事实上，在悬停时调整分隔线高度本身就是一个很好的设计元素。 而且，设计示例应该可以帮助您快速开始自己的探索和设计。

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

干杯!