您想使用 Divi 的蒙版和背景图案叠加吗？
与最后 背景蒙版和背景图案功能的版本 的 Divi，您可以为您的 网站Web. 英雄部分是你的第一部分 网站Web 这是你的第一件事 游客 滚动之前请参阅 网站Web，所以引人注目很重要！
本文将向您展示如何创建五个独特的背景蒙版和图案叠加层，您可以将它们应用于背景图像以创建真正令人惊叹的英雄部分。
本教程将涵盖创建每个英雄部分所需的基本步骤，并为您提供在几分钟内为您的网站创建引人注目的英雄部分所需的工具。
让我们开始吧！
概观
这是我们今天将在本文中创建的五个英雄部分的快速概述。
立即下载DIVI！！！
这些设计是微妙的，简单的，但有影响力。
另请参阅： Divi：如何使用“渐变生成器”美化您的图像
使用 Divi Builder 创建新页面
要开始，您需要执行以下操作：
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi Builder
然后点击 开始建设 (从头开始)
之后，您将有一块空白画布可以开始在Divi中进行设计。
应用于背景图像的背景蒙版和图案叠加的五个示例
首先，让我们创建英雄部分
我们所有的示例设计都使用相同的部分、行和列结构，所以现在让我们设置它们。
1.创建布局结构
在页面中添加一行，然后单击绿色的“+”图标以显示列结构并选择第一列，即全角列。
2.添加节距
现在我们已经定义了行和列，是时候为该部分添加一些间距了。
在“间距”选项卡上，更新以下内容：
- 桌面：400 像素（顶部和底部）
- 平板电脑：200 像素（顶部和底部）； 25px（左右）
- 手机：50 像素（顶部和底部）； 25px（左右）
英雄部分设计#1
让我们设计第一个英雄部分。
立即下载DIVI！！！
1.添加标题文字
单击灰色的“+”图标以调出模块库。 滚动到文本并单击以加载。
输入标题文本，然后在选项卡下 标题文字，配置这些设置：
- 标题字体：Work Sans
- 文字颜色：白色#ffffff
- 标题文字大小：
- 桌面：3 em
- 平板电脑：2,2 厘米
- 电话：1.4em
2.添加按键模块
添加一个按钮并配置这些设置：
- 在标签下 内容s: 了解更多
- 在标签下 对准，选择：居中
- 点击 为按钮使用自定义样式 然后配置：
- 按钮文字大小：
- 桌面：20px
- 平板电脑：16px
- 电话：14px
- 按钮文字颜色：#ffffff
- 背景：#1d1d1d
- 按钮边框宽度：0
- 边界半径：0
- 字母间距：3 分
- 按钮字体：Work Sans
- 字体样式：TT
- 按钮文字大小：
3.添加背景图片
现在我们的 内容 配置完成后，就可以开始设计该部分的背景了。
- 转到背景切换并单击第三个选项卡，图像选项卡，然后单击“添加背景图像”。
- 这将打开您的媒体库，您可以在其中选择一张照片或上传一张新照片。
- 选择照片后，单击右下角的“上传图像”按钮。
4.添加背景图案
现在我们已经设置了背景图像，让我们添加一个图案。
- 在标签中 背景, 导航到第 5 个选项卡，选项卡 背景图案，然后单击“添加背景图案”。
- 选择 簇绒 从下拉菜单中配置这些设置：
- 图案颜色 - rgba(255,255,255,0.31)
- 模式变换：无
- 尺寸：实际尺寸
- 图案重复原点：顶部底部
- 模式重复：重复
- 混合模式：正常
5.添加背景蒙版
现在我们已经设置了背景图像和图案，让我们添加一个背景蒙版。
- 在标签中 背景, 导航到第 6 个选项卡，该选项卡 背景遮罩，然后单击“添加背景蒙版”。
- 选择 豆 从下拉菜单中配置这些设置：
- 蒙版颜色：rgba(0,0,0,0.36)
- 蒙版纵横比：水平矩形
- 尺寸：拉伸填充
所以 ！ 你现在有一个设计精美的英雄部分。
Section Hero #2 设计
现在让我们设计第二个英雄部分。
1.添加背景图片并将混合模式设置为叠加
选择您的背景图像，将混合模式设置为叠加并添加 rgba (10,10,10,0.64) 的叠加颜色。
2.添加背景图案
现在我们已经设置了背景图像，让我们添加一个背景图案。
- 在“背景”选项卡中，转到第 5 个选项卡，该选项卡 背景图案，然后单击“添加背景图案”。
- 选择 簇绒 从下拉菜单中配置这些设置：
- 图案颜色 - rgba(255,255,255,0.09)
- 模式变换：无
- 尺寸：封面
- 图案重复原点：左上角
- 模式重复：重复
- 混合模式：正常
3.添加背景蒙版
现在我们已经设置了背景图像和图案，让我们添加一个背景蒙版。
- 在标签中 背景, 导航到第 6 个选项卡，该选项卡 背景遮罩，然后单击“添加背景蒙版”。
- 选择 插入符号 从下拉菜单中配置这些设置：
- 蒙版颜色：rgba(0,0,0,0.36)
- 蒙版变换：无
- 纵横比：水平矩形
- 面罩尺寸：拉伸填充
- 蒙版混合模式：正常
Section Hero #3 设计
现在让我们设计第三个英雄部分。
1.添加背景图片并将混合模式设置为叠加
选择您的背景图像，将混合模式设置为叠加并添加 rgba (10,10,10,0.39) 的叠加颜色。
2.添加背景图案
现在我们已经设置了背景图像，让我们添加背景图案。
- 在标签中 背景, 导航到第 5 个选项卡，该选项卡 背景图案，然后单击“添加背景图案”。
- 选择 斜条纹 2 从下拉菜单中配置这些设置：
- 图案颜色 - rgba(0,0,0,0.06)
- 模式变换：无
- 尺寸：实际尺寸
- 图案重复原点：左上角
- 模式重复：重复
- 混合模式：正常
3.添加背景蒙版
现在我们已经添加了背景图像和图案，让我们添加背景蒙版。
- 在标签中 背景, 导航到第 6 个选项卡，该选项卡 背景遮罩，然后单击“添加背景蒙版”。
- 选择 三角形 从下拉菜单中配置这些设置：
- 蒙版颜色：rgba(10, 10, 10, 0,61)
- 蒙版变换：无
- 纵横比：水平矩形
- 面罩尺寸：拉伸填充
- 蒙版混合模式：正常
Section Hero #4 设计
现在让我们设计英雄的第四部分。
1.添加背景图片
选择您的背景图像。
2.添加背景图案
现在我们已经添加了背景图像，让我们添加背景图案。
- 在标签中 背景, 导航到第 5 个选项卡，该选项卡 背景图案，然后单击“添加背景图案”。
- 选择 微笑 从下拉菜单中配置这些设置：
- 图案颜色 - rgba(0,0,0,0.2)
- 模式变换：无
- 尺寸：封面
- 重复原点：左上角
- 模式重复：重复
- 图案混合模式：正常
3.添加背景蒙版
现在我们已经应用了背景图像和图案，让我们添加一个背景蒙版。
- 在标签中 背景, 导航到第 6 个选项卡，该选项卡 背景遮罩，然后单击“添加背景蒙版”。
- 选择 角湖 从下拉菜单中配置这些设置：
- 蒙版颜色：rgba(10, 10, 10, 0,61)
- 蒙版变换：水平
- 纵横比：水平矩形
- 尺寸：封面
- 蒙版位置：左中
- 蒙版搅拌机模式：正常
3.配置线路参数
在我们开始之前，这个英雄部分有独特的线条样式。 让我们设置一下。
- 浆纱：
- 宽度：80%
- 最大宽度：800px
- 行对齐：
- 桌面：默认
- 平板电脑：中心
- 电话：中心
- 边距：
- 左：20vw
Section Hero #5 设计
现在让我们设计第五个英雄部分。
立即下载DIVI！！！
1.添加背景图片
选择您的背景图像。
2.添加图案
现在我们已经设置了背景图像，让我们应用背景图案。
- 在标签中 背景, 导航到第 5 个选项卡，该选项卡 背景图案，然后单击“添加背景图案”。
- 选择 十字架 从下拉菜单中配置这些设置：
- 图案颜色 - #ffffff
- 模式变换：无
- 尺寸：自定义尺寸
- 图案宽度：10px
- 图案高度：10px
- 重复原点：顶部底部
- 模式重复：重复
- 图案混合模式：正常
3.添加背景蒙版
现在我们已经应用了背景图像和图案，让我们添加一个背景蒙版。
- 在标签中 背景, 导航到第 6 个选项卡，该选项卡 背景遮罩，然后单击“添加背景蒙版”。
- 选择 对角药丸 从下拉菜单中配置这些设置：
- 蒙版颜色：rgba(10, 10, 10, 0,61)
- 蒙版变换：水平
- 纵横比：水平矩形
- 尺寸：封面
- 面罩位置：左中
- 蒙版混合模式：正常
3.配置线路参数
在我们走之前，这个英雄部分也有独特的线条样式。 让我们设置一下。
- 浆纱：
- 宽度：80%
- 最大宽度：800px
- 行对齐：
- 桌面：默认
- 平板电脑：中心
- 电话：中心
- 间距：
- 边距（右）：18vw
也可以看看： Divi：如何将蒙版和背景图案添加到标题
结论
使用新选项可以轻松为您的网站设计独特且引人注目的英雄部分 背景和图案蒙版 由迪维。 每个功能都有许多选项，可让您创建真正有创意的背景。
此外，您可以为任何 Divi Builder 项目添加背景图案和蒙版！ 设计选择是无穷无尽的。
希望这项技术能为未来的项目增加另一种有用的设计技能。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
