使用悬停文本阴影与 Divi 创建交互式内容
已发表: 2019-02-18让您的网站从类似网站中脱颖而出可能很困难，但是一旦您设法做到了，几乎总是值得投入的努力和想法。 为了帮助您获得灵感，我们将向您展示如何在使用 Divi 构建网站时创建交互式内容。
我们将在本教程中重新创建的示例将特别适用于您正在处理的任何关于页面。 您将能够使用 Divi 的内置文本阴影选项在悬停时共享事实或公司信息。 我们还确保这些悬停效果不适用于较小的屏幕尺寸，因此信息和移动体验不会丢失。
让我们开始吧！
预览
在我们深入学习本教程之前，让我们快速浏览一下您可以预期的结果。
桌面
移动的
我们确保所有这些悬停交互都不适用于较小的屏幕尺寸。 在使用相同的部分和模块时，我们将得到以下简单的结果：
方法
- 我们将重新创建的示例非常适用于 about 页面，但您可以使用任何 5 个字符或 6 个字符的单词（与列结构匹配）
- 每个字符都将专用于一个单独的文本模块
- 我们使用具有足够多列的行来连接单词的不同字符，并使它们看起来好像是在同一个模块中创建的
- 默认情况下，我们将使文本模块的文本颜色与部分背景颜色相匹配
- 为确保字符保持可读性，我们还将对字符应用白色文本阴影
- 一旦您将鼠标悬停在字符上，文字阴影就会消失，文字颜色也会发生变化，让您感觉文字正在填满
- 悬停角色时，还会显示一些附加信息
- 在较小的屏幕尺寸上，公司事实和/或信息将从一开始就存在
让我们开始重建吧！
订阅我们的 YouTube 频道
添加新部分
背景颜色
打开一个新页面或现有页面并向其添加常规部分。 打开部分设置并更改背景颜色。
- 背景颜色：#03006d
间距
然后，转到该部分的间距设置并添加一些自定义的顶部和底部填充。
- 顶部填充：50px
- 底部填充：50px
添加新行
列结构
继续使用以下列结构向该部分添加新行。
浆纱
然后，转到大小设置并允许行占据屏幕的整个宽度。 这是重要的一步，因为它允许我们使用视口单位手动确定距离。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
在上一步中，我们已经摆脱了新行附带的所有默认大小设置。 但是，我们确实需要手动添加一些填充。 在这里，我们使用视口单位来确保结果在所有桌面屏幕尺寸中保持相同。
- 左填充：9vw（台式机），5vw（平板电脑和手机）
- 右填充：5vw（平板电脑和手机）
将文本模块添加到第 1 列
添加内容
完成修改行设置后，您可以继续将第一个文本模块添加到第 1 列。将第一个字符添加为段落文本，并将您希望悬停时显示的内容添加为列表文本。
默认文本设置
然后，转到设计选项卡并修改默认段落文本设置。 确保文本和部分背景使用相同的颜色。
- 文字字体粗细：超粗
- 文字颜色：#03006d
- 文字大小：27vw（桌面），0vw（平板电脑和手机）
- 文本行高：1.1em
- 文字阴影模糊强度：0.01em
- 文字阴影颜色：#ffffff
- 文本方向：左
悬停文本设置
要创建漂亮的悬停效果，我们需要在悬停时修改这些段落文本设置。 请注意我们现在如何使用完全透明的文本阴影颜色使其消失。
- 文字颜色：#ffffff
- 文字阴影颜色：rgba(255,255,255,0)
默认列表文本设置
继续转到列表文本设置。 这些设置的一个重要部分是确保桌面上的文本大小为“0px”，但添加“18px”作为较小屏幕尺寸的文本大小。 这将确保列表文本显示在较小的屏幕尺寸上，但不会在没有悬停的情况下显示在桌面上。
- 无序列表字体粗细：轻
- 无序列表文本颜色：#ffffff
- 无序列表文本大小：0px（桌面），18px（平板和手机）
- 无序列表文本阴影颜色：rgba(255,255,255,0)
- 无序列表样式类型：圆形
- 无序列表样式位置：外
- 无序列表项缩进：0px
悬停列表文本设置
我们确实希望列表文本出现在悬停时。 这就是为什么我们将在悬停时更改文本大小的原因。 确保您在悬停时使用的文字大小与您在较小屏幕尺寸上使用的文字大小相同。 这将有助于确保在较小的屏幕尺寸上没有悬停效果。
- 无序列表文本大小：18px
间距
继续转到模块的间距设置并在那里进行一些更改。
- 下边距：50px（平板电脑和手机）
- 右边距：-4vw（台式机），0vw（平板电脑和手机）
克隆文本模块 4 次并在剩余列中放置重复项
现在我们已经完成了第 1 列中的第一个模块的修改，我们可以继续克隆该模块四次，并将每个重复项放置在剩余的列中。 在接下来的步骤中，我们将修改每个重复项以与新角色匹配。
更改第 2 列中的文本模块
更改内容
打开第 2 列中的副本并更改内容。
更改间距
然后，转到间距设置并更改自定义边距值。
- 下边距：50px（平板电脑和手机）
- 左边距：-2vw（台式机），0vw（平板电脑和手机）
- 右边距：-2vw（台式机），0vw（平板电脑和手机）
更改第 3 列中的文本模块
更改内容
还要更改第 3 列中重复项的内容。
更改间距
以及设计选项卡中的间距设置。
- 下边距：50px（平板电脑和手机）
- 左边距：-5.5vw（台式机），0vw（平板电脑和手机）
- 右边距：1.5vw（台式机），0vw（平板电脑和手机）
更改第 4 列中的文本模块
更改内容
继续打开第 4 列中的文本模块并更改此处的内容。
更改间距
然后转到设计选项卡并在间距设置中更改自定义边距值。
- 下边距：50px
- 左边距：-6vw（台式机），0vw（平板电脑和手机）
- 右边距：2vw（桌面），0vw（平板电脑和手机）
更改第 5 列中的文本模块
更改内容
到最后一个副本。 更改内容框中的内容。
更改间距
随着自定义间距设置。
- 下边距：50px
- 左边距：-7vw（台式机），0vw（平板电脑和手机）
- 右边距：3vw（桌面），0vw（平板电脑和手机）
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
我们知道让您的网站从其他网站中脱颖而出是多么重要。 借助 Divi 的内置选项，您可以随心所欲地发挥创意。 这篇文章是一个示例，说明如何在悬停时创建交互式内容，同时确保在较小的屏幕尺寸上一切都保持简单。 您可以使用我们为您当前正在处理的任何关于页面重新创建的示例。 这是在与访问者进行互动的同时分享有关您公司的一些事实和其他信息的好方法。 如果您有任何问题或建议，请务必在下方评论区留言！