如何在 Divi 中设计自定义图像叠加

已发表: 2020-09-16

图像叠加在网页设计中已经存在很长时间了。它们非常适合通过将鼠标悬停在图像上时显示其他内容和设计元素来吸引访问者。因为这是一个如此流行的设计功能，所以有许多插件专门用于创建图像叠加。但是，根据插件的不同，它们可能相当有限，或者对于您可能需要的东西来说可能有点矫枉过正。这就是为什么拥有在 Divi 中自己构建这些的专业知识会有所帮助。

在本教程中，我们将向您展示如何在 Divi 中设计自定义图像叠加。当鼠标悬停在图像上时，这些叠加层会改变并显示元素。最好的部分是您可以使用 Divi 的内置设计选项完全控制图像叠加的设计。而且，通过一些自定义 CSS 片段，您可以拥有一些华丽的图像叠加层，将您的网站提升到一个新的水平。不需要插件。

让我们开始吧！

抢先看

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

免费下载 Divi 图像叠加布局

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

下载文件

免费下载

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

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

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

单击导入按钮。

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

然后点击导入按钮。

分区通知框

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

让我们进入教程，好吗？

你需要什么开始

扩展角标签

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

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

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

在 Divi 中创建自定义图像叠加

构建节、行和列

首先，在默认部分中创建一个三列行。

div 图像叠加

打开部分设置并添加以下背景颜色：

背景颜色：#3a0ca3

div 图像叠加

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

CSS 类：et-overlay-container
水平溢出：隐藏
垂直溢出：隐藏

需要 CSS 类来触发我们将要构建的覆盖项目的悬停效果。隐藏溢出是需要的，因为我们将有一个悬停效果，将图像缩放到列容器之外。

div 图像叠加

添加图像

现在部分、行和列都准备好了，继续向第 1 列添加一个新的图像模块。这将是我们叠加设计背后的主要图像。

div 图像叠加

上传更像肖像而不是风景的图像。我使用的是大约 800 像素 x 1050 像素的一个。确保它的宽度足以跨越所有浏览器尺寸的列的整个宽度。

（注意：您可以使用横向图像，但您可能需要相应地调整叠加元素的位置，以免它们重叠。）

div 图像叠加

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

边距：0px 底部

div 图像叠加

在高级选项卡下，添加以下 CSS 类：

CSS 类：et-overlay-image

div 图像叠加

使用分隔模块添加图像叠加颜色

为了创建图像叠加颜色，我们将使用一个分隔模块。这个想法是通过使分隔线跨越列的整个高度和宽度来创建图像覆盖，使其完美地位于图像上。就位后，就可以调整分隔模块的背景颜色，得到我们想要的叠加颜色。

首先，在图像下添加一个分隔模块。

div 图像叠加

然后将分隔线定位为绝对分隔线，使其位于图像的顶部：

位置：绝对

div 图像叠加

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

显示分隔线：否
背景颜色：rgba(247,37,133,0.8)

div 图像叠加

然后更新分隔线的高度和宽度：

宽度：100%
高度：100%

div 图像叠加

设计到位后，将以下 CSS 类添加到分隔符：

et-overlay-item

（注意：此类应添加到您只想在悬停时显示的所有叠加设计元素中。如果您不希望该元素最初被隐藏，请将其省略。）

div 图像叠加

为了帮助跟踪设计元素/模块，打开图层模式，并标记分隔模块（“叠加颜色”）。

div 图像叠加

添加叠加标题文本

在分隔模块下，添加一个新的文本模块。这将作为我们的覆盖标题文本，在悬停时出现在图像的顶部。

div 图像叠加

使用 H2 标题更新内容：

<h2>Coaching</h2>

然后更新文本模块的标签，供以后参考。

div 图像叠加

在文本设计设置下，更新以下内容：

文本对齐：居中
文字颜色：浅

div 图像叠加

标题 2 字体：Cormorant Garamond
标题 2 字体粗细：粗体
标题 2 文字大小：40px

div 图像叠加

宽度：100%
最大宽度：85%

div 图像叠加

在高级选项卡下，更新位置如下：

位置：绝对
位置：顶部中心
垂直偏移：10%

（注意：垂直偏移可能需要根据图像纵横比的大小进行调整。例如，横向图像可能需要较少的偏移）

div 图像叠加

接下来，将以下 CSS 类添加到文本模块：

CSS 类：et-overlay-item 下移

除了“et-overlay-item”类之外，我们还添加了一个额外的“下移”类，以便使用自定义 CSS 在悬停时稍微向下移动标题。

div 图像叠加

创建叠加正文

要创建覆盖正文，我们可以复制用于覆盖标题的文本模块。在我们更新副本的设置之前，将标签更改为“overlay body”。

div 图像叠加

打开新文本模块的文本设置，用几句段落文本更新正文内容。

div 图像叠加

在高级选项卡下，将模块的绝对位置更改为居中。

div 图像叠加

由于我们不希望这个在悬停时移动（只出现），更新 CSS Class 以只包含以下内容：

CSS 类：et-overlay-item

div 图像叠加

创建叠加按钮

此图像上的最后一个叠加元素将是按钮。要创建按钮，请在“正文文本”文本模块下添加一个新的按钮模块。

div 图像叠加

在更改设计之前，更新按钮的位置如下：

位置：绝对
垂直偏移：10%

div 图像叠加

现在按钮应该在图像的底部居中。

在高级选项卡中，更新 CSS 类并将自定义 CSS 片段添加到主元素，如下所示：

CSS 类：et-overlay-item move-up
主要元素 CSS：
```
min-width: 15em
```

请注意，按钮上添加了一个额外的类，以便在悬停时将其稍微向上移动。这是为了补充悬停时标题文本的向下移动。

div 图像叠加

然后更新以下设计设置：

按钮对齐：居中
按钮文字大小：14px
按钮背景颜色：#4361ee
按钮边框宽度：0px
按钮字母间距：0.1em
按钮字体粗细：粗体
按钮字体样式：TT
填充：顶部 0.8em，底部 0.8em，左侧 0px，右侧 0px

div 图像叠加

使用代码模块添加自定义 CSS

在我们创建此叠加设计的其他几个版本之前，让我们添加叠加悬停效果所需的自定义 CSS。为此，请在按钮下添加一个代码模块。

div 图像叠加

然后将以下 CSS 粘贴到代码内容中。不要忘记将代码包装在必要的脚本标签中。

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

div 图像叠加