如今，渐变背景几乎是您遇到的每个现代网站的一部分。 但是，一旦您想创建更复杂的渐变，您可能会倾向于使用图像编辑软件。 有了 Divi，就有了另一种选择。 多亏了 Divi 的许多内置选项，您可以将图像模块变成模糊的背景。 我们会将背景模糊到只有颜色可以透过的程度，从而形成渐变。 我们将从头开始重新创建一个漂亮的示例，并免费共享设计示例 JSON 文件！
让我们开始吧！
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载模糊背景布局
要掌握免费的模糊背景布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
方法
- 我们将三个不同的模块添加到一列中； 两个图像模块和一个 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
间距
添加一些自定义上边距。
将分隔模块添加到第 1 列
能见度
我们在第 2 列中需要的第二个模块是分频器模块。 确保启用了“显示分隔线”选项。
线
转到设计选项卡并更改线条颜色。
将文本模块 #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 的图像。
浆纱
转到设计选项卡并更改尺寸设置。
- 强制全宽：是
- 高度：320 像素
间距
通过添加一些负上边距来创建此模块和前一个模块之间的重叠。
过滤器
接下来，我们将更改过滤器设置。 这是我们将图像变成模糊背景的部分。
- 饱和度：200%
- 亮度：145%
- 对比度：117%
- 模糊：40px
变换比例
为了确保图像覆盖列的整个宽度，我们将在变换设置中增加大小。 由于我们添加到行设置中的隐藏列溢出，没有什么会超过列容器。
将 CTA 模块添加到第 2 列
添加内容
第二列中我们需要的下一个也是最后一个模块是 CTA 模块。 输入您选择的一些副本。
添加链接
转到链接设置并添加按钮链接 URL 以使按钮显示在设计中。
删除背景颜色
也删除背景颜色。
标题文本设置
继续转到设计选项卡并更改标题文本设置。
- 标题标题级别：H3
- 标题字体：Poppins
- 标题文字大小：40px
- 标题字母间距：-1px
正文文本设置
修改正文文本设置。
- 正文字体：Poppins
- 正文字体粗细：Light
- 车身线高：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 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。