如何使用 Divi 在悬停选项卡中展示功能

您是否正在寻找新的和创造性的方式来在您的网页上展示功能和/或产品？ 如果是这样，请继续阅读，因为在这篇文章中，我们将向您展示如何仅使用 Divi 的内置选项在悬停选项卡中显示功能。 您使用这种方法的可能性是无穷无尽的，它们肯定会让您更深入地了解 Divi。 选项卡悬停效果只会发生在对悬停友好的桌面环境中。 当从较小的屏幕尺寸查看悬停选项卡时，功能将以其原始形式列出。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们先看看不同屏幕尺寸的结果。

桌面

移动的

让我们开始创作吧！

订阅我们的 YouTube 频道

添加新部分

渐变背景

添加新页面或打开现有页面并添加新部分。 打开部分设置并为该部分添加渐变背景。 我们将使用渐变背景来覆盖悬停选项卡的左侧部分，您可以在上面的打印屏幕中看到。

• 颜色 1：#f2f2f2
• 颜色 2：#ffffff
• 梯度方向：87度
• 起始位置：20%
• 结束位置：20%

间距

然后，通过向两个选项添加“0px”来删除该部分的自定义顶部和底部填充。

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

添加新行

列结构

继续使用以下列结构向该部分添加新行：

背景颜色

在不添加任何模块的情况下，打开行设置并更改背景颜色。

• 背景颜色：#ffffff

行对齐

还要修改行对齐方式。

• 行对齐方式：左

默认大小

并更改大小设置。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：400px
• 使用自定义装订线宽度：是
• 天沟宽度：1

悬停大小调整

在悬停时修改大小设置中的自定义宽度选项。 这将允许行在悬停时扩展。

• 自定义宽度：2000px

间距

然后，转到间距设置并删除默认的顶部和底部填充值。

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

默认边框

将“20px”添加到该行的右上角，并为该行添加一个左边框。

• 左边框宽度：20px
• 左边框颜色：#6d44ff

悬停边框

通过添加“0px”来移除悬停时的“20px”右上角圆角。

默认框阴影

最后但并非最不重要的是，添加一个微妙的框阴影。

• 框阴影模糊强度：80px
• 框阴影传播强度：-10px
• 阴影颜色：rgba(0,0,0,0.11)

悬停框阴影

并在悬停时将阴影颜色修改为完全透明的颜色。

• 阴影颜色：rgba(255,255,255,0)

将 Blurb 模块添加到行

添加内容

现在我们已经完成了所有行设置的修改，我们可以继续向列添加一个 Blurb 模块。 随意使用您选择的任何其他模块。 添加模块后，添加一些选择的内容。

选择图标

接下来选择您选择的图标。

图标设置

并在图标设置中更改图标的外观。

• 图标颜色：#5323ff
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：54px

默认标题文本设置

接下来修改标题文本设置。

• 标题字体: Poppins
• 标题文本对齐：居中
• 标题文字颜色：#5323ff
• 标题文字大小：25px
• 标题字母间距：-1px
• 标题行高度：1em

悬停标题文本设置

并在悬停时修改标题行高度。

• 标题行高度：1.5em

默认正文设置

然后，转到正文设置并进行一些更改。 这包括将文本大小更改为“0px”。 这将帮助我们使正文仅在悬停时显示。

• 正文字体： Poppins
• 正文字体重量：轻
• 正文对齐方式：居中
• 正文颜色：#000000
• 正文大小：0px（桌面），15px（平板电脑和手机）
• 车身线高：2.2em

悬停正文设置

要确保正文文本出现在悬停时，请更改悬停时的文本大小。

• 正文文字大小：15px

默认间距

为了给模块一些呼吸的空间，我们为模块添加了一些自定义的顶部和底部填充。

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

悬停间距

我们将修改悬停时的间距设置。 在退出 Visual Builder 之前您将无法看到最终结果，因为我们将悬停选项应用于行和 Blurb 模块。

• 顶部填充：80px
• 底部填充：80px
• 左填充：20vw
• 右填充：20vw

克隆行 3 次

完成第一行及其 Blurb 模块的修改后，您可以根据需要继续克隆该行任意多次。

更改行和模糊模块 #2

更改行间距

打开第一个副本并添加一些自定义左边距。 这将使我们能够创建楼梯效果，您可以在这篇文章的预览中看到。

• 左边距：6vw

更改行边框颜色

还要更改行的左边框颜色。

• 左边框颜色：#00ffcc

更改模糊内容和图标

然后，打开 Blurb 模块并更改图标。

更改模糊模块图标颜色

随着图标颜色。

• 图标颜色：#00eda6

更改标题文本颜色

和标题文字颜色。

• 标题文字颜色：#00eda6

更改行和模糊模块 #3

更改行间距

也向第二个副本添加一些自定义左边距。

• 左边距：12vw

更改行边框颜色

更改左行边框颜色。

• 左边框颜色：#afebff

更改模糊内容和图标

以及简介图标和内容。

更改模糊模块图标颜色

还要修改图标颜色。

• 图标颜色：#68d9ff

更改标题文本颜色

标题文本颜色也是如此。

• 标题文字颜色：#68d9ff

更改行和模糊模块 #4

更改行间距

继续下一个也是最后一个副本！ 向该行添加一些自定义左边距。

• 左边距：18vw

更改行边框颜色

还要更改行的左边框颜色。

• 左边框颜色：#dd87cf

更改模糊内容和图标

在行中打开 Blurb Module 并更改模块的图标和内容。

更改模糊模块图标颜色

随着图标颜色。

• 图标颜色：#dd6aca

更改标题文本颜色

以及标题文本颜色。

• 标题文字颜色：#dd6aca

预览

现在我们已经完成了教程，让我们最后看看在不同屏幕尺寸上的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项来创建悬停选项卡。 这种方法将帮助您以交互方式共享有关功能或产品的内容。 如果您有任何问题或建议，请务必在下方评论区留言！