如何创造性地使用 Divi 的新行对齐选项

在今天的 Divi 教程中，我们将向您展示如何使用 Divi 中的新行对齐选项来发挥您的优势。 我们将行对齐选项与其他内置设计选项相结合，让您了解 Divi 的高级设计选项的可能性。 我们将向您展示如何重新创建的示例完全不包含额外的代码，这意味着任何技能水平的人都可以实现此设计。

让我们开始吧！

设计预览

快速浏览一下我们今天将要创建的内容（在桌面上）：

这是设计在移动设备上的外观：

如何创造性地使用 Divi 的新行对齐选项

订阅我们的 YouTube 频道

主题定制器设置

主菜单栏

如您所见，我们还将主菜单与布局相匹配。 要修改您的主菜单栏，请转到您的WordPress 仪表板 > 外观 > 自定义 > 标题和导航 > 主菜单栏 > 并进行以下更改：

• 隐藏徽标图像：启用
• 菜单高度：30
• 文字大小：17
• 字母间距：-1
• 字体样式：大写
• 文字颜色：#FFFFFF
• 活动链接颜色：#FFFFFF
• 背景颜色：rgba(255, 255, 255, 0)
• 下拉背景色：rgba(255, 255, 255, 0)

英雄部分

修改主菜单后，就可以开始布局了。 您需要做的第一件事是添加一个新页面，切换到 Visual Builder 并添加一个新的标准部分。 第一部分将成为我们的英雄部分，如下所示：

部分设置

渐变背景

添加标准部分后，您可以为其添加渐变背景：

• 第一种颜色：#9e5555
• 第二种颜色：#000000
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：50%
• 结束位置：50%

行设置

颜色叠加

然后，向该部分添加一列行并打开其设置。 我们需要做的第一件事是添加颜色叠加。 您可以通过选择深灰色来选择图像的暗度。 在本例中，我们使用了“#595959”。

背景图片

我们需要做的下一件事是将背景图像添加到一列行并应用颜色叠加。 要混合颜色叠加和背景图像，请选择“正片叠底”作为背景图像混合。

中心行对齐

像大多数网站一样，我们将为英雄部分选择中心行对齐方式。

使行全宽

我们还希望我们的行是全角的，因此我们将在“设计”选项卡的“大小调整”子类别中启用该选项。

自定义填充

我们需要在行设置中做的最后一件事是在顶部和底部添加“300px”的自定义填充。

第一个文本模块

完成所有设置后，我们将向行中添加第一个文本模块。 选择要在“内容”选项卡中显示的文本，然后转到“设计”选项卡。 在“设计”选项卡中，确保以下设置适用于“文本”子类别：

• 文字字体：Arvo
• 文本字体大小：64（桌面）、47（平板）、33（手机）
• 文字颜色：#FFFFFF
• 文本行高：1em
• 文字方向：居中

第二个文本模块

然后，添加另一个文本模块。 相反，第二个文本模块包含以下设置：

• 文字字体：Lato
• 文本字体大小：25（桌面）、18（平板）、16（手机）
• 文字颜色：#FFFFFF
• 文本行高：1.7em
• 文字方向：居中

第二节

英雄部分完成后，我们可以转到第二部分。 在本节中，我们将使用右行对齐而不是居中对齐，结合自定义边距和列背景来创建漂亮的效果。 我们需要在本节中创建两个行版本：桌面版本和平板电脑/手机版本。 这将确保设计在各种屏幕上看起来都很棒。

部分设置

渐变背景

添加第二个部分后，向其添加以下渐变背景：

• 第一种颜色：#000000
• 第二种颜色：#d6d6d6
• 渐变类型：线性
• 梯度方向：184度
• 起始位置：20%
• 结束位置：20%

添加桌面行

然后，您可以继续向其中添加前两列行； 这一行将是桌面版本。 幸运的是，我们也可以将其中的大部分内容重用于平板电脑/手机版本。

行设置

列背景

在内容选项卡中，添加“#FFFFFF”作为第二列的背景颜色。

右行对齐

移至“设计”选项卡并选择右行对齐方式。

使行全宽

接下来，打开 Sizing 子类别并启用“Make This Row Fullwidth”选项。

自定义填充

您需要在行设置中做的最后一件事是向该行添加一个 '300px' 的顶部填充，并将以下填充添加到第二列：

• 顶部：35px
• 右：35px
• 底部：150px
• 左：35px

第 1 栏

第一分频器模块

对于第一列，我们将首先添加一个分隔模块。 在“内容”选项卡的“可见性”子类别中，启用“显示分隔线”选项。

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

然后，在样式子类别中选择“实心”作为分隔线样式和“顶部”作为分隔线位置。

您需要在分频器模块的设计选项卡中做的最后一件事是对大小调整子类别进行以下调整：

• 分频器重量：3
• 高度：0px
• 宽度：20%
• 模块对齐：右

第一个文本模块

在分隔模块的正下方，添加第一个文本模块，并在“设计”选项卡的“文本”子类别中使用以下设置：

• 文字字体：Arvo
• 文字字体大小：30px
• 文字颜色：#000000
• 文本行高：1.6em
• 文字方向：居中

克隆第一个分频器模块并更改对齐方式

克隆我们创建的分隔线模块并将其放置在第一个文本模块的正下方。 唯一需要更改的是 Sizing 子类别中的 Module Alignment。 与其在右侧，不如选择左侧。

第二个文本模块

您需要添加到第一列的最后一件事是另一个具有以下设置的文本模块：

• 文字字体：Lato
• 文字字体大小：14
• 文本行高：1.7em
• 文字方向：居中

第 2 栏

图像模块

您需要添加到第二列的第一件事是在“设计”选项卡的“间距”子类别中具有以下设置的图像模块：

• 在图像下方显示空间：是
• 上边距：-300px
• 左：-80px

文本模块

然后，在图像模块正下方添加一个文本模块，并在“设计”选项卡的“文本”子类别中选择以下设置：

• 文字字体：Lato
• 文字字体大小：14
• 文本行高：1.7em
• 文字方向：居中

社交媒体关注模块

您需要添加到第二列的最后一件事是社交媒体关注模块。 添加任意数量的社交图标，并确保在“设计”选项卡中选择“居中”作为项目对齐方式。

在平板电脑和手机上禁用

完成所有操作后，您可以继续禁用手机和平板电脑上的行。

添加移动行

克隆桌面行

现在我们已经制作了桌面版，制作移动版会快很多。 克隆桌面行并按照以下步骤操作。

切换列

首先切换位于两列中的模块。

列背景颜色

之后，删除第二列的背景色并将其放置在第一列中。

列填充

我们不需要在第二列中使用自定义填充，而是需要在第一列中使用它。 此外，底部填充不是“150px”而是“35px”，就像顶部、右侧和左侧填充一样。

使用中心行对齐

然后，我们还必须将行对齐方式更改为“居中”。

在桌面上禁用

最后但并非最不重要的一点是，确保在桌面上禁用该行。

第三节

第三部分将与第二部分非常相似。 创建此部分将很容易，因为我们可以接管第二部分的大部分设置并进行一些调整。 完成所有步骤后，您将能够见证以下结果：

部分设置

渐变背景

添加一个新的标准部分并使用以下渐变背景：

• 第一种颜色：#d6d6d6
• 第二种颜色：#9e5555
• 渐变类型：线性
• 梯度方向：184度
• 起始位置：30%
• 结束位置：30%

自定义保证金

然后，添加一个“-200px”的自定义边距。

桌面行

第三部分的工作方式相同； 我们将制作桌面和平板电脑/手机版本。

克隆第二部分的桌面行

首先克隆上一节的桌面行。 大多数设置都是相同的，我们将讨论需要进行的更改。

切换列

我们需要进行的更改之一是切换位于两列中的模块。

列背景颜色

然后，我们还需要删除第二列的背景色并添加“#000000”作为第一列的背景色。

列填充

删除第 2 列自定义填充并使用“35px”作为第一列的顶部、右侧、底部和左侧自定义填充。

使用左行对齐

此外，将行对齐方式从右更改为左。

图像模块自定义边距

图像模块的间距子类别也需要一些更改：

• 顶部：-150px
• 右：-80px

第一分频器模块自定义保证金

接下来，将“200px”的顶部边距添加到第二列中的第一个分隔线模块。

使用相反的颜色

正如你所注意到的； 颜色的使用与第二部分相反。 继续将所有字体颜色更改为“#FFFFFF”，将分隔线颜色更改为“#000000”。

在平板电脑和手机上禁用

尽管该行已在平板电脑和手机上禁用（由于克隆），但如果您想确定，可以转到可见性子类别。

移动排

克隆上一个桌面行

对于移动版本，克隆您刚刚创建的桌面行并进行本文下一部分中的更改。

使用中心行对齐

打开行设置并将行对齐更改为居中。

图像模块自定义边距

您需要做的另一件事是将图像模块的上边距更改为“-20%”。

在桌面上禁用

最后但并非最不重要的一点是，确保在桌面上禁用最后一行。

结果

按照本教程的逐步操作，您应该能够在桌面上获得以下结果：

移动端的结果如下：

最后的想法

在这篇文章中，我们向您展示了如何在 Divi Builder 中创造性地使用行的不同对齐选项。 人们在实践中学到的东西最多，这就是为什么我们为您提供了一个示例，我们向您展示了如何一步一步地创建。 如果您有任何问题或建议； 随时在下面的评论部分发表评论。

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