清徐高端网站建设：用Divi创建5个编辑风格节布局示例

新的Divi选项提供了大量的可能性。模块、行和列，比以往任何时候都更加赋予彼此在通往令人惊叹和用户友好的网页设计的道路上的力量。它所能做的事情之一就是创建出色的编辑风格部分。这正是我们在这篇文章中展示给你的：5种不同的编辑风格版面，你可以在不同的网站中使用。最棒的部分？POST仅通过对每个模块、行和列使用正确的设置来完成。

清徐高端网站建设让我们看一下我们将向您展示如何创建的五个示例。

台式机

移动式

移动式

用Divi创建5个编辑风格节布局示例

开始创建第一个示例

让我们从创建第一个编辑器样式布局开始。

增加新科

添加一个新页面，启用DiviBuilder并切换到VisualBuilder。一旦您在VisualBuilder中，添加一个标准部分。

加三列排

在标准部分中，我们需要一个三列行。

梯度背景

打开行设置并向其添加以下渐变背景：

· 第一颜色：#636363

· 第二颜色：RGBA(255，255，255，0)

· 梯度类型：径向

· 径向：中心

· 起始位置：0%

· 期末职位：47%

第2栏背景颜色

我们还需要将‘#d8d8d8’设置为列2的背景色。 

上浆

继续到“设计”选项卡，并为“尺寸”子类别使用以下设置：

· 使用自定义宽度：是

· 定制宽度：100%

· 使用自定义水槽宽度：是

· 排水沟宽度：1 

间距

打开间隔子类别，将‘50 px’添加到第二列的上、右、下和左填充。

第一列图像模块

梯度背景

将图像添加到行的第一列，并对其使用以下梯度背景：

· 第一颜色：RGBA(255，255，255，0)

· 第二颜色：#086191

· 梯度型：线性

· 梯度方向：107德克

· 起始位置：60%

· 结束位置：60% 

对齐

转到“设计”选项卡，使用“左图像对齐”并启用“始终以移动为中心的图像”选项。 

间距

然后，打开间隔子类别，并使用以下边距和填充设置：

· 最高利润率：100 px(桌面)，0 px(平板电脑和手机)

· 顶部填充物：20 px

· 底垫：20 px 

第二列文本模块

文本设置

接下来，向行的第二列添加一个文本模块。转到“设计”选项卡，为文本子类别使用以下设置：

· 文本字体大小：12 px

· 文本颜色：#000000

· 文本定位：中心

上浆

打开“大小”子类别，使用“84%”的宽度并选择中心模块对齐。 

间距

最后，将‘50 px’添加到顶部和底部的边距。

第三列图像模块

梯度背景

向第三列中添加另一个图像模块，并使用以下梯度背景：

· 第一颜色：#a 36100

· 第二颜色：RGBA(255，255，255，0)

· 梯度型：线性

· 梯度方向：73度g

· 起始位置：40%

· 最后职位：40% 

对齐

转到“设计”选项卡，选择“左图像对齐”并启用“始终以移动为中心的图像”选项。 

间距

最后，添加以下自定义边距和填充：

· 最高利润率：300 px(桌面)，0 px(平板电脑和手机)

· 顶部填充物：20 px

· 底垫：20 px 

结果

让我们再看看桌面上的结果：

开始创建第二个示例

增加新科

首先，增加一个新的标准部分。

加两列行

然后，向它添加一个两列行。 

第2栏背景颜色

打开行设置并添加“#edeed”作为第2列的背景色。

上浆

转到“设计”选项卡，对“尺寸”子类别进行以下更改：

· 使用自定义宽度：是

· 定制宽度：100%

· 使用自定义水槽宽度：是

· 排水沟宽度：1

第一列图像模块

对齐

将图像模块添加到第一列，使用左图像对齐并启用“始终以移动为中心的图像”选项。

间距

打开间隔子类别并使用以下设置：

· 最高利润率：100 px(桌面)，0 px(平板电脑和手机)

· 顶部填充：0 px

· 底部填充物：0 px

第二列文本模块

文本设置

然后，将文本模块添加到第二列，并将下列设置应用于文本子类别：

· 文本字体：Lato

· 文本字体大小：12 px

· 文本颜色：#000000

· 文本线高度：2.2em

· 文本定位：中心 

上浆

打开“大小”子类别并应用“75%”的宽度。

间距

最后，确保以下设置适用于间隔子类别：

· 最高利润率：120 px(桌面)，-80(平板电脑和手机)

· 左侧边缘：-240 px(桌面)、80(平板电脑)、45(电话)

· 上、右、下、左填充物：50 px(桌面和平板电脑)，20 px(电话)

结果

完成后，您将注意到桌面上的以下设计： 

在移动平台上：

开始创建第三个示例 

增加新科

再次添加一个新的标准部分。

加两列行

第1栏背景颜色

打开行设置并使用‘#e8e8e8’作为第1列背景色。 

第2列梯度背景

第二列所需的梯度背景如下：

· 第一颜色：#e8e8e8

· 第二颜色：RGBA(255，255，255，0)

· 第2列梯度类型：线性

· 第2栏梯度方向：147度

· 第2栏起始位置：25%

· 第2栏末端位置：9%

上浆

打开“大小”子类别并使用以下设置：

· 使用自定义宽度：是

· 定制宽度：100%

· 使用自定义水槽宽度：是

· 排水沟宽度：1 

间距

最后，将‘70 px’添加到第一列的顶部和底部填充。 

第一列图像模块

对齐

清徐高端网站建设将图像模块添加到第一列，使用左图像对齐并启用“始终以移动为中心的图像”选项。 

间距

打开间隔子类别并将‘-300 px’添加到左侧边缘

第二列文本模块

背景色

将文本模块添加到第二列，并使用‘#3d3d3d’作为背景颜色。

文本设置

转到“设计”选项卡，为文本子类别使用以下设置：

· 文本字体：Lato

· 文本字体大小：12 px

· 文本颜色：#FFFFFF

· 文本线高度：2.2em

· 文本定位：中心

上浆

打开“大小”子类别，使用“75%”作为宽度。

间距

最后，对间隔子类别使用以下设置：

· 最高利润率：130 px(桌面)，-200(平板电脑和手机)

· 左边沿：-180 px(桌面)、80(平板电脑)、50(电话)

· 上、右、下、左填充物：50 px(桌面和平板电脑)，20 px(电话) 

开始创建第四个示例

增加新科

首先，在您正在处理的页面中添加一个标准部分。

加两列行

然后，向它添加一个两列行。

上浆

打开“大小”子类别并进行以下更改：

· 使用自定义宽度：是

· 定制宽度：60%

· 使用自定义水槽宽度：是

· 排水沟宽度：1

第一列第一图像模块

对齐

将图像模块添加到第一列，使用正确的图像对齐，并启用“始终以移动为中心的图像”选项。 

上浆

转到图像模块的大小子类别，使用‘89%’的宽度并选择正确的模块对齐方式。

能见度

转到“高级”选项卡，禁用电话和平板电脑上的图像模块。我们将为正在使用的3个图像模块执行此操作。您可以自己决定要在平板电脑和电话上显示哪一个，在我们的例子中，这将是右上角的图像。 

第一列第二图像模块

对齐

添加另一个图像模块，使用正确的图像对齐，并启用“始终以移动为中心的图像”选项。

边界

向下滚动并使用以下边框：

· 使用边框：是

· 边框颜色：#FFFFFF

· 边框宽度：5 px

· 边框风格：实心

能见度

最后，转到“高级”选项卡，在电话和平板电脑上禁用图像模块。

第二列第一图像模块

对齐

将下一个图像模块添加到第二列，使用左图像对齐并启用“始终以移动为中心的图像”选项。 

边界

向下滚动，打开边框子类别，并应用下列设置：

· 使用边框：是

· 边框颜色：#FFFFFF

· 边框宽度：4PX

· 边框风格：实心

第二列第二图像模块

对齐

将最后一个图像模块添加到第二列，使用左图像对齐并启用“始终以移动为中心的图像”选项。 

上浆

然后，打开大小调整子类别，使用‘89%’的宽度并选择左模块对齐。

能见度

在电话和平板电脑上禁用此图像模块。 

增加一列行

完成前一行后，继续添加另一行。这一次，行只需要一个列。

上浆

转到行设置的“设计”选项卡，启用“使用自定义宽度”选项，并使用“581px”作为自定义宽度。

文本模块

背景色

向新行添加一个文本模块，并选择“RGBA(255，255，255，0.92)”作为背景色。

文本设置

移至“设计”选项卡，并将下列设置应用于文本子类别：

· 文本字体：Lato

· 文本字体大小：12 px

· 文本颜色：#000000

· 文本线高度：2.2em

· 文本定位：中心

上浆

然后，打开“尺寸”子类别，将“75%”添加到宽度中，并选择“中心模块对齐”。 

间距

最后，将下列设置应用于间隔子类别：

· 最高利润率：-580 px(桌面)，-200(平板电脑和手机)

· 左边沿：-180 px(桌面)、80(平板电脑)、50(电话)

· 上、右、下、左填充物：50 px 

结果

一旦完成，您将能够在桌面上看到结果 

开始创建第五个示例 

加满宽部分

首先，向页面添加一个全宽度部分。

全宽图像模块

在该全宽部分中，添加一个全宽度图像模块。 

增加新科

就在上一节的下方，添加另一节。这一次，该部分必须是标准的，而不是全宽度。

增加三列行

在新的标准部分中添加三列行。 

第1、2和3栏背景颜色

打开行设置并将下列背景色分配给列：

· 第1栏：#eaeaea

· 第2栏：非洲区域局(12，113，195，0.17)

· 第3栏：非洲区域局(131，233，0.09) 

上浆

转到“设计”选项卡，对“大小”子类别进行以下更改：

· 全宽行：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：1 

间距

然后打开间隔子类别，将‘-60 px’添加到每列的上边距，将‘50 px’添加到每列的底部填充。 

第一列文本模块

背景色

继续向第一列添加一个文本模块，并使用“RGBA(255，255，255，0.89)”作为其背景色。 

文本设置

转到“设计”选项卡，将下列设置应用于文本子类别：

· 文本字体：Lato

· 文本字体大小：12 px

· 文本颜色：#000000

· 文本线高度：2.2em

· 文本定位：中心 

边界

打开边界子类别并使用下列设置：

· 使用边框：是

· 边框颜色：#FFFFFF

· 边框宽度：17 px

· 边框风格：实心 

上浆

然后，使用“75%”的宽度，并在“尺寸”子类别中选择“中心模块对齐”。 

间距

最后，打开间隔子类别并应用以下设置：

· 最高利润率：-300 px(桌面)，0 px(平板电脑和手机)

· 上、右、下、左填充物：50 px(桌面和平板电脑)，20 px(电话) 

克隆文本模块两次&放置在其他两列中

继续复制文本模块两次。然后，将每个克隆放在剩下的两个列中。

更改间距第二列文本模块

我们必须将放置在第二列中的文本模块的顶部空间更改为‘-220 px’。 

更改间距第三列文本模块

第三列中文本模块的计数相同，但值为‘-140 px’。 

最后思想

在这篇文章中，清徐高端网站建设向您展示了一些美丽而有趣的编辑风格部分布局，您可以使用整个您自己的网站。这些例子显示了Divi的选择是多么灵活，你可以获得多大的创造性。如果您有任何问题或建议，请确保在下面的评论部分留下评论！