为 Divi 下载 10 个免费的流体截面背景图像

如果您希望更新部分的外观和感觉，这可能是您的理想职位。 我们创建了 10 种不同的流体部分背景图像，您可以免费下载并在您正在构建的任何网站上使用。 最重要的是，我们还将向您展示如何将这些流体截面背景图像与 Divi 的内置选项结合起来。 您将能够为您的流体背景图像分配任何渐变背景，并将其与一行渐变背景相结合，以确保您的内容也保持可读性。

让我们开始吧！

预览

让我们先来看看 10 种不同的流体部分背景图像，您可以在文章下方进一步下载这些图像。 我们将图像与渐变背景相结合以创建独特的效果。 我们也将在这篇文章中分享每一种渐变组合，但您可以随意尝试不同的颜色以达到您想要的最终结果。

免费下载流体部分背景图片

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

下载文件

免费下载

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

下载

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

重新创建部分

添加新的常规部分

间距

下载所有图像文件后，转到您的 WordPress 网站并打开一个新页面或现有页面。 然后，使用 Divi 的 Visual Builder，添加一个新的常规部分。 打开其设置并更改间距值。

• 顶部填充：0px
• 底部填充：0px

添加新行

列结构

继续使用以下列结构向您的部分添加新行：

浆纱

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

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

也向间距设置添加一些填充值。

• 顶部填充：312px
• 底部填充：312px
• 列左填充：50px
• 列右填充：50px

添加文本模块

添加内容

是时候开始添加模块了！ 我们需要的第一个模块是文本模块。 继续向内容框中添加一些内容，最好是 H2 标题和段落。

H2 文本设置

接下来转到 H2 文本设置并应用以下更改：

• 标题 2 字体：蒙特塞拉特
• 标题 2 字体粗细：超粗体
• 标题 2 文本颜色：#FFFFFF
• 标题 2 文字大小：82 像素（桌面）、60 像素（平板电脑）、40 像素（手机）
• 标题 2 行高：1.4em

文字设置

还要更改整体文本设置。

• 文字颜色：#FFFFFF
• 文字大小：16px
• 文本行高：1.9em
• 文字方向：居中

浆纱

继续减小此模块在桌面上的宽度。

• 宽度：58%（桌面），100%（平板电脑和手机）
• 模块对齐：居中

添加按钮模块

添加副本

我们需要的第二个也是最后一个模块是按钮模块。 添加文本模块下方的模块后，添加一些副本。

按钮对齐

接下来更改按钮对齐方式。

• 按钮对齐：居中

按钮设置

然后，转到按钮设置并进行一些更改。

• 为按钮使用自定义样式：是
• 按钮文字大小：18px
• 按钮文字颜色：#000000
• 按钮背景颜色：#FFFFFF
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字母间距：-1px
• 按钮字体：蒙特塞拉特
• 字体粗细：超粗
• 字体样式：大写

间距

最后但并非最不重要的一点是，通过添加一些顶部边距在前一个模块和这个模块之间添加一些空间。

• 上边距：25px

流体部分背景 #1

部分渐变背景

为您的部分使用以下渐变背景：

• 颜色 1：#000000
• 颜色 2：#2d5b9b
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-1.png ”文件，并将其与以下背景设置组合：

• 背景图片尺寸：实际尺寸
• 背景图片位置：中心

行渐变背景

最重要的是，在您的部分背景上添加一个行渐变。 这将使文本更具可读性。 它还将帮助您为页面添加一些深度。

• 颜色 1：RGBA(0,0,0,0.67)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

流体部分背景 #2 & #3

部分渐变背景

第二和第三流体截面背景图像使用以下截面渐变背景：

• 颜色 1：#4f009e
• 颜色 2：#fa00ff
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-2.png ”或“ fluid-style-3.png ”文件，并将其与以下背景设置组合：

• 背景图片尺寸：实际尺寸
• 背景图片位置：中心

行渐变背景

添加一个微妙的行渐变背景：

• 颜色 1：RGBA(255,48,75,0.13)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

流体部分背景 #4

部分渐变背景

为您的部分使用以下渐变背景：

• 颜色 1：#00245e
• 颜色 2：#ffee00
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-4.png ”文件，并将其与以下背景设置组合：

• 背景图片尺寸：实际尺寸
• 背景图片位置：中心

行渐变背景

最后，使用以下设置添加一行渐变背景：

• 颜色 1：RGBA(0,0,0,0.37)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

流体部分背景 #5

部分渐变背景

将以下渐变背景添加到您的部分：

• 颜色 1：#04000f
• 颜色 2：#00436d
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

然后，上传您可以在下载文件夹中找到的“ fluid-style-5.png ”文件，并将其与以下背景设置相结合：

• 背景图片尺寸：实际尺寸
• 背景图片位置：中心

行渐变背景

使用以下行渐变背景完成您的设计：

• 颜色 1：RGBA(0,0,0,0.58)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

流体部分背景 #6

部分渐变背景

使用以下令人惊叹的部分渐变背景组合：

• 颜色 1：#4800ff
• 颜色 2：#c854ff
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-6.png ”文件，并将其与以下背景设置相结合：

• 背景图片尺寸：实际尺寸
• 背景图片位置：中心

行渐变背景

最后但并非最不重要的是，添加一行渐变背景叠加。

• 颜色 1：RGBA(0,0,0,0.51)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

流体部分背景 #7

部分渐变背景

将以下渐变背景设置应用于您的部分：

• 颜色 1：#ff8300
• 颜色 2：#52006b
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-7.png ”文件，并将其与以下背景设置相结合：

• 背景图片尺寸：实际尺寸
• 背景图片位置：右上角

行渐变背景

最后，在您的部分顶部添加一行渐变背景。

• 颜色 1：RGBA(106,0,198,0.34)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

流体部分背景 #8

部分渐变背景

将以下蓝色渐变背景应用到您的部分：

• 颜色 1：#0b43dd
• 颜色 2：#09f9ed
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-8.png ”文件，并将其与以下背景设置结合起来：

• 背景图片尺寸：实际尺寸
• 背景图片位置：左上角

行渐变背景

通过应用行渐变背景来完成您的设计。

• 颜色 1：RGBA(0,7,119,0.57)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：线性
• 径向：中心

流体部分背景 #9

部分渐变背景

将以下渐变背景添加到您的部分：

• 颜色 1：#051f89
• 颜色 2：#6d0272
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-9.png ”文件，并将其与以下背景设置相结合：

• 背景图片尺寸：封面
• 背景图片位置：中心

行渐变背景

最后但并非最不重要的一点是，使用行渐变背景提高内容的可读性。

• 颜色 1：RGBA(0,0,0,0.59)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

流体部分背景 #10

部分渐变背景

最后一个例子需要以下部分渐变背景：

• 颜色 1：#051f89
• 颜色 2：#6d0272
• 渐变类型：线性
• 梯度方向：137deg
• 起始位置：48%

部分背景图像

上传您可以在下载文件夹中找到的“ fluid-style-10a.png ”文件，并将其与以下背景设置组合：

• 背景图片尺寸：实际尺寸
• 背景图片位置：左上角

行渐变背景

接下来添加一行渐变背景。

• 颜色 1：RGBA(0,0,0,0.59)
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心

行背景图像

还将背景图像添加到您的行中。 在下载文件夹中找到‘ fluid-style-10b.png ’，上传并结合如下背景设置：

• 背景图片尺寸：实际尺寸
• 背景图片位置：右下角

预览

现在我们已经完成了所有步骤，让我们最后看看最终结果。

最后的想法

在这篇文章中，我们分享了 10 种不同且独特的流体部分背景图片，您可以在自己的网站上不受任何限制地使用它们。 最重要的是，我们还为您提供了令人惊叹的渐变背景，您可以仅使用 Divi 的内置选项将其与流畅的背景图像结合起来。 如果您有任何问题或建议，请务必在下面的评论部分留言，让我们知道您最喜欢哪一张流体部分背景图片！