房山站点建设：如何创造性地使用Divi的新行调整选项

在房山站点建设的Divi教程中，我们将向您展示如何使用Divi中的新行对齐选项。我们将把行对齐选项与其他内置设计选项结合起来，让您了解Divi的高级设计选项可以实现什么。我们将向您展示如何重新创建的示例绝对不包含额外的代码，这意味着任何技能级别的人都可以完成此设计。

我们开始吧!

如何创造性地使用Divi的新行调整选项

主题定制程序设置

主菜单栏

您可以注意到，我们还将主菜单与布局匹配。若要修改主菜单栏，请转到WordPress仪表板>外观>自定义>标头&导航>主菜单栏>并进行以下更改：

· 隐藏Logo图像：启用

· 菜单高度：30

· 文本大小：17

· 字母间距：-1

· 字体样式：大写

· 文本颜色：#FFFFFF

· 活动链接颜色：#FFFFFF

· 背景色：RGBA(255，255，255，0)

· 下拉背景色：RGBA(255，255，255，0)

英雄科

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

节设置

梯度背景

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

· 第一颜色：#9e5555

· 第二颜色：#000000

· 梯度型：线性

· 梯度方向：180度

· 起始位置：50%

· 期末职位：50% 

行设置

彩色叠加

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

背景图像

下一步，我们需要做的是添加一个背景图像到一行，并使颜色覆盖应用。要混合颜色叠加和背景图像，选择‘乘’作为您的背景图像混合。

中心行对齐

像大多数网站一样，我们将为英雄部分选择一个中间排对齐。

使行满宽

我们还希望我们的行是完全宽度的，所以我们将在Design选项卡的SING子类别中启用该选项。

自定义填充

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

第一文本模块

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

· 文本字体：Arvo

· 字体大小：64(桌面)，47(平板电脑)，33(手机)

· 文本颜色：#FFFFFF

· 文本行高：1em

· 文本定位：中心

第二文本模块

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

· 文本字体：Lato

· 字体大小：25(桌面)，18(平板电脑)，16(手机)

· 文本颜色：#FFFFFF

· 文本线高度：1.7em

· 文本定位：中心

第二组

一旦英雄部分完成，我们就可以进入第二部分。对于本节，我们将使用正确的行对齐方式，而不是中间行对齐，并结合自定义边距和列背景来创建一个美丽的效果。我们需要在本节中创建两个行版本：桌面版本和Tablet/Phone版本。这将确保设计在所有类型的屏幕上看起来都令人叹为观止。

节设置

梯度背景

添加第二部分后，向其添加以下梯度背景：

· 第一颜色：#000000

· 第二颜色：#d6d6d6

· 梯度型：线性

· 梯度方向：184度g

· 起始位置：20%

· 期末职位：20%

添加桌面行

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

行设置

列背景

在Content选项卡中，添加‘#FFFFFF’作为第二列的背景色。

右行对齐

移到“设计”选项卡并选择正确的行对齐方式。

使行满宽

接下来，打开“大小”子类别并启用“让这个行满宽”选项。

自定义填充

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

· 顶部：35 px

· 右：35 px

· 底部：150 px

· 左：35 px

第1栏

第一分配器模块

对于第一列，房山站点建设将从添加一个除法器模块开始。在Content选项卡的可见性子类别中，启用“ShowDivider”选项。

移到“设计”选项卡，选择“#FFFFFF”作为分隔颜色。 

然后，选择“Solid”作为“Divider”样式，选择“top”作为“样式”子类别中的“Divider”位置。

在Divider模块的Design选项卡中，您需要做的最后一件事是对SIZING子类别进行以下调整：

· 分压器重量：3

· 高度：0 px

· 宽度：20%

· 模块对齐：右

第一文本模块

在除法器模块下面，添加第一个文本模块，并在“设计”选项卡的文本子类别中使用以下设置：

· 文本字体：Arvo

· 文本字体大小：30 px

· 文本颜色：#000000

· 文本行高：1.6em

· 文本定位：中心

克隆第一分配器模块&更改对齐

克隆我们创建的分离器模块，并将其放置在第一个文本模块下面。唯一需要更改的是“尺寸”子类别中的模块对齐。与其把它放在右边，不如选择左边。 

第二文本模块

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

· 文本字体：Lato

· 文本字体大小：14

· 文本线高度：1.7em

· 文本定位：中心

第2栏

图像模块

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

· 在图像下面显示空间：是的

· 最高保证金：-300 px

· 左：-80 px

文本模块

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

· 文本字体：Lato

· 文本字体大小：14

· 文本线高度：1.7em

· 文本定位：中心 

社会媒体跟踪模块

最后，您需要添加到第二列是一个社会媒体跟踪模块。添加任意数量的社交图标，并确保在“设计”选项卡中选择“中心”作为项目对齐。 

禁用平板电脑和电话

一旦完成了所有这些，您就可以继续禁用电话和平板电脑上的行了。 

增加移动行

克隆桌面行

既然我们已经制作了桌面版本，那么移动版的开发速度就会快得多。克隆桌面行并遵循以下步骤。

开关柱

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

列背景颜色

然后，移除第二列的背景色并将其放在第一列中。 

柱填充

我们需要在第一列中使用自定义填充，而不是在第二列中使用自定义填充。此外，底部填充物不是‘150 px’，而是‘35 px’一样，顶部，右和左垫 

使用中心行对齐

然后，我们还必须将行对齐更改为“Center”。 

在桌面上禁用

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

第三科

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

节设置

梯度背景

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

· 第一颜色：#d6d6d6

· 第二颜色：#9e5555

· 梯度型：线性

· 梯度方向：184度g

· 起始位置：30%

· 期末职位：30% 

海关保证金

然后，添加一个自定义边距‘-200 px’以及。 

桌面行

第三部分的工作方式也是一样的；我们将制作一个桌面和平板电脑/电话版本。

克隆桌面二段行

从克隆上一节的桌面行开始。大多数设置都是相同的，我们将检查需要进行的更改。

开关柱

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

列背景颜色

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

柱填充

删除列2自定义填充，并对第一列的上、右、下和左自定义填充使用‘35px’

使用左行对齐

另外，将行对齐从右更改为左。 

图像模块自定义边界

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

· 顶部：-150 px

· 右：-80 px 

第一分配器模块自定义裕度

接下来，在第二列中的第一个分区模块中添加一个‘200 px’的上限。 

使用相反的颜色

您可以注意到，颜色的使用与第二节相反。继续并将所有字体颜色更改为“#FFFFFF”，将分隔颜色更改为“#000000”。

禁用平板电脑和电话

尽管在平板电脑和手机上已经禁用了行(因为有了克隆)，但是如果您想要确保，可以转到可见性子类别。 

移动行

克隆以前的桌面行

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

使用中心行对齐

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

图像模块自定义边界

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

在桌面上禁用

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

结果

通过一步地学习本教程，您应该能够在桌面上获得结果

最后思想

在房山站点建设中，我们向您展示了如何创造性地使用DiviBuilder中行的不同对齐选项。人们从实践中学到最多，这就是为什么我们给你们提供了一个例子，我们向你们展示了如何一步地创造。如果您有任何问题或建议，请在下面的评论部分留下评论。