如何在 Divi 中使用 CTA 和悬停叠加创建响应式图像网格布局

响应式网格布局非常适合展示带有链接（或 CTA）的图像集合，因为它们在每个设备上看起来都不错。 Divi builder 有一些很棒的内置模块，它们使用网格显示，包括 Portfolio Grid、Blog Grid 和 Gallery Grid。 但有时您可能希望使用 CTA 构建自己的自定义图像网格布局。 这使您可以更好地控制要为每个网格项目显示的设计和内容，而无需求助于插件。

今天，我们将向您展示如何使用 Divi 的内置设计选项使用 CTA 创建响应式图像网格布局。 为此，我们将在如何使用专业部分组织网格并使用号召性用语模块为每个图像添加叠加层方面发挥创意。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

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

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

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

在 Divi 中使用 CTA 和悬停叠加创建响应式图像网格布局

第 1 部分：创建特殊部分布局

首先，添加一个具有三分之一三分之二左侧边栏布局的新专业部分。

删除默认的常规部分，以便只保留新的专业部分。

打开部分设置并更新背景颜色如下：

• 背景颜色：#84dbda

在设计选项卡下，更新大小、宽度和填充选项如下：

• 均衡柱高：是
• 使用自定义装订线宽度：是
• 天沟宽度：1
• 内宽：100%
• 内部最大宽度：1080 像素（桌面），500 像素（平板电脑和手机）
• 填充：12vh 顶部，12vh 底部
• 第 1 列填充：顶部 0px，底部 0px

在部分样式到位后，向该部分添加一列行。

行设置

更新行设置如下：

• 天沟宽度：1
• 均衡柱高：是
• 填充：0px 顶部，0px 底部

要创建第二行，请复制第一行。

然后使用两列布局更新重复行。

第 2 部分：将图像添加为列背景图像

现在所有的行和列都已就位，我们准备将图像添加到我们的网格布局中。 为了确保图像在网格布局中具有响应性，我们将把每个图像作为背景图像添加到整个部分的四列中的每一列。 因为每张背景图片都会有一个“封面”的背景大小，所以在调整浏览器大小时，图片总是会填满整列。

顶行列背景图像

首先，打开顶行列的列设置。

然后向该列添加背景图像。

底行列背景图像

接下来，打开第二（底部）行中第 1 列的设置，并向该列添加背景图像。

然后，将背景图像添加到同一行的第 2 列。

特殊部分第 1 列背景图像

最后，打开专业部分的设置并将背景图像添加到第 1 列。

第 3 部分：向每列添加图像叠加号召性用语

现在我们的背景图像已添加到网格布局的每一列，我们将向每一列添加一个号召性用语模块，该模块将用作带有按钮 CTA 的图像的叠加层。 使用号召性用语模块作为列背景图像顶部的叠加层，您可以轻松地向图像添加自定义背景叠加层样式和悬停效果。 此外，它还为您提供了在图像上添加自定义 CTA 的选项。 在本示例中，我们将简单地使用“号召性用语”模块上的按钮元素，但您也可以使用内容选项轻松添加到按钮上方的标题或正文内容。

创建号召性用语模块

要添加第一个图像叠加号召性用语，请将号召性用语模块添加到顶行的列中。

内容

更新号召性用语的内容如下：

• 删除标题文字
• 删除正文
• 按钮链接网址：#
• 背景颜色：透明（桌面），rgba（255,235,77,0.5）（悬停）

注意：为按钮链接 URL 添加“#”现在只是一个填充物，以便按钮显示。 在悬停时添加半透明背景颜色将为您提供一个很好的自定义覆盖颜色，当悬停在模块（及其背后的图像）上时。

按钮样式

继续更新按钮的号召性用语设计设置，如下所示：

• 为按钮使用自定义样式：是
• 按钮文字大小：22px
• 按钮文字颜色：#ffeb4d
• 按钮背景颜色：#000（桌面），#ec5f00（悬停）
• 按钮边框宽度：0px
• 按钮边框半径：100px
• 按钮字体：流沙
• 按钮字体粗细：半粗体
• 按钮填充：顶部 0.5em，底部 0.5em，左侧 2em，右侧 2em

调整大小、填充和边框

接下来，我们需要确保我们的模块有一定的高度来暴露它后面的列背景图像。 为此，我们将在模块的顶部和底部添加一些填充。 我们还将为模块添加一个微妙的边框，以便使其与网格布局中的其他图像稍微分开。

更新以下内容：

• 宽度：100%
• 填充：15vh 顶部，15vh 底部
• 底部边框宽度：5px
• 左边框宽度：5px
• 边框颜色：rgba(255,255,255,0.5)

注意：使用 vh 长度单位进行填充将使填充值相对于浏览器视口高度。 因此，您的图像网格项目将随着浏览器窗口高度的增加和减少而增加和减少。

垂直居中 CTA 内容

为了确保号召性用语模块中的内容保持垂直居中，我们可以使用 flex 属性添加一小段自定义 CSS。

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

display:flex;
flex-direction:column;
justify-content:center;

将号召性用语覆盖添加到其他列

既然第一个号召性用语模块已设置样式，请将模块复制并粘贴到整个布局中的其他 3 列，包括底行的 2 列和专业部分的第 1 列。

要确保号召性用语模块跨越专业部分中第 1 列的整个高度，请将 min-height 更新为 100%。

• 最小高度：100%

通常，这不适用于普通列中的模块。 但是，由于列上的 flex 属性，模块本质上是一个 flex 子元素，因此 100% min-height 值将起作用。

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

最后结果

这是实时页面上响应式图像网格布局的最终​​结果。

这是悬停效果。

以下是调整浏览器大小时设计的响应方式。

最后的想法

响应式图像网格布局仍然是许多网站的流行方面。 背景图像提供的视觉方面与号召性用语叠加层相结合，可以真正使那些重要的导航链接弹出。 此外，图像网格布局的响应特性在所有设备上看起来都很棒，这始终是必需的。 希望它为您的下一个项目提供帮助。

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

干杯!