使用 Divi 在悬停时创建弹出式服务描述
已发表: 2019-07-20在悬停时创建弹出式服务描述可以是一种有效的方式来通知用户并让用户了解附加信息。 就像工具提示一样，这些弹出式描述将在悬停时显示有关您的服务的更多信息。 但是使用 Divi，您可以在 Divi builder 中使用全套设计工具来创建令人惊叹的弹出式设计，而无需任何额外的自定义 CSS。
在本教程中，我们将向您展示在您的 Divi 网站上构建弹出式服务描述是多么容易。 诀窍是将您的模块放置在这样一种方式，即当您在悬停时调整行的宽度时，它们会相互滑动并弹出。
让我们开始吧！
抢先看
免费下载布局
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
订阅我们的 YouTube 频道
要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。
让我们进入教程好吗？
你需要什么开始
首先，您需要具备以下条件：
- 已安装并激活 Divi 主题
- 在前端从头开始构建的新页面（可视化构建器）
- 用于模拟内容的图像。 我们将在本教程中使用投资公司布局包中的一些。
之后，您将有一个空白画布开始在 Divi 中进行设计。
使用 Divi 在 Hover 上创建弹出的服务描述
创建部分和行
首先，创建一个具有一列行的新常规部分。
在添加任何模块之前，请按如下方式更新行设置：
添加深色背景图像或深色背景颜色。 我使用的是来自 Investment Company Layout Pack 的抽象背景图像。 但是如果你不想使用那个，你可以只添加#161c29的背景颜色。
- 天沟宽度：1
- 宽度：100%
- 高度：320px（桌面），自动（平板电脑和手机）\
- 填充：0px 顶部，0px 底部
添加模糊模块
接下来向您的行添加一个模糊模块。
并更新模糊模块设置如下：
- 标题：服务
- 图标：见截图
也删除默认的正文内容。
- 背景图片：添加大约 320 像素 x 215 像素的图片
- 背景图片尺寸：适合
- 背景图片位置：顶部中心
- 背景渐变左颜色：rgba(31,72,192,0.61)
- 背景渐变右侧颜色：#161c29
- 起始位置：34%
- 最终位置：71%
- 将渐变放在背景图像上方：是
- 图标颜色：#ffffff
- 文本对齐：居中
- 标题字体：档案
- 标题文字颜色：#ffffff
- 标题文字大小：38px
- 标题字母间距：4px
- 最大宽度：320px
- 模块对齐：居中
- 高度：320px
- 填充：68px 顶部
- 圆角：10px
- Z指数：1
添加 z index 1 值对于确保模糊模块保持在最终将堆叠在其后面的其他模块之上至关重要。
添加号召性用语模块
接下来，我们需要添加一个调用动作模块，该模块将位于模糊模块的左侧。
这将是我们最终会在悬停时弹出的两个内容区域中的第一个。
现在我们需要取出默认的背景颜色并更新设计设置如下：
- 文本对齐方式：左
- 标题字体：档案
- 标题文字大小：22px
- 宽度：320px
- 模块对齐方式：左（桌面），中心（平板电脑和手机）
- 高度：320px（桌面），自动（平板电脑和手机）
- 边距：-320px（桌面），0px（平板和手机）
- 填充：顶部 40 像素，左侧 40 像素，右侧 40 像素
复制号召性用语模块并将其向右对齐
要创建将出现在简介右侧的第二个内容块，我们可以部署线框视图模式并复制号召性用语模块。 然后打开副本的设置并将模块对齐更新到右侧。
到目前为止，设计应该是这样的。
创建按钮
我们需要添加到设计中的最后一个元素是按钮。 如果您愿意，您可以在任一号召性用语模块中添加按钮。 但是对于这个设计，我认为最好添加一个在我们行底部保持可见的按钮。
要创建按钮，请部署线框视图模块并直接在第二个号召性用语模块下添加按钮模块，使其成为行/列中的最后一个模块。
打开按钮模块设置，然后切换桌面视图模式，以便您可以直观地编辑按钮。
添加按钮文本“了解更多”。
然后更新按钮样式如下：
- 按钮对齐：居中
- 按钮文字颜色：#ffffff
- 按钮背景颜色：#1f48c0
- 按钮边框宽度：0px
- 按钮边框半径：10px
- 按钮字母间距：4px
- 按钮字体：Archivo
现在我们需要做的就是定位我们的按钮。
- 边距（桌面）：-25px 顶部
- 边距（平板电脑和手机）：顶部 25 像素，底部 50 像素
- Z指数：2
z 索引值为 2 将确保按钮保持在模糊模块上方（其 z 索引为 1）。
创建弹出悬停效果
我们需要完成弹出服务描述的主要悬停效果涉及更改悬停时行的宽度。 为此，我们需要默认为我们的行设置一个较窄的宽度。 这将导致模块相互堆叠并隐藏在模糊模块后面。 然后我们将在悬停时扩展行的宽度，以暴露两个隐藏的号召性用语模块。
打开行设置并更新宽度，如下所示：
- 最大宽度（桌面）：320px
- 最大宽度（悬停）：1080px
- 最大宽度（平板电脑和手机）1080px
然后最后一步，为该行添加一个边框半径并将可见性溢出选项更新为可见，这样按钮就不会被隐藏。
- 圆角：10px
- 水平溢出：可见
- 垂直溢出：可见
最后结果
到目前为止，请查看弹出式服务说明。
这是在平板电脑和手机显示屏上。
尝试更多设计选项
既然我们已经有了基本的设置，那么尝试更多的设计选项总是很有趣的。 以下是一些您可以尝试弹出式服务描述的建议。
添加部分背景颜色
如果需要，您可以为与行的背景颜色/图像匹配的部分添加背景颜色，以获得独特的弹出设计。
转到行设置并更新以下内容：
- 背景颜色：#161c29
然后查看结果。
仅使用两个模块
如果您想要仅使用两个模块的更紧凑的弹出窗口，您可以删除一个号召性用语模块，然后将模糊模块向左对齐，以便在悬停时这两个模块可见。
为此，请部署线框视图模式。 然后直接删除blurb模块下的第一个号召性用语模块。
之后，使用左模块对齐更新模糊模块。
- 模块对齐：左（桌面），中心（平板）
最后，在悬停时减小行的最大宽度以使其更紧凑。 打开行设置并更新以下内容：
- 最大宽度（悬停）：700px
- 最大宽度（平板电脑）：700px
这是最终结果。
这是在白色背景上。
最后的想法
在悬停时创建弹出式服务描述是吸引访问者使用您的内容的独特方式。 此功能的工作原理很像包含 Divi 的所有设计功能的精美且信息丰富的工具提示。 这很容易做到。 一旦您确定了模块的大小和位置，您需要做的就是在悬停时调整行的宽度。 随意尝试不同的模块和内容，以获得更多的应用程序。 如果有的话，我希望这会给你更多的灵感，让你用 Divi 做更多的事情。
我期待在评论中收到您的来信。
干杯!