如何在 Divi 中为您的网格布局创建扩展悬停效果

向您的网格布局添加扩展悬停效果是一种吸引观众与您的页面内容进行交互的独特方式。 这个想法是从网格的紧凑显示开始，然后当用户将鼠标悬停在 Divi 中的元素上时扩展该网格以将网格内容带到最前面。 这对于扩展图像库以在悬停时显示更大的画廊（带有更大的图像）非常有用。 您还可以扩展一组宣传语，以吸引访问者探索您的服务。

让我们开始吧。

抢先看

这是我将在本教程中介绍的扩展悬停效果示例的先睹为快。

入门

对于本教程，您真正需要的只是 Divi。 我们还将使用 Divi Builder 中可用的 Design Agency About Page 预制布局来启动设计。

首先，创建一个新页面，为页面命名，然后单击以使用 Divi Builder。 接下来选择选择预制布局的选项。 从加载库弹出窗口中，选择 Design Agency Layout Pack，然后单击以使用 Design Agency About Page。

将布局加载到页面后，发布它。 对于本教程，我将在前端使用 Divi 构建器。 为此，您需要做的就是单击后端页面编辑器顶部的“在前端构建”按钮。

现在您可以开始了！

悬停时扩展模糊

对于第一个示例，我将向您展示如何扩展此布局的第二部分中显示所提供服务的简介。

将 Blurb 模块移动到仅占据一排

目前该部分由两个三列的行组成，每列都有一个简介。

由于我们要将悬停效果添加到单行，因此我们需要将底行中的模糊效果移动到顶行。 确保顶行中的每一列都有两个简介。

然后删除空的底行。

自定义 Blurb 模块

接下来，我们将使用多选来选择所有六个模糊，以便我们可以同时将相同的设计应用于所有这些。 为此，请按住 ctrl（或 cmd）并单击每个模糊模块，直到全部被选中。 然后单击其中一个简介上的设置图标以打开元素设置模式。

继续取出在内容框中找到的内容，然后按如下方式更新设计设置：

标题文字大小 16px
宽度：150px
模块对齐：居中
自定义填充：10px 顶部，默认底部，默认左侧，默认右侧

为模块提供 150 像素的自定义宽度，可以在我们展开行时将标题文本锁定到位。

保存更改并单击多选。

使中心模糊更明显

接下来，打开标题为“品牌标识”的第二列中顶部宣传语的宣传语模块设置。 然后更新以下内容：

图标字体大小：120px
标题文字大小：18px（默认）

这只是使中心宣传语更加明显，因为其他宣传语将从其向外扩展的中心部分。

自定义行以在悬停时展开

为了在悬停时扩展我们的模块，我们将调整行的大小和间距。 打开行设置并更新以下内容：

自定义宽度：750px
天沟宽度：4
自定义填充（默认）：左 150 像素，右 150 像素
自定义填充（悬停）：0px 左，0px 右
自定义填充（平板电脑）：0px 左，0px 右

悬停时内边距值的变化是产生扩大悬停效果的原因。 该行将向右扩展 150 像素，向左扩展 150 像素。

查看最终结果。

制作圆形网格

如果您想创建一个可扩展的圆形网格布局，只需稍作调整即可。

首先复制一个外部简介并将其拖动到第二列的大简介上方。 然后用大图标删除中间的标题文本。

要垂直对齐简介，您可以添加一小段自定义 CSS。 打开行设置并将以下自定义 CSS 添加到主元素：

align-items: center;

现在看看结果。

向右扩展网格

您还可以选择向左或向右扩展网格。 只需组织您的模块，然后更新您的行的自定义填充。 例如，如果您想将内容向右展开，请将您的默认自定义填充设置为左 0px 和右 300px。

它在移动设备上的样子

以下是平板电脑和智能手机上的设计。 扩展悬停效果也不会在移动设备上激活。

向图片库添加扩展悬停效果

您还可以使用画廊模块在悬停时扩展图像画廊，以展示具有更大图像的更大网格布局。 为此，请找到靠近设计机构关于页面布局标题“我们的工作”底部的部分。

然后在包含三个图像的行下添加一个新的一列行。 在行内，添加一个画廊模块。

更新图库模块设置如下：

将 4 个具有相同尺寸的图像添加到图库，使它们在行中看起来相同。

图片数量：4
显示标题和说明：否
显示分页：否

接下来，转到设计选项卡并更新以下内容：

缩放图标颜色：#353740
悬停叠加颜色：rgba(252,210,29,0.92)

宽度（桌面）：40%
宽度（悬停）：100%
宽度（平板电脑）：100%

在悬停时更改画廊模块的宽度是创建扩展悬停效果的原因。 将平板电脑宽度设置为 100% 还可以防止在移动设备上发生悬停效果。

这是到目前为止的样子。

我们仍然需要更新我们的行设置以稍微改进功能并匹配布局。

打开行设置并更新以下内容：

自定义宽度：80%
天沟宽度：2
均衡柱高：是

阻止将内容向下推的扩展悬停效应

如果您希望在不向下推页面内容的情况下扩展图片库，您可以通过为您的行设置 min-height 来实现。 这将有一个更好的用户体验，尤其是在画廊正下方的按钮。

转到行设置并在主元素中添加以下自定义 CSS：

min-height: 350px

然后在列主元素中添加以下自定义 CSS：

margin: auto;

均衡列高会激活后端的“display: flex” css 属性，它允许“margin: auto”将列的内容对齐到行内垂直居中，现在最小高度为 350px。 在我们关于如何在 Divi 中垂直对齐内容的完整文章中了解有关此概念的更多信息。

查看最终结果。

向图库中添加更多图像

您还可以向图库添加另外 4 张图像，并将行的最小高度增加到 475 像素以获得以下结果。

它在移动设备上的样子

这是画廊在移动设备上的样子。 扩展悬停效果未激活。

最后的想法

给出的示例只是您使用 Divi 为整个网格内容创建扩展悬停效果的几种方法。 但我相信您可以将它用于无数其他用例。 您可以扩展投资组合模块、商店模块，甚至博客模块。 因此，发挥创造力并享受自己探索各种可能性的乐趣。

我期待在下面的评论中收到您的来信。

干杯!