使用 Divi 在悬停时将文本模块转换为独特的人物描述
已发表: 2018-12-05寻找到的描述信息添加到图像创造性地？ 借助 Divi 的内置悬停选项，现在比以往任何时候都更容易。 您可以在您的网站上将这种方法用于各种目的，从推荐到团队成员描述等等。 在本教程中，我们将介绍 4 个不同的示例，它们将帮助您实现令人惊叹的网页设计。 我们仅使用 Divi 的内置选项创建所有四个示例。
让我们开始吧！
预览
在我们深入研究分步教程之前，让我们快速浏览一下不同屏幕尺寸的最终结果。
桌面
移动的
一般步骤
添加新部分
为了使本教程更容易理解，我们将从一些常规步骤开始。 之后，我们将处理每个示例独有的步骤。 首先向新页面或现有页面添加新的常规部分。
添加行
列结构
继续并选择以下列结构（您也可以使用其他列结构进行此操作）：
第 1 列背景图像
尚未添加任何模块，打开行设置并将背景图像添加到第一列。
- 第 1 列背景图像重复：无重复
浆纱
继续更改行的大小设置。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
然后添加一些自定义填充值。
- 顶部填充：150px
- 底部填充：150px
将文本模块添加到第 1 列
添加内容
为了显示悬停的描述，我们将为四个示例中的每一个使用一个文本模块。 继续将此文本模块添加到您添加背景图像的同一列。
默认文本设置
然后，转到文本设置并进行一些更改。
- 文字颜色：rgba(255,255,255,0)
- 文字大小：0.7vw（桌面），12px（平板电脑和手机）
- 文本方向：对齐
悬停文本设置
更改悬停时的文本颜色。
- 文字颜色：#000000
默认标题文本设置
还要更改 H3 文本设置。
- 标题 3 字体粗细：超粗体
- 标题 3 字体样式：大写
- 标题 3 文本颜色：rgba(255,255,255,0)
- 标题 3 文字大小：2.5vw（桌面）、40px（平板电脑）、30px（手机）
- 标题 3 行高：2.2em
悬停标题文本设置
并在悬停时应用不同的 H3 文本颜色。
- 标题 3 文本颜色：#000000
克隆行 3 次
现在我们已经完成了所有的一般步骤，我们可以继续克隆我们创建的行 3 次，这将允许我们为四个示例中的每一个都有一行。 确保在每个示例的开头，您移动到下一行。
示例#1
更改文本模块
默认背景颜色
让我们从第一个例子开始吧！ 打开第一列中的文本模块并添加背景颜色。
- 背景颜色：rgba(255,255,255,0)
悬停背景颜色
在悬停时更改此背景颜色。
- 背景颜色：rgba(255,255,255,0.73)
默认间距
接下来添加一些自定义边距和填充。
- 上边距：-500px
- 下边距：500px
- 顶部填充：250px
- 底部填充：250px
- 左填充：70px
- 右填充：70px
悬停间距
更改悬停时的值。
- 上边距：0px
- 下边距：0px
- 顶部填充：100px
- 底部填充：100px
过渡
最后，通过增加高级选项卡中的过渡持续时间来创建平滑过渡。
- 转换持续时间：1000ms
示例#2
更改文本模块
默认背景颜色
继续下一个例子！ 打开第一列中的文本模块并添加背景颜色。
- 背景颜色：rgba(255,255,255,0)
悬停背景颜色
更改悬停时的背景颜色。
- 背景颜色：rgba(226,246,255,0.85)
默认间距
接下来添加一些自定义边距和填充值。
- 上边距：100px
- 下边距：100px
- 顶部填充：150px
- 底部填充：150px
- 左填充：70px
- 右填充：70px
悬停间距
在悬停时更改这些值。
- 上边距：200px
- 下边距：-200px
- 左边距：50px
- 顶部填充：100px
- 底部填充：100px
默认边框
继续向文本模块添加边框。
- 左边框宽度：0px
- 左边框颜色：#ffffff
悬停边框
并在悬停时更改边框宽度。
- 左边框宽度：8px
过渡
最后但并非最不重要的一点是，增加过渡持续时间以实现平滑过渡。
- 转换持续时间：500ms
示例#3
克隆文本模块
继续第三个例子！ 对于此示例，我们需要为较小的屏幕尺寸创建一个单独的版本。 克隆第一列中的文本模块。
添加第 1 列渐变背景
然后，打开行设置并使用以下设置向第一列添加渐变背景：
- 颜色 1：RGBA(43,135,218,0)
- 颜色 2：#ffffff
- 第 1 列渐变类型：径向
- 第 1 列径向：中心
- 第 1 列起始位置：59%
- 第 1 列结束位置：59%
- 第 1 列将渐变置于背景图像上方：是
更改文本模块 #1
渐变背景
打开第 1 列中的第一个文本模块。这将是出现在桌面上的描述。 添加渐变背景。
- 颜色 1：rgba(239,239,239,0.65)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：70%
- 最终位置：71%
默认间距
然后，添加一些自定义边距和填充值。
- 最高利润率：6vw
- 底边距：6vw
- 顶部填充：9vw
- 底部填充：9vw
- 左填充：2vw
- 右填充：2vw
悬停间距
在悬停时更改边距值。
- 左边距：15vw
- 右边距：-15vw
能见度
并在平板电脑和手机上禁用该模块。
过渡
也增加过渡持续时间。
- 转换持续时间：500ms
更改文本模块 #2
渐变背景
第 1 列中的第二个模块是将出现在较小屏幕尺寸上的说明。 首先添加渐变背景。
- 颜色 1：rgba(239,239,239,0.65)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：70%
- 最终位置：71%
默认间距
接下来添加一些自定义边距和填充值。
- 上边距：95px
- 下边距：95px
- 顶部填充：170px
- 底部填充：170px
- 左填充：20px
- 右填充：20px
悬停间距
在悬停时更改边距值。
- 上边距：250px
- 下边距：-200px
能见度
并禁用桌面上的模块。
更改两个文本模块的文本方向
最后但并非最不重要的一点是，请确保同时更改两个模块的文本方向以实现所需的结果。
- 文字方向：居中
示例 #4
更改文本模块
默认背景颜色
继续第四个也是最后一个例子！ 将以下背景颜色添加到第 1 列中的文本模块：
- 背景颜色：rgba(255,255,255,0)
悬停背景颜色
在悬停时更改此背景颜色。
- 背景颜色：rgba(255,255,255,0.72)
默认间距
接下来转到间距设置并在那里添加一些自定义边距和填充值。
- 左边距：-200px
- 右边距：200px
- 顶部填充：250px
- 底部填充：250px
- 左填充：70px
- 右填充：70px
悬停间距
在悬停时修改这些值。
- 左边距：0px
- 右边距：0px
- 顶部填充：300px
- 底部填充：300px
过渡
最后但并非最不重要的一点是，增加过渡持续时间以实现平滑过渡。
- 转换持续时间：1200ms
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何创造性地使用 Divi 的悬停选项来展示悬停时的人物描述。 通过这四个示例，您可以将任何推荐或团队成员描述转换为页面上的交互式设计元素。 如果您有任何问题或建议，请务必在下方评论区留言！