如何创造性地将行和列背景与 Divi 的新选项结合起来

在本 Divi 教程中，我们将向您展示如何组合行和列背景选项以创建令人惊叹的结果。 通过选择正确的组合和设置，您可以实现增强网站整体外观的设计。 为了演示我们正在谈论的内容，我们制作了一个示例，我们将帮助您逐步构建。 我们仅使用 Divi 内置选项创建了此结果，因此您无需添加任何其他 CSS。

结果

如果您一步一步地按照本教程进行操作，您将能够获得以下结果：

虽然我们使用了三个不同的行来实现这个结果，但看起来它们都是更大图景的一部分。 让我们开始吧！

切换到可视化生成器

创建一个新页面并启用 Divi Builder 并切换到 Visual Builder。

创建部分

我们需要做的第一件事是创建一个新的标准部分。 我们将创建并相互组合的所有行都将成为本节的一部分。 要在行上创建框阴影效果，我们将添加以下部分渐变背景：

• 第一种颜色：rgba(61,65,86,0.59)
• 第二种颜色：#f7f7f7
• 渐变类型：径向
• 径向：底部
• 起始位置：31%
• 结束位置：76%

添加一列行

我们需要做的下一件事是向该部分添加一列行。 这一行将代表我们最终结果的以下部分：

行和列设置

使行全宽

继续并在“设计”选项卡中使行全宽。

行背景设置

然后，您可以返回“内容”选项卡并添加以下渐变背景：

• 第一种颜色：#3d4156
• 第二种颜色：rgba(114,81,114,0.91)
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：0%
• 结束位置：65%

上传背景图像（在本例中为图案）并选择“乘法”作为您的背景图像混合。

列背景设置

接下来，向下滚动并将以下渐变背景设置分配给您的行列：

• 第一种颜色：rgba(255,255,255,0.15)
• 第二种颜色：rgba(214,44,104,0)
• 列渐变类型：线性
• 列梯度方向：161deg
• 列起始位置：43%
• 柱端位置：43%

间距

继续向您的行添加以下填充：

• 顶部：20px
• 右：30px
• 左：30px

还有一些填充到您的列中：

• 顶部：200px
• 底部：200px

添加文本模块

接下来我们要做的是向该行添加一个文本模块，并对该文本模块的文本子类别进行以下更改：

• 文字字体：Playfair Display
• 文字字体大小：77px（桌面）、64（平板）、51（手机）
• 文字颜色：#f7f7f7
• 文本行高：1.7（桌面），1em（平板电脑和手机）

添加分频器模块

继续在您刚刚创建的文本模块下方添加一个分隔线模块，并在可见性子类别中启用“显示分隔线”选项。

向下滚动同一个选项卡并使用“rgba(114,57,114,0.91)”作为背景颜色。

转到“设计”选项卡并选择“#3d4156”作为分隔线颜色。

打开样式子类别并使用“实体”作为您的分隔线样式和“顶部”作为您的分隔线位置。

接下来，将以下设置分配给 Sizing 子类别：

• 分隔线重量：11px
• 高度：23px
• 宽度：0%
• 模块对齐：左

最后但并非最不重要的一点是，向“自定义填充”选项添加“48%”的左填充。

添加三列行

我们将添加到该部分的下一行看起来像是前一行的扩展，尽管它们是分开制作的。

行和列设置

使行全宽

再次开始，使新行全宽。

行背景设置

然后，使用以下背景设置：

• 第一种颜色：rgba(114,81,114,0.91)
• 第二种颜色：#f7f7f7
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：9%
• 结束位置：100%

添加背景图案并使用“乘法”作为背景图像混合。

列背景设置

向下滚动选项卡并使用“#f7f7f7”作为每列的背景颜色。

间距

在间距子类别中，首先将“30px”分配给每列的顶部、底部、右侧和左侧填充。 然后，将以下填充添加到您行的桌面版本：

• 顶部：19px
• 右：200px
• 左：200px

平板电脑上的填充略有不同：

• 顶部：0px
• 右：70px
• 底部：0px
• 左：70px

手机上的填充如下：

• 顶部：0px
• 右：50px
• 底部：30px
• 左：50px

添加第一个文本模块

继续将文本模块添加到行的第一列。 然后，对“设计”选项卡的“文本”子类别使用以下设置：

• 文字字体：Raleway
• 字体样式：粗体和大写
• 文字字体大小：23px
• 文字颜色：#3d4156
• 文本行高：1.7em
• 文字方向：居中

添加第二个文本模块

在上一个文本模块的正下方添加另一个文本模块，并使用以下设置：

• 文字字体：Raleway
• 文字字体大小：12px
• 文字颜色：#3d4156
• 文本行高：1.7em
• 文本方向：左

克隆文本模块并放置在其他列中

创建两个文本模块后，克隆它们并将它们也放置在剩余的两列中。

添加一列行

我们要添加的最后一列将与前一列重叠。 我们这样做的原因是这样我们可以组合不同的渐变背景。 尽管我们创建的三行是分开的，但它们会感觉像是一列。 同时，我们还可以享受多个渐变背景，而不仅仅是一个。

行和列设置

使行全宽

对于最后一行，我们还需要启用“使此行全宽”。

行背景设置

然后，向该行添加渐变背景：

• 第一种颜色：rgba(61,65,86,0)
• 第二种颜色：rgba(114,81,114,0.34)
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：45%
• 结束位置：91%

列背景设置

向下滚动同一选项卡并为该列使用以下渐变背景：

• 第一种颜色：rgba(239,239,239,0.15)
• 第二种颜色：rgba(214,44,104,0)
• 列渐变类型：线性
• 柱梯度方向：340deg
• 列起始位置：45%
• 柱端位置：45%
  

间距

我们需要做的最后一件事是添加一些填充和边距。 首先将“-100%”添加到顶部边距，然后继续使用以下自定义填充：

• 顶部：14px
• 右：30px
• 左：30px

该列也需要一些填充； 顶部为“200px”，底部为“155px”。

结果

如果您按照我们在本文中提供的不同步骤进行操作，您应该能够获得以下结果：

最后的想法

使用新的 Divi 选项，许多新事物成为可能。 其中之一是结合行和列的背景以实现出色的设计。 如果您有任何问题或建议，请务必在下方评论区留言！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片由 medejaja/shutterstock.com 提供