如何在 Divi 中使用快门悬停效果显示内容

在悬停时显示模块内容可以带来一些有用的好处。 1) 最初让您的网页设计更紧凑或更优雅是一种很好的方式。 2）节省空间。 3）它可以吸引用户与您的页面进行交互。 4）看起来很酷:)。 基本思想是只显示模块内容的一部分（如预告片），这使得访问者可以将鼠标悬停在上面以查看更多内容。 一旦他们将鼠标悬停在模块上，整个内容就会显示为平滑的悬停效果，就像百叶窗一样打开和关闭。

在本教程中，我将向您展示如何使用 Divi 构建器显示具有快门样式悬停效果的模块内容。

抢先看

以下是我们将共同构建的内容的快速浏览。

入门

订阅我们的 YouTube 频道

首先，创建一个新页面，给页面一个标题，然后部署 Divi Builder 以在前端构建。 选择“选择预制布局”选项。 然后从 Divi 库弹出窗口中，选择 Day Spa 布局包并单击以使用登陆页面布局。

一旦布局加载到页面上，您就可以开始了！

在 Blurb 的顶部和底部添加分隔线

向下滚动页面到标题为“豪华水疗体验”的部分，其中包含四个简介。 我们将使用带有四个宣传语的行来启动设计。

添加第一个分隔符

我们的第一步是在简介模块的上方和下方添加分隔线，以隐藏我们的简介内容。 您可以将这些隔板视为在悬停时打开和关闭的窗户的百叶窗。

在第一列的模糊上方添加一个分隔模块并更新以下内容：

背景颜色：#ffffff
颜色（分隔线）：#ffffff
分隔线重量：100px
高度：100px
自定义边距：底部 0px

白色背景与我们部分的背景相匹配，因为我们不想看到它。 确保分隔器的重量和高度相同。

添加第二个（橙色）分隔线

接下来，直接在您刚刚创建的分隔线下创建另一个分隔线并更新以下内容：

颜色：#ff7a6b
分隔线重量：2px
高度：2px
自定义边距：底部 0px

然后跳转到内容选项卡并给分隔符一个管理标签“橙色分隔符”。 当我们使用线框模式将分隔线复制并粘贴到其他列中时，这将有助于将分隔线与之前的（白色）分隔线区分开来。

保存您的页面。

复制和粘贴 Blurbs 周围的分隔线

现在我们准备将分隔符复制并粘贴到每列中每个简介的上方和下方。 为了使这个过程更容易一些，通过打开页面底部的设置菜单并单击线框图标来部署线框模式。 （或使用 shft + w）

在线框模式下，找到包含我们刚刚创建的简介和分隔线的行。 然后将分隔线和橙色分隔线复制并粘贴到每个宣传语的上方和下方，使最终结果看起来像这样。

接下来，返回桌面视图（shft + w）以完成设计。 您的页面应如下所示。

自定义 Blurb 模块

现在您已准备好所有分隔线，是时候通过一些样式调整（包括自定义边距）来编辑我们的简介模块，以创建快门样式悬停效果。

首先，使用多选来选择所有四个模糊模块。 为此，只需按住 ctrl（或 cmd）并单击每个模块。 然后打开其中一个模块的设置以部署元素设置模式。

在内容选项卡下，添加几行模拟内容。

然后完全禁用图像框阴影。

要创建快门悬停效果，我们需要添加负的顶部和底部边距以默认隐藏分隔线后面的内容。 然后我们将边距设置为 0px 以显示悬停时的内容。 为此，请添加以下间距。

自定义边距（默认）：-100px 顶部，-65px 底部
自定义边距（悬停）：0px 顶部，0px 底部

自定义填充（悬停）：顶部 10 像素，底部 10 像素

您可能需要根据您拥有的内容量调整负边距值。 例如，对于较长的文本内容，您可能需要更多的负边距。

现在检查到目前为止的结果。

请注意，每个模块的顶部和底部都隐藏在分隔器后面，直到您将鼠标悬停在它们上方。

清理快门悬停效果

垂直居中模块

目前，快门悬停效果会在每次悬停时将其余内容推下页面。 这会导致一些可能会分散注意力的页面移动。 另外，悬停动作只会向下移动，这不是真正的快门效果。 我们希望内容从中心向上和向下打开。 为此，我们需要执行以下操作：

打开行设置并均衡列高。

然后转到高级选项卡并在主元素下输入以下自定义 CSS：

align-items: center;

这将确保模块在柱内垂直居中，从而为我们提供向上和向下的快门效果。

给行一个固定的高度

为了阻止悬停效果向下推动下面的页面内容，我们需要停止每次悬停时行的高度增长。 为此，我们必须为桌面上的行设置固定高度。 因为高度将是固定的，所以您需要确保行的高度足够高，以适应其悬停状态下的模糊内容的高度。 然而，你不想让它太高，因为你会在模块上方和下方留下太多的空白空间。 在这个例子中，我将行高设置为 600px。 但是，由于我们只想在桌面上设置固定高度，因此我们需要使用媒体查询将一些 CSS 添加到我们的页面设置中。

这是您需要做的。

首先，在行设置中，为您的行指定一个 CSS ID：

CSS ID：固定高度

然后打开页面设置（在高级选项卡下）并添加以下自定义 CSS：

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

这使您的行在桌面上具有 600 像素的固定高度，并阻止悬停效果将页面内容的其余部分向下推。

就是这样！

最终结果

查看最终设计。

这是快门悬停效果。

在移动设备上禁用悬停效果可能是个好主意。 为此，您需要做的就是为每个模糊模块设置自定义边距，如下所示：

自定义边距（平板电脑）：0px 顶部，0px 底部

最后的想法

这种快门悬停效果是一种创造性的方式，可以吸引观众寻找有关您的不同服务的更多信息。 借助 Divi 的魔力和一些 CSS 片段，最终的结果非常优雅。 我相信这种快门悬停效果还有更多应用，因为您可以使用任何您想要的模块。 随意探索您自己的一些令人兴奋的新设计，并毫不犹豫地与我们分享。 我期待在评论中收到您的来信。

干杯!