如何将 Divi 行转换为水平和垂直悬停选项卡

标签对于在您网站的简洁区域中提供重要信息绝对有用。 这减少了用户滚动浏览长页面内容的需要。 Divi 的选项卡模块易于使用，非常适合在点击时切换简单的内容。

但在本教程中，我将向您展示如何将整个 Divi 行转换为悬停选项卡。 我还将向您展示如何创建水平和垂直选项卡。 这将释放 Divi 的力量，为每个选项卡内容区域设计具有多个模块的完整行布局。 无需插件！

让我们开始吧。

抢先看

这是我们将在本教程中一起构建的水平和垂直悬停选项卡的快速浏览。

免费下载 Divi Rows 悬停选项卡布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

订阅我们的 YouTube 频道

你需要什么开始

首先，您需要进行以下设置：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 用于模拟内容的三个图像

之后，您将有一个空白画布开始在 Divi 中构建一些悬停选项卡。

使用 Divi Rows 创建水平悬停选项卡

首先，创建一个具有两列行的新常规部分。

行背景、填充和框阴影

在添加模块之前，让我们先自定义行设置。 我们稍后需要返回到该行，以便为我们的选项卡功能定位它。

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

背景渐变左颜色：#284f91
背景渐变右颜色：#4646c4

填充：顶部 50 像素，底部 50 像素，左侧 50 像素，右侧 50 像素
盒子阴影：见截图
框阴影颜色：rgba(70,70,196,0.66)

向行添加内容

现在我们要向我们的行添加一些模拟内容。 请记住，您可以为内容区域添加列和模块的任意组合。

在第 1 列中，添加带有图像模块的图像。 我正在使用 Design Conference Layout Pack 中的一个。

在右栏中，添加一个号召性用语模块并更新以下内容：

按钮链接 URL：#（现在只是为了显示按钮）
使用背景颜色：否

文本对齐：左
标题字体：Lato
标题文字大小：60px（桌面），50px（手机）

创建选项卡

要创建用户将鼠标悬停在其上以显示该行内容的实际选项卡，我们需要创建一个文本模块并使用一些自定义 CSS 将其放置在右上角。

继续在第 1 列的图像下添加一个新的文本模块并更新以下内容：

内容：“标签一”

背景颜色：#284f91（这应该与行的左侧渐变颜色匹配）
文本 文本对齐：居中
文字文字颜色：#ffffff
宽度：100px
高度：50px
边距：-100px 顶部，-50px 左
填充：14px 顶部

最后，将以下自定义 css 添加到主元素以使其在行的顶部具有绝对位置。

position: absolute !important;
top: 0;

这个 css 加上我们添加的自定义边距将确保选项卡正好位于行的左上角。 重要的是标签实际上位于行上方，以便用户稍后可以将鼠标悬停在它上面。

截面高度和间距

现在，在我们继续创建剩余的行和选项卡之前，让我们通过向该部分添加一些顶部和底部边距来给我们的行一些喘息的空间。 对于这个设计，重要的是我们使用边距来分隔我们的部分，因为我们也会给我们的部分设置一个高度。 我们需要为我们的部分设置一个高度，因为我们希望我们的行跨越我们部分的整个高度。 这意味着我们的每一行（标签内容）都将与我们的部分具有相同的高度。 因此，最好每一行都有相似数量的内容，否则某些行选项卡中会出现不需要的负空间。 这应该在以后更有意义。

现在，打开部分设置并更新以下内容：

高度：500px（桌面）、900px（平板）、750px（手机）
边距：顶部 100 像素，底部 100 像素
填充：0px 顶部，0px 底部

请注意，当行列在移动设备上堆叠时，需要调整部分的高度以考虑更长的内容空间。 因此，您需要根据自己的需要对这个高度进行一些调整。

现在保存您的设置，让我们回到添加更多行。

创建标签内容的第二行

要创建第二行，请复制您之前创建的行。 将文本模块移​​至第 1 列，将图像移至第 2 列。然后使用新图像更新图像。 这将帮助您了解每个选项卡上的不同内容是什么样的。

打开第二行的设置，通过将鼠标悬停在背景预览区域上并单击小“切换”图标来切换背景渐变颜色。

然后打开用于在第 1 列中创建选项卡的文本模块的设置，并为其指定与新顶部渐变相匹配的颜色。

背景颜色：#4646c4

然后我们需要将选项卡向右移动，以便当这一行与上面的行重叠时，您可以直接看到第一行选项卡右侧的选项卡。

边距：50px 左

为第二行添加不透明度过滤器悬停效果

对于行，我们可以添加不透明度过滤器悬停效果，以便在悬停在选项卡上并显示行内容时有一个很好的悬停过渡。

打开行设置并添加以下过滤器：

不透明度：70%（默认），100%（悬停）

然后为不透明度过滤器悬停效果添加过渡持续时间和速度曲线。

转换持续时间：500ms
过渡速度曲线：线性

创建第三行标签内容

现在我们可以添加最后一行选项卡内容。 为此，请复制您刚刚创建的第二行。 然后将文本模块移​​至第 1 列，将图像移至第 2 列。并使用新图像更新图像模块。

使用新的背景渐变更新行设置。

背景渐变左颜色：#333333
背景渐变右颜色：#4646c4

接下来打开用于在第 1 列中创建选项卡的文本模块的设置并更新颜色和边距。

背景颜色：#333333
边距：左 150 像素

在我们将行定位为彼此重叠之前，您的页面应该是这样的。

用绝对定位重叠行

要重叠我们的行，我们需要使用绝对定位。 然后，当鼠标悬停在选项卡上时，我们将使用 Z 索引选项将每一行置于最前面。 但是因为我们给我们的行一个绝对位置（并且父/节有一个设置的高度），我们可以为每一行添加 100% 的高度，以便它们跨越该节的整个高度。

这是如何做到的。

首先，部署线框模式。 然后使用多选来选择所有三行并打开其中之一的设置以部署元素设置模式。 然后将高度更新为 100%。

高度：100%

这会将所有三行的高度设置为 100%。

然后将以下自定义 CSS 添加到主元素：

position: absolute !important;
left: 0;
right: 0;
margin: auto;

现在部署桌面视图模式以查看行如何很好地重叠以创建我们的选项卡。

使用 Z 索引更改悬停时的行顺序

现在您可能已经注意到第三行/标签位于最前面。 所以我们需要使用 Z 索引对行重新排序，以便第一个选项卡首先显示，直到您将鼠标悬停在另一个选项卡上。

为此，请返回线框视图模式并打开您创建的第一行的设置（带有选项卡）。 然后更新z索引如下：

Z指数：10

接下来使用多选来选择第二行和第三行。 然后打开元素设置模式并在悬停时将以下 z 索引添加到两行。

Z 指数：11（悬停）

就是这样。 让我们看看最终的结果。

最后结果

这样做的原因是因为技术上每个选项卡（文本模块）都是每行的一部分，即使它们位于行的上方和外部。 这就是为什么将鼠标悬停在选项卡上会显示它所在的行。

这是它在移动设备上的外观。

创建垂直悬停选项卡

如果您想向行添加垂直选项卡，您真正需要做的就是重新定位用于创建每个选项卡的文本模块。 我们还需要调整行的大小和节间距，以便为选项卡腾出空间。

这是该怎么做。

继续复制包含我们刚刚构建的悬停选项卡的部分，以便您可以使用新设计。

然后打开部分设置并更新以下内容：

填充：左 10%，右 10%

然后使用多选来选择所有三行并使用以下内容更新元素设置：

宽度：70%（桌面）、70%（平板电脑）、80%（手机）
最大宽度：980px

然后将所有三个模糊的渐变方向更新为 90 度，这样当我们将选项卡放在左侧时，左侧渐变颜色将与选项卡背景颜色混合。

梯度方向：90度

现在是时候将我们的文本模块选项卡放在行的左侧以获得我们想要的垂直选项卡。

打开第一行中的文本模块选项卡设置并更新以下内容：

边距（桌面）：顶部 -50px，左侧 -150px
边距（手机）：顶部 -100 像素，左侧 -50 像素

手机的边距设置是将标签带回到水平标签显示的行上方。

接下来，打开部分行中文本模块选项卡的设置并更新以下内容：

边距（桌面）：顶部 0px，左侧 -150px
边距（手机）：顶部 -100 像素，左侧 50 像素

对于第三行的最后一个选项卡，更新以下内容：

边距（桌面）：顶部 50 像素，左侧 -150 像素
边距（手机）：顶部 -100 像素，左侧 150 像素

最后结果

现在让我们看看最终的结果。

这是一台平板电脑和一部手机。

最后的想法

借助一些创造性思维和 Divi 的强大功能，您可以使用 Divi 行创建一些非常酷的自定义悬停选项卡。 您可以显示的内容有一些限制。 例如，使用此设置，所有行的高度都必须与该部分的高度相同。 但是，由于不需要使用插件，我认为这是一个很好的解决方案。 不要忘记，由于您可以将 Divi 行用于您的内容，因此您可以通过多种方式在下一个项目中使用这些悬停选项卡。

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

干杯!