Divi 的新背景设置现在可以实现 10 个背景设计技巧

自从 Divi 新的后台选项界面发布后，Divi 变得更加强大。 新功能开辟了许多新的设计可能性。 今天，我将介绍一些你可能不知道的新设计技巧，希望我能激励你创造一些很棒的背景设计。

您可以使用 Visual Builder 创建无数的背景设计组合和混合。 我为这篇文章确定的 10 个技巧只会触及皮毛，但它们旨在向您介绍不同的概念并激发您的兴趣。 大多数这些设计技巧都是使用新的背景选项完成的，例如新的渐变背景选项以及将背景图像与渐变颜色相结合。

不过我必须警告你。 一旦您开始深入研究背景选项，您可能永远不会退出！ 真是太有趣了。 嗯，至少对我来说是这样。

享受。

这是设计技巧的先睹为快

如何关注这篇文章

每次我解释一个新的设计技巧时都不必从头开始，我对其中的大多数使用了相同的示例设计，并为该设计添加了不同的技巧。 这意味着大多数示例都要求您完成先前的设计技巧，然后才能使用新技巧。 技巧 #1-9 都遵循相同的基本设置，并且需要技巧 #1 作为先决条件。 因此，如果您正在测试这些功能，我建议您从技巧 #1 开始。

Divi 的 10 个背景设计技巧

订阅我们的 YouTube 频道

技巧#1：对角叠加

添加一个全角部分，然后插入一个全角头模块。

然后更新头模块设置如下：

内容选项

标题：[输入标题]
副标题：[输入副标题]
标志图片网址：[输入标志]
背景渐变色：rgba(12,113,195,0.55), rgba(255,255,255,0)
渐变类型：线性
梯度方向：135deg
起始位置：60%
最终位置：60%（任何 60% 或以下的都可以）

由于渐变在同一点开始和结束，因此基本上没有渐变效果发生。 所以结果是 60% 标记每侧的两种颜色。 这与渐变方向的角度相结合产生了这种效果。

设计选项

文字颜色：浅
标题字体：默认、粗体 (B)、大写 (TT)
标题字体大小：40px
副标题字体大小：24px

高级选项

在 Main Element 框中的 Custom CSS 下，添加以下 CSS：

Padding: 150px 0;

这只是在头模块的顶部和底部添加一些额外的填充

保存设置

现在是时候为您的全角部分添加背景了。 单击紫色控制框中的齿轮图标，转到“全宽部分设置”。

然后更新部分设置内容选项如下：

背景图片：[在此处输入背景图片。 它应该至少有 1960 像素宽。 我从 unsplash.com 中选择了这张图片并对其进行了裁剪，以便图片的突出部分位于右侧。]
使用视差效果：是（这是可选的，但我认为它与对角叠加效果很好）
视差法：真视差

就是这样！ 您可以根据自己的喜好随意调整渐变颜色的不透明度和渐变方向的程度。

我认为我们有一个良好的开端。 让我们继续第二个技巧。

技巧#2：分层对角叠加

这个设计技巧是技巧#1 的延续，所以在继续之前确保你已经完成技巧#1。

在技​​巧 #1 中，我们使用 Fullwidth Header Module 中的背景渐变选项停止了对角线叠加。

使用相同的示例，向全角部分添加额外的背景渐变。 我们已经为该部分提供了背景图像，但是通过 Divi 的新选项，我们可以将渐变颜色与您的背景图像结合，然后将它们与某些效果混合。

转到全宽部分设置并更新以下内容选项：

背景渐变色：rgba(131,0,233,0.38), rgba(255,255,255,0)
渐变类型：线性
渐变方向：135deg（与标题模块中的其他渐变方向相同）
起始位置：38%
结束位置：38%

现在单击背景图像图标并更改以下内容：

使用视差效果：否
背景图像混合：相乘

现在您有 2 个重叠的对角叠加层，可以轻松定制独特的背景设计。

技巧 #3：圆形叠加

这个设计技巧是技巧#1 的延续，所以在继续之前确保你已经完成技巧#1。

现在，我们要将 Trick #1 中的对角叠加层变成圆形叠加层。 为此，请转到全宽模块设置并更新以下内容：

内容选项

背景渐变类型：径向
径向：中心
起始位置：30%
结束位置：30%

设计选项

文字和标志方向：中心

现在检查新的标题背景。

这个技巧创建了漂亮的标题或号召性用语。 圆形叠加层的大小可以轻松调整，并且可以很好地响应不同的屏幕尺寸。 现在我在背景图像上使用半透明渐变色，但如果没有背景图像，这看起来会很棒。

这是一个没有背景图像和较暗文本颜色的示例。

技巧 #4：分层圆形叠加层以创建圆形边框

这是 Trick #3 的延续，在那里我们停止向全角标题模块添加圆形覆盖。 一旦您的圆形叠加层就位，我们可以添加第二个圆形叠加层作为第一个的边框。 我们通过向位于全宽标题模块后面的全宽部分添加另一个背景渐变来做到这一点。

转到全角部分设置并更新以下内容：

内容选项

在背景图像选项卡下：

使用视差效果：否
背景图像混合：相乘

在背景渐变选项卡下：

背景渐变色：rgba(0,0,0,0.45), rgba(255,255,255,0)
背景渐变类型：径向
径向：中心
起始位置：34%
结束位置：34%

保存设置

就是这样。

您还可以通过调整起始位置的百分比轻松更改背景渐变圆的大小。

技巧#5：反圆叠加

这是 Trick #3 的延续，它在全角标题模块中留下了一个圆形覆盖。 现在圆圈是半透明的蓝色，背景图像的其余部分根本没有渐变叠加颜色。 对于这个技巧，我将把它切换出来并反转圆形叠加层，这样半透明的蓝色渐变叠加层将围绕圆圈，圆圈内部将暴露其背后的背景图像。

为此，请转到全角标题设置并更新以下内容：

内容选项

背景渐变色：rgba(255,255,255,0), rgba(12,113,195,0.79)

注意：您在这里真正要做的就是交换左侧和右侧的颜色。 现在透明颜色显示在圆圈内，蓝色渐变围绕它。 我会增加蓝色的不透明度，使其更暗一些。

一探究竟…

技巧 #6：带有视频背景的反圆叠加

这是 Trick #5 的延续，它给我们留下了一个带有周围蓝色背景的反圆覆盖。 目前，圆圈在其后面暴露了一个背景图像。 您可以轻松添加视频背景以位于此圆形叠加层后面。 我建议使用不太分散注意力的视频。 此外，每当您使用视频时，请确保文件大小较小，这样您的页面加载时间就不会受到影响。

要用视频替换背景图像，请转到全角部分设置，单击
背景视频图标并添加您的视频。

现在转到全角标题设置并更新以下内容：

内容选项

背景渐变颜色：rgba(12,113,195,0.67), #333333

使用新的渐变颜色，背景视频仅在圆圈内可见。 叠加的颜色确实使文本流行起来。

技巧#7：偏心倒圆叠加

这是 Trick #5 的延续，它给我们留下了一个反圆覆盖。 如果您返回全角页眉设置，您可以将径向方向调整为不同的设置，从而为页眉创建不同的外观。

转到 Fulwidth Header Settings 并更新以下内容：

内容选项

径向：右

设计选项

文字和标志方向：左

这是最终结果和几个不同径向的例子：

这些例子显然需要一些工作，但你明白了。

技巧 #8：使用渐变来实现阴影效果

这个技巧可能不会令人瞠目结舌，但它非常有用。 对于我们这些不想费心使用像 Photoshop 这样的照片编辑器为您的图像添加阴影的人来说，这是给您的。

这是技巧 #1 的延续，它使用全宽标题模块中的背景渐变选项以对角线叠加的方式结束。 现在让我们将半透明的蓝色叠加层更改为一些从图像左侧开始并逐渐淡出到右侧的深色阴影。 这样，右侧图像的主要部分保持不变，左侧的暗影有助于使文本更具可读性。

要添加阴影效果，请转到全角标题设置并更新以下内容：

内容选项

背景渐变颜色：rgba(0,0,0,0.55), rgba(0,0,0,0)
梯度方向：90度
起始位置：38%
结束位置：85%

这是结果。

技巧 #9：背景图像混合

Divi 的新背景选项包括用于自定义图像的 CSS 混合模式。 探索不同的图像混合非常有趣，并且往往会创造出一些令人惊讶的设计。 对于那些不是设计师的人，您不必知道饱和度或亮度的定义就可以利用这些很酷的选项。 您需要将背景颜色或渐变设置与背景图像结合起来才能看到所有很酷的效果（仅使用背景图像是行不通的）。 然后四处玩耍，直到获得您想要的外观。 结果可能会让你大吃一惊。

对于此示例，我将继续使用“全角标题模块”中的背景渐变选项，从技巧 #1 继续使用对角线叠加。

转到全角标题设置并删除内容选项下的背景渐变。

保存设置

现在转到“部分设置”并更新以下内容：

内容选项

背景渐变颜色：rgba(0,0,0,0.76), #0c71c3
梯度方向：90度
起始位置：50%
结束位置：50%

您还看不到任何更改。 没关系。 转到背景图像选项卡并更新以下内容：

使用视差效果：否
背景图像混合：强光

就是这样。 检查结果。

注意：此处使用的颜色将根据您使用的背景图像创建不同的效果。 所以我建议尝试使用颜色和混合选项，直到你得到你喜欢的颜色。

技巧 #10：分层为渐变背景添加更多颜色。

默认情况下，每个部分、行、列和模块都可以有两种颜色渐变。 但是，当您将它们组合起来并将它们叠加在一起时，您可以为渐变背景创建 5 种颜色。 当这 5 种颜色混合在一起时，您可以创建一个非常酷的光谱。

这是你如何做到的。 首先，添加一个具有 1 列结构行的常规部分。 然后在行内，添加一个 Blurb 模块。

更新 Blurb 模块设置如下：

内容选项

标题：[输入标题]
内容：[输入内容]

设计选项

文字颜色：浅
文字方向：居中
标题字体：默认，粗体（B）
标题字体大小：56px
正文字体大小：22px
自定义填充：顶部 100 像素，底部 100 像素

由于宣传文字是白色背景上的白色，您还看不到它，但这没关系。 你很快也会的。 是时候开始添加渐变颜色了。

我们将从后到前，从左到右工作。 首先，转到“部分设置”并更新以下内容：

内容选项

背景渐变颜色：#ff0077、#0c71c3
梯度方向：90度
起始位置：0%
结束位置：30%

设计选项

自定义填充： 0px 顶部，0px 底部

现在让我们更新我们的下一级渐变颜色——我们的行。 转到行设置并更新以下内容：

内容选项

背景渐变颜色：rgba(255,255,255,0), #8300e9
梯度方向：90度
起始位置：25%
结束位置：50%
第 1 列背景渐变颜色：rgba(255,255,255,0), #e02b20
梯度方向：90度
起始位置：50%
结束位置：75%

设计选项
使这一行全宽：是
使用自定义装订线宽度：是
天沟宽度：1
自定义填充：0px 顶部，0px 底部

保存设置

现在对于最后一层渐变，我们需要转到 Blurb 模块并更新以下内容：

内容选项
背景渐变颜色：rgba(255,255,255,0), #edf000
梯度方向：90度
起始位置：75%
结束位置：100%

设计选项

自定义填充：顶部 100 像素，底部 100 像素

就是这样。 现在你有五种渐变颜色混合在一起，创建了一个非常丰富多彩的背景。

别忘了，您还可以将渐变类型更改为径向（圆形）并完全更改设计（大约需要 20 秒）。

如果您将所有图层（部分、行、列和模糊模块）的渐变类型更改为径向，您将得到类似的结果。

奖励技巧

下面是一个示例，说明如何使用视差对背景图像进行分层。 这是一个带有使用 True Parallax 的背景图像的常规部分。 该部分内部是一个 1 列行，该行是全宽的，没有填充，因此它会拉伸该部分的整个宽度。 在该行中，我使用 CSS 视差方法添加了一个带有一些渐变圆圈（应该看起来像气泡）的透明背景图像。 然后我在具有透明背景的行中添加了一个 Call to Action Module。 当向下滚动页面上的部分时，这种组合会产生移动。

这个技巧有点复杂，因为它需要在 Divi 之外创建自定义照片。 我只是希望向您展示可能性。

再举几个例子

我将用我在测试本文中提到的相同技巧时构建的一些设计示例来结束本文。

最后的想法

我希望您喜欢探索这些新的背景选项，并对它们带来的可能性感到兴奋。 而且，由于这些选项可用于部分、行、列和模块，因此您可以在网站的任何部分应用这些设计技巧。 如果您还没有，请花一些时间深入挖掘，让这些创意源源不断。 我相信，如果您花时间为自己探索背景选项，您会很高兴在下一个项目中实现它们。 我迫不及待想看看你想出了什么。

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