如何使用 Divi 中的扩展角选项卡显示悬停内容（免费下载）

使用独特的悬停效果发现新的和创造性的方式来吸引用户与您的内容互动总是很有趣的。 做到这一点的一种好方法是使用扩展的角选项卡在悬停时显示内容。 这允许用户将鼠标悬停在列或图像角落的选项卡上，以扩展包含对用户有用的附加内容的覆盖层。

在本教程中，我们将创建一个完全独特的 Divi 布局，它将使用扩展的角标签显示悬停时的内容。 事实上，我们将向您展示如何为 Divi 中一列的所有四个角设计一个扩展的角选项卡。

让我们开始吧！

抢先看

这是我们将一起构建的扩展角选项卡布局的快速浏览。 请注意悬停效果和内容如何精美对称。

免费下载布局

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

下载文件

免费下载

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

下载

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

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

让我们开始教程吧？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

从头开始创建扩展内容覆盖布局

第 1 部分：从右下角位置创建扩展角选项卡

首先，向常规部分添加一个两列（一半一半）的行。

在添加模块之前，使用自定义装订线宽度更新行设置，如下所示：

• 天沟宽度：4

对于第一个特色项目，我们将创建一个列背景图像，该图像将在列的右下方有一个角选项卡（使用模糊模块），在悬停时展开并覆盖整个列/图像。

让我们从添加一个模糊模块开始。

添加模糊模块

向第 1 列添加一个模糊模块。

我们还不会设计它的样式。 我们基本上需要一些内容，以便我们可以设置包含简介的列的样式。

第 1 列设置

定位到位后，打开行设置，然后单击以编辑第 1 列设置。 然后更新以下内容：

• 背景图片 [插入图片]
• 背景图片尺寸：实际尺寸

注意：在我的示例中，我使用的是从 Brewery Layout Pack 中获取的透明背景啤酒图像。 它们是 128 像素 x 359 像素，这就是我使用图像的实际大小的原因。

第 1 列边框

• 圆角：10px 右下角
• 右边框宽度：2px
• 右边框颜色：#e94558
• 底部边框宽度：2px
• 底部边框颜色：#e94558

自定义 CSS 和溢出

在高级选项卡下，将以下自定义 CSS 添加到主元素：

height: 400px;

更新内容如下：

• 水平溢出：隐藏
• 垂直溢出：隐藏

这个自定义高度是必要的，以便我们的模糊模块（角选项卡）扩展列的整个高度。 并且需要隐藏溢出，以便我们可以隐藏列外的大部分模糊模块，直到悬停状态。

添加模糊模块内容

现在我们准备开始自定义第 1 列中的模糊模块。打开模糊设置并更新以下内容：

• 名称：芒果IPA
• 身体：

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• 图像：添加用于列背景的相同图像

设计 Blurb 模块

在悬停时为模糊提供背景颜色，如下所示：

• 背景颜色（桌面）：透明
• 背景颜色（悬停）：rgba(255,255,255,0.9)

在设计选项卡下，更新以下内容：

• 图像/图标放置：左
• 标题字体：Oswald
• 标题字体样式：TT
• 标题文字大小：40px
• 正文字体粗细：半粗体
• 正文颜色（桌面）：透明
• 正文颜色（悬停）：#121212

• 图片宽度：100px（桌面），64px（手机）
• 内容宽度：100%
• 高度：100%
• 填充（桌面）：顶部 15%，底部 15%，左侧 8%，右侧 8%
• 填充（悬停）：顶部 8%，底部 8%，左侧 8%，右侧 8%

• 圆角（默认）：20px 左上角
• 圆角（悬停）：左上角 10px
• 顶部边框宽度：4px（桌面），2px（悬停）
• 顶部边框颜色：#e94558
• 左边框宽度：4px（桌面），2px（悬停）
• 左边框颜色：#e94558

转换选项（桌面）

• 变换缩放 Y 轴：50%
• 变换比例 X 轴：50%
• 变换平移 Y 轴：50%
• 变换平移 X 轴：30%
• 变换原点：右下角

变换选项（悬停）

• 变换缩放 Y 轴（悬停）：100%
• 变换缩放 X 轴（悬停）：100%
• 变换平移 Y 轴（悬停）：0%
• 变换平移 X 轴（悬停）：0%

为了将模糊图像翻转到右侧，请将以下自定义 CSS 添加到模糊内容框：

direction: rtl

注意：方向“rtl”代表“从右到左”，它切换内容的默认顺序（从左到右）。

结果

让我们从右下角位置查看扩展角选项卡的最终结果。 注意它在悬停时如何扩展以填充整个列。

第 2 部分：从左下角位置创建扩展角选项卡

复制列

要从左下角位置创建扩展角选项卡，我们可以通过复制整个列来快速启动设计。 打开行设置并复制第 1 列。然后删除多余的列，这样您就只有两个完全相同的重复项。

更新第 2 列设置

接下来，打开第 2 列的设置并更新以下内容：

• 圆角：左下角 10px
• 右边框宽度：0px
• 左边框宽度：2px
• 左边框颜色：#e94558

更新模糊设置

接下来，更新 Blurb 设置如下：

• 文字对齐：右
• 圆角（桌面）：20px 右上角
• 圆角（悬停）：10px 右上角
• 左边框宽度：0px
• 右边框宽度：4px（桌面），2px（悬停）
• 右边框颜色：#e94558

• 变换平移 X 轴（桌面）：-30%
• 变换原点（桌面）：左下角

然后确保删除 Blurb Content 框中的自定义 CSS。

结果

这是结果。 注意这个是如何与第一个对称的，并从列的左下角位置扩展。

第 3 部分：从右上角位置创建扩展角选项卡

现在我们准备开始我们的最后两个扩展角标签设计。 为了抢先一步，让我们复制包含我们已经设计好的宣传语的整行。

更新第 1 列设置

接下来打开重复行的设置，然后打开第 1 列的设置并更新以下内容：

• 圆角 10px 右上角
• 底部边框宽度：0px
• 顶部边框宽度：2px
• 顶部边框颜色：#e94558

更新模糊模块设置

接下来，打开模糊模块的设置并更新以下内容：

• 圆角（桌面）：20px 左下角
• 圆角（悬停）：左下角 10px
• 顶部边框宽度：0px
• 底部边框宽度：4px（桌面），2px（悬停）
• 底部边框颜色：#e94558
• 变换平移 Y 轴（桌面）：-50%
• 变换原点：右上角

模糊自定义 CSS

现在我们只能看到blurb 模块的左下部分，它不像上面一行中的其他两个blurb 那样显示我们的标题。 为了在选项卡内显示标题，我们需要使用一些自定义 CSS 将标题重新定位到简介的左下角。

将以下自定义 CSS 添加到 Blurb 标题框中：

position: absolute;
bottom: 0;
left: 15px;

然后将以下 CSS 添加到 Blurb 内容框：

direction: rtl;
height: 100%;

第 4 部分：从左上角位置创建扩展角选项卡

对于我们的第四个也是最后一个扩展角选项卡悬停效果，我们将其放置在左上角以完成整个网格布局的对称设计。

更新第 2 列设置

在行设置下，打开第 2 列的设置并更新以下内容：

• 圆角：左上角 10px
• 底部边框宽度：0px
• 顶部边框宽度：2px
• 顶部边框颜色：#e94558

更新模糊设置

接下来，打开第 2 列中的模糊设置并更新以下内容：

• 圆角（桌面）：20px 右下角
• 圆角（悬停）：10px 右下角
• 顶部边框宽度：0px
• 底部边框宽度：4px（桌面），2px（悬停）
• 底部边框颜色：#e94558

然后更新转换选项：

• 变换平移 X 轴（桌面）：-30%
• 变换原点：左上角

模糊自定义 CSS

然后将以下自定义 CSS 添加到 Blurb Title 框中：

position: absolute;
bottom: 0%;
right: 0%;

然后将以下 CSS 添加到 Blurb Content 框中：

height: 100%;

第 4 部分：完成布局的设计

部分背景颜色

添加部分背景颜色如下：

• 背景颜色：#efefef

添加标题

要创建标题，请在两行中间添加一行并将文本模块添加到一列行。

添加内容：“季节性”。

然后更新以下设置：

• 标题 2 字体：Merriweather
• 标题 2 字体粗细：粗体
• 标题 2 字体样式：TT
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#999999
• 标题 2 文字大小：50 像素（桌面）、30 像素（平板电脑）、24 像素（手机）
• 标题 2 字母间距：1em
• 填充：左 50 像素（桌面）、左 30 像素（平板电脑）、左 24 像素（手机）

最后结果

使用扩展的角选项卡查看布局的最终​​结果。

这是移动设备上的设计。

最后的想法

此布局设计中的扩展角标签肯定适用于您想要在 Divi 网站上展示的各种内容。 您也不必使用所有四个角。 例如，您可以仅使用右上角的选项卡为图像创建网格布局，以在悬停时显示内容。 这个设计功能很丰富。 玩得开心。

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

干杯!