WordPress divi主题

如何使用渐变背景作为 Divi 的背景图像蒙版

by | May 15, 2022 | Divi主题使用教程 | 0 comments

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

如果您熟悉 Photoshop 等图像编辑软件,您可能也熟悉蒙版。 面具可帮助您将两层结合在一起并创造出独特的效果。 使用 Divi,您可以发挥创意,并使用渐变背景和背景图像在页面内创建自己的蒙版。 在本教程中,我们将逐步向您展示如何为您正在处理的任何类型的设计创建 8 种不同的背景蒙版。 本教程将帮助您对页面进行快速设计调整,而无需使用任何图像编辑软件。

google广告开户

让我们开始吧!

预览

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

背景图像蒙版

让我们开始创作吧!

订阅我们的 Youtube 频道

添加新部分

间距

向您的页面添加一个新部分,打开部分设置并添加一些自定义顶部和底部填充。

  • 上边距:150px
  • 底部填充:150px

背景图像蒙版

添加新行

立柱结构

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

背景图像蒙版

WordPress divi主题

将 Blurb 模块添加到 #1

添加内容

是时候开始添加模块了! 我们总共需要 8 个 Blurb 模块。 我们将从第一个开始,进行一般更改,然后将其克隆 7 次,然后对每个 Blurb 模块进行独特的更改。 在第一列添加一个新的 Blurb Module 并添加一些选择的内容。

背景图像蒙版

文字设置

转到设计选项卡,然后更改文本设置。

  • 文本方向:中心
  • 文字颜色:深色

背景图像蒙版

标题文本设置

同时打开标题文本设置并进行更改。

  • 标题字体:Antic Didone
  • 标题文字大小:23px
  • 标题行高:1.5em

背景图像蒙版

盒子阴影

最后,为 Blurb 模块添加一个微妙的盒子阴影。

  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:-10px
  • 阴影颜色:rgba(0,0,0,0.3)

背景图像蒙版

克隆 Blurb 模块 7 次并在第二列中放置 4 个重复项

完成所有整体更改后,您可以继续克隆 Blurb 模块 7 次。 将四个重复项放在该行的第二列中,并将三个放在第一列中。

背景图像蒙版

fiverr建站WordPress程序员

修改模糊模块#1

渐变背景

现在我们可以开始为每个 Blurb 模块添加独特的设置。 打开第 1 列中的第一个 Blurb Module 并为其添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:底部
  • 起始位置:45%
  • 结束位置:45%
  • 在背景图像上方放置渐变:是

背景图像蒙版

背景图片

添加渐变背景后,您也可以添加背景图像并将其与以下背景设置结合使用:

  • 背景图像位置:顶部中心
  • 背景图像重复:无重复

背景图像蒙版

间距

最后但并非最不重要的一点是,为所有内容添加一些自定义填充。

独立站选品工具
  • 上边距:100px
  • 底部填充:350px
  • 左填充:50px
  • 右内边距:50px

背景图像蒙版

修改模糊模块#2

渐变背景

让我们继续下一个 Blurb 模块(第二列中的第一个模块)并添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:右上
  • 起始位置:45%
  • 结束位置:45%
  • 在背景图像上方放置渐变:是

背景图像蒙版

背景图片

继续添加与下面的背景设置相结合的背景图像。

  • 背景图片位置:右上角
  • 背景图像重复:无重复

背景图像蒙版

高质量外链购买

间距

并通过在间距设置中添加自定义填充值来完成设计。

  • 上边距:350px
  • 底部填充:100px
  • 左填充:50px
  • 右内边距:200 像素(台式机和平板电脑),50 像素(手机)

背景图像蒙版

修改模糊模块#3

渐变背景

转到第三个 Blurb 模块(第一列中的第二个 Blurb 模块)。 打开设置并添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:左上
  • 起始位置:45%
  • 结束位置:45%
  • 在背景图像上方放置渐变:是

背景图像蒙版

背景图片

接下来继续添加背景图像。

JasperAI 10000字免费额度试用
  • 背景图片位置:左上角
  • 背景图像重复:无重复

背景图像蒙版

间距

并为模块添加一些自定义填充以使其成形。

  • 上边距:350px
  • 底部填充:100px
  • 左填充:200 像素(台式机和平板电脑),50 像素(手机)
  • 右内边距:50px

背景图像蒙版

修改模糊模块#4

渐变背景

进入第二列的第二个模块! 打开模糊模块的设置并添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:顶部
  • 起始位置:45%
  • 结束位置:45%
  • 在背景图像上方放置渐变:是

背景图像蒙版

WordPress备份工具updrafplus

背景图片

接下来继续添加背景图像。

  • 背景图像位置:顶部中心
  • 背景图像重复:无重复

背景图像蒙版

间距

并通过在间距设置中添加自定义填充值来完成设计。

  • 上边距:350px
  • 底部填充:100px
  • 左填充:50px
  • 右内边距:50px

背景图像蒙版

修改模糊模块#5

渐变背景

进入下一个模块,即第一列中的第三个模块。 打开模块并添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:左
  • 起始位置:35%
  • 结束位置:35%
  • 在背景图像上方放置渐变:是

背景图像蒙版

背景图片

继续添加背景图像并结合以下背景设置:

  • 背景图片位置:左上角
  • 背景图像重复:无重复

背景图像蒙版

间距

并在间距设置中添加一些自定义填充值。

  • 上边距:100px
  • 底部填充:100px
  • 左填充:240 像素(台式机和平板电脑),150 像素(手机)
  • 右内边距:50 像素(台式机和平板电脑),20 像素(手机)

背景图像蒙版

修改模糊模块#6

渐变背景

进入第二列的第三个模块! 打开设置并添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:线性
  • 渐变方向:140度
  • 起始位置:60%
  • 结束位置:60%
  • 在背景图像上方放置渐变:是

背景图像蒙版

背景图片

接下来添加具有匹配背景设置的背景图像。

  • 背景图像位置:顶部中心
  • 背景图像重复:无重复

背景图像蒙版

间距

并使用间距设置中的一些自定义填充值完成设计。

  • 上边距:100px
  • 底部填充:350px
  • 左填充:50px
  • 右侧内边距:200 像素(台式机和平板电脑)、50 像素(平板电脑)

背景图像蒙版

修改模糊模块#7

渐变背景

第 1 列中的下一个 Blurb 模块使用以下渐变背景:

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:线性
  • 渐变方向:220度
  • 起始位置:60%
  • 结束位置:60%
  • 在背景图像上方放置渐变:是

背景图像蒙版

背景图片

同时添加背景图像。

  • 背景图像位置:顶部中心
  • 背景图像重复:无重复

背景图像蒙版

间距

并在间距设置中添加所需的自定义填充值。

  • 上边距:100px
  • 底部填充:350px
  • 左填充:200 像素(台式机和平板电脑),50 像素(手机)
  • 右内边距:50px

背景图像蒙版

修改模糊模块#8

渐变背景

到最后一个 Blurb 模块! 打开设置并添加渐变背景。

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:右
  • 起始位置:35%
  • 结束位置:35%
  • 在背景图像上方放置渐变:是

背景图像蒙版

背景图片

接下来上传背景图片。

  • 背景图片位置:左上角
  • 背景图像重复:无重复

背景图像蒙版

间距

并通过在模块的间距设置中添加一些自定义填充来完成设计和教程。

  • 上边距:100px
  • 底部填充:100px
  • 左填充:50px(台式机和平板电脑),20px(手机)
  • 右内边距:240 像素(台式机和平板电脑),170 像素(手机)

背景图像蒙版

预览

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

背景图像蒙版

最后的想法

在本教程中,我们向您展示了如何使用 Divi 的内置选项发挥创意。 更具体地说,我们使用径向背景和背景图像来创建背景蒙版。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!