如何使用 Divi 创建美丽的模糊背景

如今，渐变背景几乎是您遇到的每个现代网站的一部分。 但是，一旦您想要创建更复杂的渐变，您可能倾向于使用图像编辑软件。 有了 Divi，还有另一种选择。 由于 Divi 具有许多内置选项，您可以将图像模块变成模糊背景。 我们会将背景模糊到只有颜色显示出来的程度，从而形成渐变。 我们将从头开始重新创建一个漂亮的示例，并免费共享设计示例 JSON 文件！

让我们开始吧！

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载模糊背景布局

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

下载文件

免费下载

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

下载

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

方法

• 我们将三个不同的模块添加到一列； 两个图像模块和一个 CTA 模块
• 第一张图片保持其初始外观
• 第二张图像将变得模糊并增大尺寸
• 我们还将通过使用图像模块中包含的其他过滤器设置来增强颜色
• CTA 模块将重叠模糊的图像模块并将其用作其背景
• 为了确保 Image Module #2 的模糊和大小增加不会超过列容器，我们将隐藏列溢出

让我们开始重建

订阅我们的 YouTube 频道

添加新部分

首先向您正在处理的页面添加一个新的常规部分。

添加新行

列结构

继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并在设计选项卡中更改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 最大宽度：100%

第 2 列溢出

移至高级选项卡并使用一行 CSS 代码隐藏第 2 列溢出。 这样做将帮助我们确保没有超出列容器的内容。 一旦我们开始将图像模块转换为模糊背景并增加其大小，这将变得尤为重要。

overflow: hidden;

第 3 列溢出

对第三列做同样的事情。

overflow: hidden;

将文本模块 #1 添加到第 1 列

添加 H2 副本

是时候开始添加模块了，从第一列中的文本模块开始。 输入您选择的一些 H2 含量。

H2 文本设置

转到设计选项卡并更改 H2 文本设置。

• 标题 2 字体：Poppins
• 标题 2 文本颜色：#232323
• 标题 2 文字大小：40px

间距

添加一些自定义上边距。

• 最高利润率：9vw

将分频器模块添加到第 1 列

能见度

我们在第 2 列中需要的第二个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

移至设计选项卡并更改线条颜色。

• 线条颜色：#000000

将文本模块 #2 添加到第 1 列

添加内容

继续添加另一个带有您选择的段落内容的文本模块。

文字设置

接下来更改文本设置。

• 文字字体： Poppins
• 文字字体粗细：轻
• 文字大小：17px
• 文本行高：2.1em

将按钮模块添加到第 1 列

添加副本

我们在第 1 列中需要的下一个也是最后一个模块是按钮模块。 输入您选择的一些副本。

按钮设置

转到设计选项卡并在按钮设置中设置按钮样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：20px
• 按钮文字颜色：#000000
• 按钮背景颜色：#f4f4f4
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字体： Poppins
• 按钮字体粗细：粗体
• 按钮字体样式：大写

间距

添加一些自定义间距值。

• 上边距：20px
• 下边距：20px
• 顶部填充：20px
• 底部填充：20px
• 左填充：50px
• 右填充：50px

将图像模块 #1 添加到第 2 列

上传 1:1 图片

进入第二列！ 在这里，我们需要的第一个模块是图像模块。 上传比例为 1:1 的图片。 这意味着您的图像必须是一个完美的正方形（宽度应等于高度）。

浆纱

转到设计选项卡并启用“强制全角”选项。

• 强制全角：是

将图像模块 #2 添加到第 2 列

上传 1:1 图片

我们在第 2 列中需要的第二个模块是另一个图像模块。 我们再次使用比例为 1:1 的图像。

浆纱

转到设计选项卡并更改大小设置。

• 强制全角：是
• 高度：320px

间距

通过添加一些负上边距在此模块和上一个模块之间创建重叠。

• 上边距：-100px

过滤器

接下来，我们将更改过滤器设置。 这是我们将图像变成模糊背景的部分。

• 饱和度：200%
• 亮度：145%
• 对比度：117%
• 模糊：40px

变换比例

为了确保图像覆盖列的整个宽度，我们将在变换设置中增加大小。 由于我们在行设置中添加了隐藏的列溢出，没有什么会超过列容器。

• 正确：180%
• 底部：180%

将 CTA 模块添加到第 2 列

添加内容

我们在第二列中需要的下一个也是最后一个模块是 CTA 模块。 输入您选择的一些副本。

添加链接

转到链接设置并添加按钮链接 URL 以使按钮显示在设计中。

删除背景颜色

也删除背景颜色。

• 使用背景颜色：否

标题文字设置

继续转到设计选项卡并更改标题文本设置。

• 标题标题级别：H3
• 标题字体: Poppins
• 标题文字大小：40px
• 标题字母间距：-1px

正文设置

还要修改正文设置。

• 正文字体： Poppins
• 正文字体重量：轻
• 车身线条高度：2.2em

按钮设置

随着按钮设置。

• 为按钮使用自定义样式：是
• 按钮文字大小：20px
• 按钮文字颜色：#ffffff
• 渐变颜色 1：rgba(244,244,244,0.4)
• 渐变色 2：rgba(255,255,255,0)
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字体： Poppins
• 按钮字体粗细：粗体
• 按钮字体样式：大写

• 上边距：50px
• 顶部填充：20px
• 底部填充：20px
• 左填充：50px
• 右填充：50px

间距

最后但并非最不重要的一点是，通过添加一些负上边距，在此模块和模糊背景之间创建重叠。 我们还在模块的左侧和右侧留下了一些空白

• 上边距：-250px
• 左填充：2vw
• 右填充：2vw

克隆第 2 列中的所有模块并在第 3 列中放置重复项

完成第二列中的所有模块后，您可以克隆它们并将重复项放在第三列中。

更改重复图像模块 #1

更改图像

更改图像模块 #1 中的图像。

更改重复图像模块 #2

更改图像

对列中的第二个图像模块执行相同操作。

更改过滤器设置

并修改第二个图像模块的过滤器设置。

• 饱和度：180%
• 亮度：102%
• 对比度：117%
• 模糊：35px

更改重复的 CTA 模块

更改副本

继续更改 CTA 模块的内容。

更改按钮渐变背景

随着第一个按钮渐变颜色，你就完成了！

• 渐变色 1：rgba(244,244,244,0.15)

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项创建模糊背景。 我们从头开始重新创建了一个漂亮的示例，您可以将其用于您创建的任何类型的网站。 我们希望本教程能激发您使用本教程中分享的技巧创建自己的定制设计。 如果您有任何问题或建议，请务必在下方评论区留言！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。