WordPress divi主题

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

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

抢先看

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

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

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

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

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

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

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

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

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

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

  • 背景颜色:#84dbda

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

fiverr建站WordPress程序员

在设计选项卡下,更新大小、宽度和填充选项,如下所示:

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

部分样式到位后,向部分添加一列行。

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

行设置

更新行设置如下:

独立站选品工具
  • 天沟宽度:1
  • 均衡柱高:是
  • 内边距:0px 顶部,0px 底部

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

高质量外链购买

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

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

顶行列背景图像

首先,打开顶行中列的列设置。

然后在列中添加背景图像。

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

底行列背景图像

接下来,打开第二(底)行中第 1 列的设置,并将背景图像也添加到该列。

JasperAI 10000字免费额度试用

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

专业部分第 1 列背景图片

最后,打开专业部分的设置,在第一列添加背景图片。

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

WordPress备份工具updrafplus

第 3 部分:将图像叠加层号召性用语添加到每一列

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

创建号召性用语模块

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

内容

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

  • 删除标题文本
  • 删除正文
  • 按钮链接地址:#
  • 背景颜色:透明(桌面)、rgba(255,235,77,0.5)(悬停)

注意:为按钮链接 URL 添加“#”现在只是一个填充符,以便显示按钮。 在悬停时添加半透明背景颜色将在悬停在模块(及其后面的图像)上时为您提供很好的自定义叠加颜色。

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

按钮样式

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

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

大小、填充和边框

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

更新以下内容:

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

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

垂直居中 CTA 内容

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

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

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

将号召性用语叠加层添加到其他列

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

为确保号召性用语模块跨越专业部分第 1 列的整个高度,请将最小高度更新为 100%。

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

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

最后结果

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

带有 CTA 和悬停覆盖的 divi 响应式图像网格布局

这是悬停效果。

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

最后的想法

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

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

干杯!