你想为你的英雄部分使用面具和图案吗？ Divi ?
Divi 的新面具和背景图案 是我们迄今为止最酷的新设计功能之一。 每个蒙版和图案都可以与其他背景元素（如颜色、图像和渐变）组合，只需单击几下即可实现无数独特的组合。
今天给大家介绍一下使用方法 Divi 及其新的面具和背景图案来设计一个英雄部分。
在本教程中，我们将介绍创建蒙版和背景图案所需的重要步骤。
我们甚至会展示如何定位背景图像以适应面具设计。 这应该给你 工具 您需要在几分钟内为您的网站创建完美的英雄版块。
概观
下面是我们将在本教程中创建的设计的快速浏览。
带有白色面具和图案的英雄示例部分。
这是同一英雄部分的深色版本，带有黑色面具和图案。
有了这个设计，您只需单击几下即可轻松更改面罩和面罩位置！
使用 Divi Builder 创建新页面
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi 生成器
然后点击 开始建设 (从头开始)
之后，您将有一个空白画布开始设计 Divi.
如何在您的英雄部分使用 Divi 的面具和背景图案
1.创建布局结构
对于这个英雄部分，我们将使用经典的布局结构，左侧是标题和号召性用语，右侧是图像（或视觉设计）。
对于这个例子，我们的视觉设计将使用 Divi 的背景选项创建。 但在我们进入细节之前，我们需要创建一个两列的行来节省页面右侧的空间，以展示我们的部分背景蒙版和图案设计。
2.添加标题和号召性用语
在左列（第 1 列）中，为您的主标题添加一个 Text 模块，为您的副标题文本添加一个 Text 模块，为您的按钮添加一个 Button 模块。
3.给截面添加垂直间距
为了使我们的背景设计看起来又高又漂亮，我们需要为该部分添加垂直高度。 一种简单的方法是在该部分的顶部和底部添加填充。 请记住，一旦列垂直堆叠，我们需要调整平板电脑和手机屏幕上的填充，以便为我们的背景设计腾出空间。
打开部分设置。 在设计选项卡下，按如下方式更新填充：
- 填充：
- 台式机：顶部 20vw，底部 20vw
- 平板电脑：顶部 8vw，底部 48vw
- 电话：顶部 8vw，底部 70vw
4.添加背景图片和渐变
接下来，我们可以为该部分添加背景图像和渐变。 请记住，背景图像的主要焦点将显示在该部分的右侧，因此请使用您想要在右侧看到的图像。
对于此示例，我们使用的是带有城市天际线的图像。 图像的右侧有更近、更好看的建筑物，因此效果非常好。
在标签下 背景图，在版块背景上传图片。
在 Divi 中，您可以轻松地在背景图像上添加颜色渐变。 在选项卡下 背景渐变，将以下渐变添加到该部分的背景中：
- 梯度停止：
- 0%：#3e22ff
- 100%：透明
- 背景图像上方的方形渐变：是
5.为该部分创建背景图案
现在我们已经准备好背景图像和渐变，我们可以添加背景图案来完成设计。
在这个例子中，我们将使用一个微妙的图案，只是增加一点纹理，让它看起来更独特。
在标签下 背景图案，更新以下内容：
- 背景图案：簇绒
技巧： 对于背景图案，通常最好保持微妙。 尝试对较小的设计使用自定义尺寸，然后降低颜色不透明度。
6.为该部分创建背景蒙版
有了我们的背景图案，我们终于准备好为我们的设计测试一个全新的背景蒙版。 有很多选项和变体可供选择。 在本例中，我们将使用蜂窝面罩。
在标签下 背景遮罩，更新以下内容：
- 面具：蜂窝
- 面具颜色：#ffffff
- 尺寸：封面
7.调整背景图片位置
由于我们使用背景蒙版，我们的背景图像的一部分被蒙版（或“蒙版”）。
在此示例中，我们将确保图像的右下角最明显，并将其向右移动一点以显示更多建筑物。
在图像选项卡下，更新以下内容：
- 背景图片位置：右下角
- 背景图像水平偏移：-4vw
8.使用混合模式
使用所有这些背景元素获得创意的一种方法是添加混合模式。 混合模式可以添加到任何背景选项中，它们可以用于以创造性的方式混合多个背景层（图像、渐变、蒙版等）。
在本例中，我们将背景图像与渐变色混合。 为此，请单击选项卡 背景图 并添加混合模式以将渐变颜色与背景图像混合如下：
- 背景图像混合：相乘
9.调整手机背景遮罩
确保背景蒙版设计在移动设备上看起来也很重要，这一点很重要。 幸运的是，内置选项使这个过程更容易。
请记住，我们已经在平板电脑和手机上添加了额外的填充，以便为我们的背景设计腾出空间。
现在我们需要做的就是使用背景变换和纵横比选项来调整移动遮罩。
在标签下 背景遮罩，启用响应选项并更新以下内容：
平板电脑版
- 蒙版变换：垂直翻转、水平翻转、旋转
- 蒙版纵横比：正方形
手机版
- 蒙版变换：垂直翻转、水平翻转、旋转
- 蒙版纵横比：纵向
结果
查看我们迄今为止创建的设计。
台式电脑
平板版
手机版
10.创建一个黑暗版本
如果您想要此设计的深色版本，只需将背景蒙版颜色更改为深色（如黑色）。
然后将图案的颜色更改为黑色。
然后将标题和副标题文本更改为白色。 您可能还想更新按钮颜色。
这就是黑暗版本的样子。
最终结果
也可以看看： Divi：如何自定义博客的“阅读更多”链接
再来看看我们的最终结果。
立即下载 DIVI！！！
结论
为您设计一个英雄部分 网站Web 很有趣 面具和背景图案 由迪维。 背景选项很容易更改以获得完美的设计。 您还可以使用许多其他选项（例如混合模式）来创建更加独特的背景。
此外，您可以将蒙版和图案添加到任何 Divi 元素，而不仅仅是部分。 所以祝您体验愉快！
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
