如何在 Divi 中创建背景图像边框设计

在构建网站时，边框和背景图像仍然是流行的设计资产。 使用正确的背景图像可以为您的网站增添个性和风格，而无需在自定义图形上花费时间和金钱。 边框有助于为您的内容添加结构。

今天，我们将通过将背景图像设计为边框来将这两种资产结合在一起。 Divi 有一组有用的选项可用于自定义背景图像，这使得为独特的边框设计设计背景图像变得容易。 这使我们能够以各种创造性的方式组合颜色、渐变、框阴影和混合模式。

让我们开始吧。

抢先看

这是我们将一起构建的背景图像边框设计。

免费下载布局

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

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

让我们进入教程好吗？

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 用于模拟内容的图像

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

创建背景图像边框设计的一般提示

在我们开始构建之前，这里有一些在创建背景图像边框设计时要记住的一般提示。

#1 选择具有大量纹理的图像

大多数情况下，您会希望边界更窄。 这意味着您将无法看到大部分图像。 因此，使用具有大量纹理的图像会有所帮助。 例如，您可以使用风景照片、一束鲜花或城市高层建筑的照片。 这是我在本教程中使用的一些图像。

#2 对背景图像边框使用渐变和透明度

背景图像有时可以独立作为您内容的绝佳边框。 但大多数时候，您会想要为背景图像添加一些叠加层以获得某种颜色，或者使背景更暗或更亮。 背景渐变是为背景图像添加叠加层并创建独特边框设计的好方法。

#3 使用混合模式

在背景图像上使用混合模式可以为边框设计实现独特的颜色和纹理。 您需要做的就是在背景图像中添加背景颜色或渐变，然后为背景图像选择混合模式。 一些很棒的背景图像边框混合模式是颜色、亮度、乘法和屏幕。

对独特形状使用圆角选项

并非所有边框都需要有直边。 稍微搅拌一下！ Divi 的圆角选项允许您以创造性的方式塑造这些角。

使用视差背景图像作为边框

视差的伟大之处在于它使设计充满活力。 另外，如果您在边框设计中使用具有视差的背景图像，您可以创建突出的微妙运动并使您的内容流行。

在 Divi 中设计背景图像边框

现在我们了解了创建背景图像边框设计背后的一般思想，让我们一起设计一些。 我们将构建 4 种不同的设计。 每个都有一个基本的简介模块作为模拟内容。 我们将使用列设置为模块添加背景图像边框。

让我们从我们的第一个设计开始。

背景图像边框设计 #1

第一个设计具有窄背景图像边框，带有框阴影，使其看起来更像是内容的框架。

这是设计它的方法。

首先，将两列行添加到常规部分。

添加模糊模块

然后在左栏中添加一个模糊模块。

设置好背景信息后，打开背景信息设置并取出默认图像，以便只有标题和正文内容可见。

接下来，给你的宣传语一个白色的背景颜色。

然后更新简介设计设置如下：

• 标题字体：Oswald
• 正文字体：Lato
• 边距顶部 5%，底部 5%，左侧 5%，右侧 5%
• 填充：顶部 7%，底部 7%，左侧 10%，右侧 10%
• 圆角：右上20px，左下20px
• 盒子阴影：见截图

将背景图像添加到列

这照顾我们的模糊模块。 现在让我们添加我们的背景图像边框。 为此，我们将向包含模糊模块的列添加背景图像。 打开行设置，然后打开第 1 列的设置并添加以下背景：

• 背景图片：[上传您选择的图片]
• 背景颜色：#303a7a
• 背景图像混合：亮度

然后更新圆角和框阴影如下：

• 圆角：右上20px，左下20px
• 盒子阴影：见截图

最后结果

现在看看最终的设计。

背景图像边框设计 #2

下一个设计强调了使用具有大量纹理的图像如何真正制作出漂亮的边框，尤其是当您将它们与图像混合模式结合使用时。

这是设计它的方法。

添加模糊模块

为了创建设计，我们将把简介添加到包含设计 #1 的同一行的第 2 列。 继续复制设计#1 中的blurb 模块并将其粘贴到第2 列中。然后更新blurb 模块设置如下：

• 圆角：恢复默认
• 边距：顶部 10%，底部 10%，左侧 10%，右侧 10%
• 填充：顶部 15%，底部 15%，左侧 10%，右侧 10%
• 边框宽度：1px
• 边框颜色：#ffffff

将背景图像添加到列

使用我们的模块，打开行设置并向第 2 列添加背景渐变。

• 背景渐变左颜色：#f7e0a5
• 背景渐变右颜色：rgba(237,240,0,0.79)
• 梯度方向：90度
• 起始位置：50%
• 结束位置：0%

然后添加具有漂亮颜色混合效果的背景图像。

• 背景图片：【上传图片】
• 背景图像混合：颜色

如您所见，颜色混合模式保留了图像后面两种渐变颜色的亮度，以创建具有柔和色彩的精美图像边框设计。

最后结果

查看设计的最终结果。

背景图像边框设计 #3

下一个设计重点介绍了在边框设计中使用视差图像。 我们还将使用框阴影技巧为视差图像创建颜色叠加。

这是设计它的方法。

对于初学者，在第一行下方添加一个新的两列行，然后从顶行第 1 列的模糊中复制模糊模块并将其粘贴到新行的第 1 列中。

然后更新blurb模块如下。

• 背景颜色：#333344
• 文字颜色：浅
• 边距：顶部 10%，底部 10%，左侧 10%，右侧 10%
• 填充：顶部 10%，底部 10%
• 圆角：20px
• 盒子阴影：无

当模糊就位时，打开行设置并更新第 1 列的设置，如下所示：

• 背景图片：【上传图片】
• 使用视差效果：是
• 视差法：真视差
• 圆角：20px
• 盒子阴影：见截图

现在，默认情况下，带有视差的背景图像边框有点霸道，可能会分散内容的注意力。

为了使具有视差的背景图像更亮，我们可以在模糊中添加一个框阴影，作为灯光叠加。

再次打开模糊设置并添加以下内容：

• 盒子阴影：见截图
• 框阴影模糊强度：0px
• 框阴影传播强度：200px
• 阴影颜色：#ffffff

最终设计

现在让我们看看最终的设计。

背景图像边框设计 #4

对于下一个设计，我们将结合背景图像和渐变作为模糊内容的顶部和底部边框。

添加模糊模块

首先，复制顶行第 2 列中的模糊模块并将其粘贴到第二行的第 2 列中。

完成后，更新模糊模块设置如下：

• 边框：[通过恢复边框默认值取出边框]
• 盒子阴影：无
• 边距：顶部 5%，底部 5%，左侧 0%，右侧 0%

添加背景图像边框

要为此设计添加背景图像边框，请打开行设置并更新第 2 列的设置，如下所示：

• 背景图片：【上传图片】
• 背景渐变左颜色：#141777
• 背景渐变右颜色：#ffb7eb
• 梯度方向：90度
• 起始位置：50%
• 结束位置：0%

• 背景图片：【上传图片】
• 背景图像混合：亮度

最终设计

查看最终设计。

最后的想法

使用 Divi 创建背景图像边框是一种为您的设计增添美感和个性的简单方法。 本教程中的设计旨在展示 Divi 中用于制作独特边框设计的关键选项。 但是，由于有所有不同的颜色组合和混合模式可用，您唯一的限制就是您的想象力。 所以，抓住一些你自己的图像，为你的下一个项目探索新的和令人兴奋的边框设计。

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

干杯!