如何使用 Divi 使隐藏行内容出现在悬停上（免费下载！）
已发表: 2019-02-07向您的网站添加微妙的交互可以真正提升访问者的整体用户体验。 让您的网站看起来更漂亮，同时仍然尊重用户友好性的一件事是使行内容出现在悬停时。 这是展示服务、产品、功能等的好方法。
在本教程中，我们将向您展示如何创建从 A 到 Z 的特定设计，但是一旦掌握了该方法，您就可以使其适用于您正在处理的任何类型的网站。 在这篇博文的最后，我们还将分享此设计的 JSON 文件，您可以免费下载并不受任何限制地使用。
让我们开始吧！
预览
在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。
桌面
移动的
让我们开始创作吧！
添加新部分
默认背景颜色
首先向新页面或现有页面添加新部分并更改部分背景颜色。
- 背景颜色：#e0e0e0
悬停背景颜色
在悬停时修改此背景颜色。
- 背景颜色：#000000
间距
转到设计选项卡并添加一些自定义间距值。 为了使本教程有效，我们将仅使用视口单位。 这将有助于确保一切都保持原位，无论屏幕大小如何。
- 最高利润率：5vw
- 底边距：5vw
- 左边距：3vw
- 右边距：3vw
- 顶部填充：0px
- 底部填充：0px
添加第 1 行
列结构
继续使用以下列结构添加新行：
渐变背景
尚未添加任何模块，打开行设置并添加渐变背景。
- 颜色 1：#ff5b79
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：15%
- 结束位置：15%
浆纱
也对行的大小设置进行一些更改。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
并在间距设置中添加一些自定义填充值。
- 顶部填充：9vw
- 底部填充：9vw
- 第 1 列左填充：5vw
- 第 1 列右填充：5vw
- 第 2 列左填充：5vw
- 第 2 列右填充：5vw
将文本模块添加到第 1 列
添加内容
是时候开始添加模块了！ 我们需要的第一个模块是第 1 列中的文本模块。添加 H3 内容和链接。
链接文字设置
然后，转到链接文本设置并对链接的外观进行一些更改。
- 链接字体：Didact Gothic
- 链接字体样式：下划线
- 链接下划线样式：纯色
- 链接文字颜色：#ffffff
- 链接文字大小：20px
标题文字设置
还要修改 H3 文本设置。
- 标题 3 字体：Didact Gothic
- 标题 3 文本颜色：#ffffff
- 标题 3 文字大小：50px
能见度
最后但并非最不重要的是，禁用桌面上的模块。 我们只需要这个模块显示在较小的屏幕尺寸上。
将分隔模块添加到第 2 列
能见度
第 1 列中所需的第二个也是最后一个模块是分频器模块。 确保启用了“显示分隔线”选项。
- 显示分隔线：是
颜色
然后，更改分隔线颜色。
- 颜色：#ffffff
间距
也向 Divider 模块添加一些自定义边距值。
- 上边距：11vw（桌面），80px（平板），
- 下边距：50px（平板电脑和手机）
将文本模块 #1 添加到第 2 列
添加内容
进入第二列！ 添加带有一些 H4 内容选择的文本模块。
标题文字设置
然后，转到 H4 文本设置并进行一些更改。
- 标题 4 字体：Didact Gothic
- 标题 4 字体粗细：粗体
- 标题 4 文本颜色：#ffffff
- 标题 4 文字大小：2vw（桌面）、40px（平板电脑）、30px（手机）
将文本模块 #2 添加到第 2 列
添加内容
在上一个文本模块的正下方，继续添加另一个具有某些段落内容的选择。
文字设置
接下来转到文本设置并进行一些更改。
- 文字字体：Didact Gothic
- 文字颜色：#ffffff
- 文字大小：0.9vw（桌面），18px（平板电脑和手机）
- 文本行高：2em
间距
也添加一些自定义边距值。
- 最高利润率：2vw
- 右边距：15vw
添加第 2 行
列结构
完成第一行及其所有模块的修改后，您可以继续使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并对 Sizing 设置进行一些更改。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
也删除行间距设置中的所有默认填充。
- 顶部填充：0px
- 底部填充：0px
能见度
最后但并非最不重要的一点是，在平板电脑和手机上隐藏这一行。
将文本模块添加到列
添加内容
我们在这一行中唯一需要的模块是文本模块。 添加一些 H3 内容和链接。
默认背景颜色
然后，转到背景设置并为文本模块添加背景颜色。
- 背景颜色：#e0e0e0
悬停背景颜色
在悬停时修改此背景颜色。
- 背景颜色：rgba(255,255,255,0)
默认文本设置
接下来，转到文本设置并进行一些更改。
- 链接字体：Didact Gothic
- 链接字体样式：下划线
- 链接下划线样式：纯色
- 链接文字颜色：#ffffff
- 链接文字大小：0px
- 链接字母间距：-1px
悬停链接文本设置
在悬停时修改链接文本大小。
- 链接文字大小：1.7vw
默认标题文本设置
继续对 H3 文本设置进行一些更改。
- 标题 3 字体：Didact Gothic
- 标题 3 字体粗细：粗体
- 标题 3 文本颜色：#000000
- 标题 3 文字大小：12vw
- 标题 3 字母间距：-0.8vw
悬停标题文本设置
在悬停时修改一些 H3 文本设置。
- 标题 3 文本颜色：#ffffff
- 标题 3 文字大小：4vw
- 标题 3 字母间距：-0.2vw
间距
然后，转到间距设置并添加一些自定义边距和填充值。
- 上边距：-34.3vw
- 底部边距：-5vw
- 顶部填充：10vw
- 底部填充：10vw
- 左填充：26.5vw
悬停间距
修改悬停时的间距值。
- 最高利润率：-34.1vw
- 底部边距：-5vw
- 顶部填充：12vw
- 底部填充：12vw
- 左填充：11.5vw
过渡
也增加文本模块的过渡持续时间。
- 转换持续时间：400ms
克隆部分
完成第一部分后，继续克隆整个部分，最多可复制多次。 在教程的下一部分中，我们将向您展示需要对每个副本进行的更改。
更改部分悬停背景颜色
您需要修改的第一件事是部分悬停背景颜色。
- 背景颜色：#ff5b79
更改第 1 行渐变背景
也更改第 1 行渐变背景。
- 颜色 1：#000000
更改文本颜色和复制
连同文本颜色和所有副本。
- 标题 3 文本颜色：#ff5b79
更改文本模块间距
最后但并非最不重要的是，更改第 2 行中文本模块的左填充。 您需要使用的左填充量取决于您使用的内容的长度。
- 左填充：21vw
免费下载布局
要将您的手放在布局上，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何在悬停时显示隐藏的行内容。 我们创建的结果仅使用 Divi 的内置选项。 我们还在教程的最后分享了 JSON 文件，希望它也能帮助您创建自己的替代设计。 如果您有任何问题或建议，请务必在下方评论区留言！