WordPress divi主题

如何在 Divi 中混合图像以创建自定义背景设计

by | May 9, 2022 | Divi主题使用教程 | 0 comments

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

混合多个图像有助于为您的网站创建专业的背景设计。 这个想法是拍摄两个或三个单独的图像并将它们叠加在一起。 然后使用混合模式将图层混合在一起,以创建统一和谐的设计。

google广告开户

每个 Divi builder 元素都有内置的混合模式和过滤器选项,可以在 Divi builder 中轻松地混合元素。 当然,您可以在 Photoshop(或其他照片编辑器)中混合图像,但对于那些想要方便的 Divi 解决方案的人来说,这篇文章应该会有所帮助。 Divi 实际上使这很容易。 将图像放在正确的位置后,只需单击几下即可将所有图像混合在一起。 当然,您还有一系列 Divi 选项来进行最后的润色并将设计提升到新的创意高度。

让我们开始吧。

抢先看

下面是我们将共同构建的设计的快速浏览。

在divi中混合图像

免费下载布局

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

订阅我们的 Youtube 频道

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

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

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

  1. 如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 将一些模拟图像上传到媒体库以用于本教程。 我正在使用 Eye Doctor Layout Pack 中的图像。

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

如何混合多个图像以在 Divi 中创建自定义背景设计

创建节和行

要让事情顺利进行,请在常规部分添加一列行。

在divi中混合图像

使用图像模块添加图像

图片#1

行列设置好后,在行中添加图片模块。

在divi中混合图像

上传尺寸约为 500 x 700 像素的图像。 我正在使用 Eye Doctor Layout Pack 中的一个。

在divi中混合图像

上传图像后,使用 vw 长度单位为图像设置最大宽度,以便它与我们将混合在一起的其他图像很好地缩放,并将其对齐到左侧,如下所示:

  • 最大宽度:33vw
  • 模块对齐:左

在divi中混合图像

fiverr建站WordPress程序员

我们希望我们添加的下一个图像与该图像的右侧对齐,因此我们需要将该图像浮动到左侧。 为此,请将以下 CSS 添加到主元素:

float: left;

在divi中混合图像

图片 #2

接下来,在当前图像下添加一个新的图像模块。

在divi中混合图像

之后,上传一张尺寸约为 1000 像素 x 667 像素的新图片。

独立站选品工具

在divi中混合图像

然后给图像一个新的最大宽度和对齐方式。

  • 最大宽度:40vw
  • 模块对齐:右

由于第一张图像向左浮动,因此第二张图像现在应该与右侧相邻。

在divi中混合图像

我们将回来对这些图像进行最后的润色,但现在让我们跳到部分设置。

高质量外链购买

部分设置

打开部分设置并添加背景图像和渐变,如下所示:

  • 背景图片: [upload image around 1920px by 1280px]

在divi中混合图像

  • 背景渐变左颜色:rgba(1,16,63,0.64)
  • 背景渐变右颜色:rgba(12,113,195,0.82)
  • 在背景图像上方放置渐变:是

在divi中混合图像

然后稍微调整填充。

  • 填充(桌面):0px 顶部,0px 底部
  • 填充(电话):0px 顶部,10vw 底部

在divi中混合图像

JasperAI 10000字免费额度试用

行设置

部分完成后,打开行设置并更新以下内容:

  • 宽度:100%;
  • 最大宽度:100%;
  • 内边距:0px 顶部,0px 底部

在divi中混合图像

将混合模式添加到行

现在该行应该覆盖整个部分背景。 这将允许我们向行添加混合模式,以便将两个图像与部分背景混合。 为此,请添加以下混合模式。

在divi中混合图像

为什么要乘法?

多重混合模式基本上将当前图层/行(包括它包含的图像)与下面的图层(部分的背景)相乘。 考虑这种效果的一种简单方法是想象幻灯机中的两张幻灯片一个接一个地堆叠在一起。 如果您将这两个图像投影到屏幕上,您会得到两个稍微暗一点的混合。

WordPress备份工具updrafplus

垂直居中图像

这不是必需的,但如果您想确保行中的两个图像保持垂直居中,您可以在列中添加一段 CSS。 为此,请打开行设置,然后单击列设置。 然后将以下 CSS 添加到主元素。

display: flex;
align-items: center;

在divi中混合图像

对两张热门图片进行最后的润色

现在我们的两个顶级图像很好地融合在一起,但他们可以使用一些设计调整使其看起来更专业一些。 我们可以使用白框阴影来柔化图像的边缘,并使用 transform translate 将它们准确定位在我们希望它们停留的位置。

Image #1 最后润色

打开左侧图像模块的设置并更新以下内容:

  • 盒子阴影:见截图
  • 盒子阴影模糊强度:6vw
  • 盒子阴影传播强度:6vw
  • 阴影颜色:#ffffff

在divi中混合图像

  • 变换平移:5vw(X 轴),11vw(Y 轴)

在divi中混合图像

Image #2 最后润色

完成左侧图像 #1 的修饰后,打开右侧图像 #2 的设置并进行以下更改:

  • 盒子阴影:见截图
  • 盒子阴影模糊强度:3vw
  • 盒子阴影传播强度:3vw
  • 阴影颜色:#ffffff

在divi中混合图像

我们甚至可以添加一些滤镜效果来使图像融合得更好。

  • 饱和度:30%
  • 不透明度:60%

在divi中混合图像

添加文本内容

现在我们的部分已经完成,三个图像完美地融合在一起,我们可以在部分顶部添加我们的内容。 为此,请在当前部分下添加一个新部分。

在divi中混合图像

然后将一列行添加到常规部分。

在divi中混合图像

然后将一个文本模块添加到该行。

在divi中混合图像

正文内容

使用以下正文内容更新文本模块内容:

<h1>Book a Free Eye Exam</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

在divi中混合图像

文字设计

正文内容到位后,按如下方式更新设计设置:

  • 文字文字颜色:#ffffff
  • 标题字体:Poppins
  • 标题文字颜色:#ffffff
  • 标题文字大小:5vw
  • 宽度:60vw(桌面),100%(手机)
  • 保证金(桌面):-35% 顶部,35% 底部
  • 保证金(电话):-70% 顶部,70% 底部

在divi中混合图像

最终设计

这是最终的设计。

在divi中混合图像

以下是它针对不同浏览器宽度的缩放方式。

在divi中混合图像

探索更多设计选项

完成设计后,可以轻松尝试更多混合模式、滤镜、颜色和更多设计选项。 例如,如果您想将设计与新的配色方案相匹配,您需要做的就是更改该部分使用的两种背景渐变颜色。

在divi中混合图像

或者,您可以向其中一张图像添加滤镜,使其具有饱和度的黑白效果,或者稍微降低不透明度。

在divi中混合图像

最后的想法

Divi 的混合模式和过滤器选项拥有为专业背景设计混合图像所需的一切。 诀窍是使用 vw 长度单位定位图像,以便整个背景设计也能在移动设备上响应。 但是一旦图像就位,我们就可以尝试各种混合模式和无数其他设计选项来制作令人惊叹的混合设计。

我希望这篇文章能给你带来一点启发,我期待在评论中收到你的来信。

干杯!