您是否正在寻找新的和创造性的方式来在您的网页上展示功能和/或产品？ 如果是这样，请继续阅读，因为在这篇文章中，我们将向您展示如何仅使用 Divi 的内置选项在悬停选项卡中显示功能。 您使用这种方法的可能性是无穷无尽的，它们肯定会让您更深入地了解 Divi。 选项卡悬停效果只会出现在对悬停友好的桌面环境中。 当从较小的屏幕尺寸查看悬停选项卡时，功能将以其原始形式列出。
让我们开始吧！
预览
在我们深入教程之前，让我们看一下不同屏幕尺寸的结果。
桌面
移动的
让我们开始创作吧！
订阅我们的 Youtube 频道
添加新部分
渐变背景
添加新页面或打开现有页面并添加新部分。 打开部分设置并为部分添加渐变背景。 我们将使用渐变背景来覆盖悬停选项卡的左侧，如您在上面的打印屏幕中所见。
- 颜色 1：#f2f2f2
- 颜色2：#ffffff
- 渐变方向：87度
- 起始位置：20%
- 结束位置：20%
间距
然后，通过在两个选项中添加“0px”来删除该部分的自定义顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加新行
立柱结构
继续使用以下列结构向该部分添加新行：
背景颜色
尚未添加任何模块，打开行设置并更改背景颜色。
- 背景颜色：#ffffff
行对齐
同时修改行对齐。
默认尺寸
并更改尺寸设置。
- 使用自定义宽度：是
- 单位：PX
- 自定义宽度：400px
- 使用自定义装订线宽度：是
- 天沟宽度：1
悬停大小
在悬停时修改大小设置中的自定义宽度选项。 这将允许该行在悬停时展开。
间距
然后，转到间距设置并删除默认的顶部和底部填充值。
- 顶部填充：0px
- 底部填充：0px
默认边框
在该行的右上角添加“20px”，并为该行添加一个左边框。
- 左边框宽度：20px
- 左边框颜色：#6d44ff
悬停边框
通过添加“0px”来删除悬停时的“20px”右上角圆角。
默认框阴影
最后但同样重要的是，添加一个微妙的盒子阴影。
- 盒子阴影模糊强度：80px
- 盒子阴影传播强度：-10px
- 阴影颜色：rgba(0,0,0,0.11)
悬停框阴影
并在悬停时将阴影颜色修改为完全透明的颜色。
- 阴影颜色：rgba(255,255,255,0)
将模糊模块添加到行
添加内容
现在我们已经完成了所有行设置的修改，我们可以继续在列中添加一个 Blurb 模块。 随意使用您选择的任何其他模块。 添加模块后，添加一些选择的内容。
选择图标
接下来选择您选择的图标。
图标设置
并在图标设置中更改图标的外观。
- 图标颜色：#5323ff
- 图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：54px
默认标题文本设置
接下来修改标题文本设置。
- 标题字体：Poppins
- 标题文本对齐方式：居中
- 标题文字颜色：#5323ff
- 标题文字大小：25px
- 标题字母间距：-1px
- 标题行高度：1em
悬停标题文本设置
并修改悬停时的标题行高度。
默认正文文本设置
然后，转到正文设置并进行一些更改。 这包括将文本大小更改为“0px”。 这将帮助我们使正文仅在悬停时出现。
- 正文字体：Poppins
- 正文字体粗细：Light
- 正文文本对齐：居中
- 正文文本颜色：#000000
- 正文大小：0px（桌面），15px（平板电脑和手机）
- 车身线高：2.2em
悬停正文文本设置
要确保在悬停时显示正文文本，请更改悬停时的文本大小。
默认间距
为了给模块一些喘息的空间，我们为模块添加了一些自定义的顶部和底部填充。
- 上边距：80px
- 底部填充：80px
悬停间距
我们将修改悬停时的间距设置。 在退出 Visual Builder 之前，您将无法看到最终结果，因为我们将悬停选项应用于行和 Blurb 模块。
- 上边距：80px
- 底部填充：80px
- 左填充：20vw
- 右填充：20vw
克隆行 3 次
完成第一行及其 Blurb 模块的修改后，您可以继续复制该行，最多可以复制任意多次。
更改行和模糊模块 #2
更改行间距
打开第一个副本并添加一些自定义左边距。 这将允许我们创建楼梯效果，您可以在这篇文章的预览中注意到。
更改行边框颜色
更改行的左边框颜色。
- 左边框颜色：#00ffcc
更改模糊内容和图标
然后，打开 Blurb 模块并更改图标。
更改模糊模块图标颜色
连同图标颜色。
更改标题文本颜色
和标题文字颜色。
- 标题文字颜色：#00eda6
更改行和模糊模块 #3
更改行间距
为第二个副本添加一些自定义左边距。
更改行边框颜色
更改左行边框颜色。
- 左边框颜色：#afebff
更改模糊内容和图标
连同简介图标和内容。
更改模糊模块图标颜色
修改图标颜色。
更改标题文本颜色
标题文本颜色也是如此。
- 标题文字颜色：#68d9ff
更改行和模糊模块 #4
更改行间距
到下一个也是最后一个副本！ 向该行添加一些自定义左边距。
更改行边框颜色
更改行的左边框颜色。
- 左边框颜色：#dd87cf
更改模糊内容和图标
打开行中的 Blurb Module 并更改模块的图标和内容。
更改模糊模块图标颜色
连同图标颜色。
更改标题文本颜色
标题文本颜色也是如此。
- 标题文字颜色：#dd6aca
预览
现在我们已经完成了教程，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项来创建悬停选项卡。 这种方法将帮助您以交互方式共享有关功能或产品的内容。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
