5 个使用 Divi 创建的编辑风格部分布局示例
已发表: 2017-11-05新的 Divi 选项提供了大量的可能性。 模块、行和列比以往任何时候都更能在通往令人惊叹和用户友好的网页设计的道路上相互促进。 它可以做的一件事就是创建出色的编辑风格部分。 这正是我们将在这篇文章中向您展示的内容； 您可以在不同的网站中使用 5 种不同的编辑风格部分布局。 最好的部分？ 该帖子是通过仅对每个模块、行和列使用正确的设置来制作的。
让我们看一下我们将向您展示如何创建的五个示例。
第一个例子
桌面
移动的
第二个例子
桌面
移动的
第三个例子
桌面
移动的
第四个例子
桌面
移动的
第五个例子
桌面
移动的
5 个使用 Divi 创建的编辑风格部分布局示例
订阅我们的 YouTube 频道
开始创建第一个示例
让我们开始创建我们的第一个编辑器样式布局。
添加新部分
添加一个新页面，启用 Divi Builder 并切换到 Visual Builder。 进入 Visual Builder 后，添加一个标准部分。
添加三列行
在该标准部分中，我们将需要一个三列的行。
渐变背景
打开行设置并向其添加以下渐变背景：
- 第一种颜色：#636363
- 第二种颜色：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：0%
- 最终位置：47%
第 2 列背景颜色
我们还需要将“#d8d8d8”设置为第 2 列的背景颜色。
浆纱
转到“设计”选项卡，并为“尺寸”子类别使用以下设置：
- 使用自定义宽度：是
- 自定义宽度：100%
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
打开 Spacing 子类别并将“50px”添加到第二列的顶部、右侧、底部和左侧填充。
第一列图像模块
渐变背景
将图像添加到行的第一列并为其使用以下渐变背景：
- 第一种颜色：rgba(255,255,255,0)
- 第二种颜色：#086191
- 渐变类型：线性
- 梯度方向：107deg
- 起始位置：60%
- 结束位置：60%
结盟
转到“设计”选项卡，使用左图像对齐并启用“移动设备上的始终居中图像”选项。
间距
然后，打开间距子类别并使用以下边距和填充设置：
- 上边距：100px（桌面），0px（平板和手机）
- 顶部填充：20px
- 底部填充：20px
第二列文本模块
文字设置
接下来，将文本模块添加到该行的第二列。 转到“设计”选项卡并为“文本”子类别使用以下设置：
- 文字字体大小：12px
- 文字颜色：#000000
- 文字方向：居中
浆纱
打开 Sizing 子类别，使用“84%”的宽度并选择中心模块对齐。
间距
最后，将“50px”添加到顶部和底部边距。
第三列图像模块
渐变背景
将另一个图像模块添加到第三列并使用以下渐变背景：
- 第一种颜色：#a36100
- 第二种颜色：rgba(255,255,255,0)
- 渐变类型：线性
- 梯度方向：73deg
- 起始位置：40%
- 结束位置：40%
结盟
转到“设计”选项卡，选择左图像对齐并启用“在移动设备上始终居中图像”选项。
间距
最后，添加以下自定义边距和填充：
- 上边距：300px（桌面），0px（平板和手机）
- 顶部填充：20px
- 底部填充：20px
结果
让我们再看看桌面上的结果：
在手机上：
开始创建第二个示例
第二个例子在桌面上看起来像这样：
添加新部分
首先，添加一个新的标准部分。
添加两列行
然后，向其添加两列行。
第 2 列背景颜色
打开行设置并添加“#ededed”作为第 2 列的背景颜色。
浆纱
转到“设计”选项卡，并对“大小调整”子类别进行以下更改：
- 使用自定义宽度：是
- 自定义宽度：100%
- 使用自定义装订线宽度：是
- 天沟宽度：1
第一列图像模块
结盟
将图像模块添加到第一列，使用左侧图像对齐并启用“始终居中移动图像”选项。
间距
打开间距子类别并使用以下设置：
- 上边距：100px（桌面），0px（平板和手机）
- 顶部填充：0px
- 底部填充：0px
第二列文本模块
文字设置
然后，将文本模块添加到第二列并将以下设置应用于文本子类别：
- 文字字体：Lato
- 文字字体大小：12px
- 文字颜色：#000000
- 文本行高：2.2em
- 文字方向：居中
浆纱
打开 Sizing 子类别并应用“75%”的宽度。
间距
最后，确保以下设置适用于间距子类别：
- 上边距：120px（桌面），-80（平板和手机）
- 左边距：-240px（桌面）、80（平板）、45（手机）
- 顶部、右侧、底部和左侧填充：50px（桌面和平板电脑），20px（手机）
结果
完成后，您会注意到桌面上的以下设计：
在手机上：
开始创建第三个示例
接下来，我们有以下示例，如下所示：
添加新部分
再次添加一个新的标准部分。
添加两列行
这一行我们需要的列结构如下：
第 1 列背景颜色
打开行设置并使用“#e8e8e8”作为第 1 列的背景颜色。
第 2 列渐变背景
第二列所需的渐变背景如下：
- 第一种颜色：#e8e8e8
- 第二种颜色：rgba(255,255,255,0)
- 第 2 列梯度类型：线性
- 第 2 列梯度方向：147deg
- 第 2 列起始位置：25%
- 第 2 列结束位置：9%
浆纱
打开 Sizing 子类别并使用以下设置：
- 使用自定义宽度：是
- 自定义宽度：100%
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
最后，将“70px”添加到第一列的顶部和底部填充。
第一列图像模块
结盟
将图像模块添加到第一列，使用左侧图像对齐并启用“始终居中移动图像”选项。
间距
打开间距子类别并在左边距中添加“-300px”。 
第二列文本模块
背景颜色
将文本模块添加到第二列并使用“#3d3d3d”作为背景颜色。
文字设置
转到“设计”选项卡并为“文本”子类别使用以下设置：
- 文字字体：Lato
- 文字字体大小：12px
- 文字颜色：#FFFFFF
- 文本行高：2.2em
- 文字方向：居中
浆纱
打开 Sizing 子类别并使用“75%”作为宽度。
间距
最后，对间距子类别使用以下设置：
- 上边距：130px（桌面），-200（平板和手机）
- 左边距：-180px（桌面）、80（平板）、50（手机）
- 顶部、右侧、底部和左侧填充：50px（桌面和平板电脑），20px（手机）
结果
完成后，桌面上的结果将如下所示：
在手机上是这样的：
开始创建第四个示例
我们将创建的第四个示例如下所示：
添加新部分
首先向您正在处理的页面添加一个标准部分。
添加两列行
然后，向其添加两列行。
浆纱
打开 Sizing 子类别并进行以下更改：
- 使用自定义宽度：是
- 自定义宽度：60%
- 使用自定义装订线宽度：是
- 天沟宽度：1
第一列第一图像模块
结盟
将图像模块添加到第一列，使用正确的图像对齐并启用“在移动设备上始终居中图像”选项。
浆纱
转到该图像模块的 Sizing 子类别，使用“89%”的宽度并选择正确的模块对齐方式。
能见度
转到高级选项卡并禁用手机和平板电脑上的图像模块。 我们将对正在使用的 3 个图像模块执行此操作。 您可以自己决定要在平板电脑和手机上显示哪一个，在我们的例子中，这将是右上角的图像。
第一列第二图像模块
结盟
添加另一个图像模块，使用正确的图像对齐并启用“移动设备上的始终居中图像”选项。
边界
向下滚动并使用以下边框：
- 使用边框：是
- 边框颜色：#FFFFFF
- 边框宽度：5px
- 边框样式：纯色
能见度
最后，转到高级选项卡并禁用手机和平板电脑上的图像模块。
第二列第一图像模块
结盟
将下一个图像模块添加到第二列，使用左图像对齐并启用“移动设备始终居中图像”选项。
边界
向下滚动，打开 Border 子类别并应用以下设置：
- 使用边框：是
- 边框颜色：#FFFFFF
- 边框宽度：4px
- 边框样式：纯色
第二列第二图像模块
结盟
将最后一个图像模块添加到第二列，使用左侧图像对齐并启用“移动设备上的始终居中图像”选项。
浆纱
然后，打开调整子类别，使用“89%”的宽度并选择左侧模块对齐。
能见度
在手机和平板电脑上也禁用此图像模块。
添加一列行
完成前一行后，继续添加另一行。 这一次，该行只需要一列。
浆纱
转到行设置的“设计”选项卡，启用“使用自定义宽度”选项并使用“581px”作为自定义宽度。
文本模块
背景颜色
将文本模块添加到该新行并选择“rgba(255,255,255,0.92)”作为背景颜色。
文字设置
转到“设计”选项卡，并将以下设置应用于“文本”子类别：
- 文字字体：Lato
- 文字字体大小：12px
- 文字颜色：#000000
- 文本行高：2.2em
- 文字方向：居中
浆纱
然后，打开 Sizing 子类别，将 '75%' 添加到 Width 并选择中间的 Module Alignment。
间距
最后，将以下设置应用于间距子类别：
- 上边距：-580px（桌面），-200（平板和手机）
- 左边距： – 180px（桌面）、80（平板）、50（手机）
- 顶部、右侧、底部和左侧填充：50px
结果
完成后，您将能够在桌面上看到以下结果：
以及手机上的以下内容：
开始创建第五个示例
我们将向您展示如何重新创建的最后一个示例如下：
添加全角部分
首先向页面添加全角部分。
全宽图像模块
在该 Fullwidth 部分中，添加一个 Fullwidth Image Module。
添加新部分
在上一节的正下方，添加另一节。 这一次，该部分必须是标准的而不是全角的。
添加三列行
向该新标准部分添加一个三列行。
第 1、2 和 3 列背景颜色
打开行设置并为列分配以下背景颜色：
- 第 1 列：#eaeaea
- 第 2 列：rgba(12,113,195,0.17)
- 第 3 列：rgba(131,0,233,0.09)
浆纱
转到“设计”选项卡并对“尺寸”子类别进行以下更改：
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
然后打开间距子类别，将“-60px”添加到每列的顶部边距和“50px”到每列的底部填充。
第一列文本模块
背景颜色
继续将文本模块添加到第一列并使用“rgba(255,255,255,0.89)”作为其背景颜色。
文字设置
转到“设计”选项卡并将以下设置应用于“文本”子类别：
- 文字字体：Lato
- 文字字体大小：12px
- 文字颜色：#000000
- 文本行高：2.2em
- 文字方向：居中
边界
打开 Border 子类别并使用以下设置：
- 使用边框：是
- 边框颜色：#FFFFFF
- 边框宽度：17px
- 边框样式：纯色
浆纱
然后，使用“75%”的宽度并在“大小调整”子类别中选择中心模块对齐。
间距
最后，打开间距子类别并应用以下设置：
- 上边距：-300px（桌面），0px（平板和手机）
- 顶部、右侧、底部、左侧填充：50px（桌面和平板电脑），20px（手机）
克隆文本模块两次并放置在其他两列中
继续克隆文本模块两次。 然后，将每个克隆放入剩余的两列中。
更改间距第二列文本模块
我们必须将放置在第二列中的文本模块的顶部边距更改为“-220px”。
更改间距第三列文本模块
第三列中文本模块的计数相同，但值改为“-140px”。
结果
在这里你可以在桌面上看到结果：
在手机上：
最后的想法
在这篇文章中，我们向您展示了一些漂亮而有趣的编辑风格部分布局，您可以在整个网站中使用它们。 这些示例显示了 Divi 的选项是多么灵活，以及您可以获得多少创意。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！
请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！
特色图片由朱莉娅蒂姆/shutterstock.com