如何使用 Divi 的新尺寸和溢出设置创建悬停部分

使用 Divi 新的可拖动大小选项不仅可以帮助您创建高度响应的网站，而且还可以真正帮助创建独特的交互。 通过使用这些选项，您可以自定义您正在创建的任何网站并自定义您的页面结构以满足当前的设计趋势。

在本教程中，具体而言，我们将向您展示如何使用 Divi 创建悬停部分。 我们将创建一个新页面并允许显示所有部分标题，但每个部分只会在悬停（桌面）或点击（移动）时打开。 一旦您打开另一部分，您之前打开的部分将自动关闭。 我们将从解释一般方法开始，然后从头开始重新创建您可以在下面看到的示例。 我们希望本教程也能鼓励您创建自己的悬停部分设计！

让我们开始吧！

预览

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

桌面

移动的

免费下载悬停部分布局

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

下载文件

免费下载

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

下载

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

方法

在我们深入实际教程之前，我们将介绍用于创建悬停部分的技术。 您可以将此技术应用于您正在构建的任何类型的网站，具有任何类型的设计风格。

1. 将第一部分添加到您的页面

假设您要在全新的页面上开始新设计。 您需要做的第一件事是向其中添加一个新的常规部分。

2. 添加包含章节标题的新行

然后，您可以继续添加一个包含您的部分标题的文本模块的新行。 您还可以添加分隔模块和指示行在悬停或触摸时扩展的内容（请参阅本文预览中的示例）。 将部分标题与部分内容的其余部分分开很重要，因此请确保在部分标题和接下来的内容之间留出足够的空白。

3. 微调其余部分内容（根据需要添加尽可能多的行和模块）

部分标题后面的设计元素完全取决于您。 您可以根据需要使该部分长或短，并使用任何类型的设计风格。

4.修改section的默认和hover max高度

完成对该部分及其中所有设计元素的微调后，就可以创建悬停效果了。 部分的默认高度仅适用于部分标题。 悬停时，该部分将恢复其初始大小。

5.隐藏垂直溢出

该技术的另一个重要部分是隐藏垂直溢出。 一旦您为您的部分设置了一个小于该部分初始高度的默认最大高度，就会创建一个溢出。 为了确保不显示溢出，您必须确保它隐藏在该部分的可见性设置中。

5. 对页面上的所有部分重复步骤

对页面上的所有部分重复相同的步骤，以创建访问者会喜欢的明显用户体验。

订阅我们的 YouTube 频道

让我们开始重建吧！

添加新部分

默认背景颜色

现在我们已经完成了这篇文章的方法，是时候开始付诸行动了！ 将第一个常规部分添加到 WordPress 网站上的全新页面，然后打开部分设置。 将部分的默认背景颜色更改为您选择的颜色。

• 背景颜色：#000000

悬停背景颜色

在悬停时更改此背景颜色。

• 背景颜色：#ffffff

添加第 1 行

列结构

继续使用以下列结构将第一行添加到您的部分：

添加文本模块

添加 H2 内容

接下来将文本模块添加到新行。 添加一些 H2 副本以及“▼”符号，表示接下来会发生一些事情。

H2 文本设置

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

• 标题 2 字体：Trebuchet
• 标题 2 字体粗细：超粗体
• 标题 2 文本对齐方式：左
• 标题 2 文本颜色：#ff0f3b
• 标题 2 文字大小：100 像素（桌面）、80 像素（平板电脑）、60 像素（手机）
• 标题 2 字母间距：-5px

添加分频器模块

能见度

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

• 显示分隔线：是

颜色

然后，转到设计选项卡并更改分隔线颜色。

• 颜色：#ff0f3b

浆纱

还要修改模块的大小设置。

• 分隔线重量：2px
• 宽度：14%

添加第 2 行

列结构

进入下一行！ 这是您需要在悬停（桌面）或单击（平板电脑和移动设备）后放置要显示的所有内容的地方。 我们使用以下列结构，但请注意，您可以根据需要添加任意数量的行和模块，并根据需要设置它们的样式：

将文本模块添加到第 1 列

添加内容

在第一列中放置一个文本模块，其中包含您选择的一些内容。

文字设置

转到文本模块的设计选项卡并更改文本方向。

• 文本方向：对齐

将文本模块添加到第 2 列

添加内容

将文本模块添加到第二列以及您选择的一些内容。

文字设置

同样，在模块的文本设置中更改文本方向。

• 文本方向：对齐

将大小设置添加到部分

默认大小

一旦你完成了你的部分，是时候使悬停效果发生了。 打开部分设置并更改不同屏幕尺寸的最大高度：

• 最大高度：300 像素（桌面）、280 像素（平板电脑）、260 像素（手机）

悬停大小调整

在最大高度上启用悬停选项，并添加一个足够高的值以覆盖不同屏幕尺寸的所有元素。 此值可确保您的所有元素都显示在不超过部分容器的初始大小的情况下。

• 最大高度：5000px

垂直溢出

然后，转到该部分的高级选项卡并更改垂直溢出。 这将隐藏超出部分容器的所有内容。

• 垂直溢出：隐藏

过渡

为了创建平滑过渡，我们还更改了高级选项卡中的过渡设置。

• 转换持续时间：800ms
• 转换延迟：500ms

根据需要多次克隆整个部分

完成第一个悬停部分的创建后，您可以根据需要多次克隆它。

更改章节标题

当然，您需要更改重复项的部分标题。

更改 H2 文本颜色

为了在设计中创造一些变化，我们还将更改下面打印屏幕中突出显示的模块的文本颜色。

• 标题 2 文本颜色：#c4c4c4

更改分隔线颜色

以及伴随文本模块的分隔线颜色。

• 颜色：#c4c4c4

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何创造性地使用 Divi 的新可拖动大小选项，在您创建的任何网站上使用悬停部分创建独特的交互。 我们首先解释了该方法，然后继续从头开始重新创建设计示例。 您还可以免费下载 JSON 文件！ 如果您有任何问题或建议，请务必在下面的评论部分留言。

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