如果您熟悉 Photoshop 等图像编辑软件,您可能也熟悉蒙版。 面具可帮助您将两层结合在一起并创造出独特的效果。 使用 Divi,您可以发挥创意,并使用渐变背景和背景图像在页面内创建自己的蒙版。 在本教程中,我们将逐步向您展示如何为您正在处理的任何类型的设计创建 8 种不同的背景蒙版。 本教程将帮助您对页面进行快速设计调整,而无需使用任何图像编辑软件。
让我们开始吧!
预览
在我们深入教程之前,让我们快速浏览一下不同屏幕尺寸的结果。
让我们开始创作吧!
订阅我们的 Youtube 频道
添加新部分
间距
向您的页面添加一个新部分,打开部分设置并添加一些自定义顶部和底部填充。
- 上边距:150px
- 底部填充:150px
添加新行
立柱结构
继续使用以下列结构添加新行:
将 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 次。 将四个重复项放在该行的第二列中,并将三个放在第一列中。
修改模糊模块#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%
- 在背景图像上方放置渐变:是
背景图片
接下来继续添加背景图像。
- 背景图片位置:左上角
- 背景图像重复:无重复
间距
并为模块添加一些自定义填充以使其成形。
- 上边距:350px
- 底部填充:100px
- 左填充:200 像素(台式机和平板电脑),50 像素(手机)
- 右内边距:50px
修改模糊模块#4
渐变背景
进入第二列的第二个模块! 打开模糊模块的设置并添加渐变背景。
- 颜色1:rgba(255,255,255,0)
- 颜色2:#ffffff
- 渐变类型:径向
- 径向:顶部
- 起始位置:45%
- 结束位置:45%
- 在背景图像上方放置渐变:是
背景图片
接下来继续添加背景图像。
- 背景图像位置:顶部中心
- 背景图像重复:无重复
间距
并通过在间距设置中添加自定义填充值来完成设计。
- 上边距: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 的内置选项发挥创意。 更具体地说,我们使用径向背景和背景图像来创建背景蒙版。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!