WordPress divi主题

为 Divi 下载 10 个免费的流体部分背景图像

| 5月 18, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们开始吧!

预览

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

流体部分背景

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

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

重新创建部分

添加新的常规部分

间距

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

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

流体部分背景

添加新行

立柱结构

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

流体部分背景

浆纱

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

WordPress divi主题
  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

流体部分背景

间距

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

  • 上边距:312px
  • 底部填充:312px
  • 列左填充:50px
  • 列右填充:50px

流体部分背景

添加文本模块

添加内容

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

流体部分背景

H2 文本设置

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

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

流体部分背景

文字设置

更改整体文本设置。

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

流体部分背景

浆纱

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

fiverr建站WordPress程序员
  • 宽度:58%(桌面)、100%(平板电脑和手机)
  • 模块对齐:中心

流体部分背景

添加按钮模块

添加副本

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

流体部分背景

按钮对齐

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

流体部分背景

独立站选品工具

按钮设置

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

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

流体部分背景

流体部分背景

间距

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

流体部分背景

高质量外链购买

流体部分背景 #1

流体部分背景

部分渐变背景

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

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

流体部分背景

部分背景图像

上传’流体风格-1.png‘ 文件,您可以在下载文件夹中找到该文件并将其与以下背景设置相结合:

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:中心

流体部分背景

JasperAI 10000字免费额度试用

行渐变背景

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

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

流体部分背景

流体部分背景 #2 & #3

流体部分背景

部分渐变背景

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

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

流体部分背景

WordPress备份工具updrafplus

部分背景图像

上传’流体风格2.png‘ 或者 ‘流体风格3.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:中心

流体部分背景

行渐变背景

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

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

流体部分背景

流体部分背景 #4

流体部分背景

部分渐变背景

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

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

流体部分背景

部分背景图像

上传’流体风格4.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:中心

流体部分背景

行渐变背景

最后,使用以下设置添加行渐变背景:

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

流体部分背景

流体部分背景 #5

流体部分背景

部分渐变背景

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

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

流体部分背景

部分背景图像

然后,上传’流体风格5.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:中心

流体部分背景

行渐变背景

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

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

流体部分背景

流体部分背景 #6

流体部分背景

部分渐变背景

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

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

流体部分背景

部分背景图像

上传’流体风格6.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:中心

流体部分背景

行渐变背景

最后但同样重要的是,添加行渐变背景叠加。

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

流体部分背景

流体部分背景 #7

流体部分背景

部分渐变背景

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

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

流体部分背景

部分背景图像

上传’流体风格7.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

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

流体部分背景

行渐变背景

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

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

流体部分背景

流体部分背景 #8

流体部分背景

部分渐变背景

将以下蓝色渐变背景应用于您的部分:

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

流体部分背景

部分背景图像

上传’流体风格8.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

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

流体部分背景

行渐变背景

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

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

流体部分背景

流体部分背景 #9

流体部分背景

部分渐变背景

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

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

流体部分背景

部分背景图像

上传’流体风格9.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

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

流体部分背景

行渐变背景

最后但同样重要的是,使用行渐变背景增加内容的可读性。

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

流体部分背景

流体部分背景 #10

部分渐变背景

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

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

流体部分背景

部分背景图像

上传’流体风格-10a.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合:

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

流体部分背景

行渐变背景

接下来添加行渐变背景。

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

流体部分背景

行背景图像

也将背景图像添加到您的行。 寻找 ‘流体风格-10b.png‘ 在下载文件夹中,上传并结合以下背景设置:

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

流体部分背景

预览

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

流体部分背景

最后的想法

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题