如何使用 Divi 的新柱结构创建令人惊叹的部分过渡

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于您的下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将您的网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的新柱结构来创建令人惊叹的部分过渡。 我们将不同的列结构与 Divi 的一些内置选项相结合，将我们的页面设计提升到一个新的水平。

让我们开始吧！

预览

让我们首先看一下我们将仅使用 Divi 的内置选项从头开始创建的三个不同示例。 这些示例在较小的屏幕尺寸上看起来同样出色。

使用 Divi 的 Makeup Artist Layout Pack 的登陆页面

我们将使用 Divi’s Makeup Artist Layout Pack 的登录页面。 如果您想查看布局包，请转到以下博客文章。 尽管我们使用特定的布局包来演示本教程，但您也可以轻松地在其他布局上使用这些技术。

部分过渡#1

添加新部分

定位

使用 Divi 的 Visual Builder 打开 Makeup Artist Layout Pack 的登录页面。 然后，在 hero 部分的正下方添加一个新的常规部分：

间距

接下来删除部分的所有默认间距：

• 顶部填充：0px
• 底部填充：0px

添加新行

立柱结构

继续向具有以下列结构的部分添加新行：

浆纱

也增加行的宽度：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：0

间距

接下来删除默认的顶部和底部填充：

• 顶部填充：0px
• 底部填充：0px

筛选

要使行更有活力，请增加过滤器设置中的饱和度：

将分隔模块 #1 添加到第 1 列

隐藏分隔线

为了在我们的设计中创建第一个正方形，我们将在第 1 列添加一个分隔模块。禁用“显示分隔线”选项。

渐变背景

接下来，为 Divider Module 添加渐变背景：

• 颜色1：rgba(255,255,255,0)
• 颜色2：rgba(176,182,219,0.34)

间距

要创建正方形，请更改间距值：

• 上边距：-120px
• 上边距：120px
• 底部填充：120px

克隆分隔模块并放入第 2 列

修改完 DIvider 模块后，克隆它并将其放在第二列中。

更改渐变背景

需要对此副本进行一些更改，从渐变背景开始：

• 颜色1：rgba(228,237,234,0.58)
• 颜色 2：rgba(255,255,255,0)

更改间距

更改间距设置。 这将增加此分隔模块与第一列中的分隔模块之间的距离。

• 上边距：142px
• 上边距：120px
• 底部填充：120px

克隆分隔模块 #1 两次并放入第 3 列和第 5 列

克隆紫色 Divider Module 两次，并将副本放在第 3 列和第 5 列中。

克隆分隔模块 #2 并放入第 4 列

克隆绿色的 Divider Module 并将其放在第 4 列中。

在平板电脑和手机的第 3、4 和 5 列中隐藏分隔模块

在第 3 列中打开分频器模块

当然，我们希望这些部分过渡在较小的屏幕尺寸上看起来同样出色。 这就是为什么我们要隐藏一些我们使用过的模块。 首先打开第 3 列中分频器模块的设置。

隐藏在平板电脑和手机上

转到高级选项卡并禁用手机和平板电脑上的模块。

复制可见性样式

我们还需要隐藏第 4 列和第 5 列中的分隔线。 要加快此过程，请复制第 3 列中分隔符的可见性设置：

粘贴可见性样式

并将它们粘贴到第 4 列和第 5 列的 Divider Modules 中。

部分过渡#2

添加新部分

定位

要创建第二个部分过渡，请在此处添加一个新部分：

顶部分隔线

打开部分设置并添加以下顶部分隔线：

• 分隔线样式：在列表中查找
• 分隔线颜色：#ffffff
• 分隔线高度：236px
• 分频器翻转：垂直
• 分隔线排列：在章节内容之上

底部分隔线

同样，还要添加一个底部分隔线：

• 分隔线样式：在列表中查找
• 分隔线颜色：#ffffff
• 分隔线高度：236px
• 分隔线排列：在章节内容之上

间距

接下来更改间距设置：

• 上边距：100px
• 下边距：100px
• 顶部填充：0px
• 底部填充：0px

添加新行

立柱结构

是时候向新部分添加一行了！ 选择以下列结构：

浆纱

在不添加任何模块的情况下，打开行设置并更改宽度：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

删除所有默认的顶部和底部填充：

• 顶部填充：0px
• 底部填充：0px

将分隔模块 #1 添加到第 1 列

背景颜色

接下来，将分隔模块添加到第一列。 打开其设置并添加背景颜色：

• 背景颜色：rgba(176,182,219,0.34)

分隔线颜色

更改分隔线颜色：

分隔线样式

然后，转到样式设置并使用以下分隔线样式：

分压器重量

分隔器的重量应如下所示：

间距

最后但同样重要的是，使用自定义填充增加 Divider Module 的大小：

• 上边距：50px
• 底部填充：50px

克隆分隔模块并放入第 2 列

完成第一列中的 Divider Module 后，克隆它并将副本放在第二列中。

更改背景颜色

相应地更改此副本的背景颜色：

• 背景颜色：#e4edea

克隆分隔模块 #1 并放入第 3 列和第 5 列

继续克隆紫色 Divider Module 两次，并将副本放在第 3 列和第 5 列中。

克隆分隔模块 #2 并放入第 4 列

克隆绿色的 Divider Module 并将副本放在第 4 列中。

在平板电脑和手机的第 3、4 和 5 列中隐藏分隔模块

隐藏在平板电脑和手机上

我们将做与第一部分转换示例相同的事情。 在第 3 列打开 Divider Module 的设置并将其隐藏在手机和平​​板电脑上。

复制可见性样式

复制这些可见性样式。

粘贴可见性样式

并将它们粘贴到第 4 列和第 5 列的 Divider Modules 中。

部分过渡#3

添加新部分

定位

要将最后一个部分转换添加到您的页面，请在此处添加一个新部分：

顶部分隔线

打开部分设置并添加顶部分隔线：

• 分隔线样式：在列表中查找
• 分隔线颜色：#ffffff
• 分隔线高度：150px
• 分隔线排列：在章节内容之上

底部分隔线

接下来添加一个底部：

• 分隔线样式：在列表中查找
• 分隔线颜色：#ffffff
• 分隔线高度：150px
• 分频器翻转：垂直
• 分隔线排列：在章节内容之上

间距

然后，转到间距设置并进行一些更改：

• 上边距：100px
• 下边距：100px
• 顶部填充：0px
• 底部填充：0px

添加新行

立柱结构

我们在本节中需要的行具有以下列结构：

浆纱

在不添加任何模块的情况下，打开行设置并增加行的宽度：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

接下来删除所有默认的顶部和底部填充：

• 顶部填充：0px
• 底部填充：0px

将分隔模块 #1 添加到第 1 列

隐藏分隔线

继续在第一列添加一个分隔模块。 禁用“显示分隔线”选项。

背景颜色

改为为分隔线添加背景颜色：

• 背景颜色：rgba(176,182,219,0.34)

间距

通过使用顶部和底部填充来增加模块的大小：

• 上边距：100px
• 底部填充：100px

克隆分隔模块并放入第 2 列

更改背景颜色

克隆第一列中的分频器模块，并将副本放在第二列中。 打开其设置并更改背景颜色：

• 背景颜色：rgba(228,237,234,0.58)

克隆分隔模块 #1 并放入第 3 列和第 5 列

将紫色 Divider Module 克隆两次，并将其放在第 3 列和第 5 列中。

克隆分隔模块 #2 并放入第 4 列

克隆绿色的 Divider Module 并将副本放在第 4 列中。

在平板电脑和手机的第 3、4 和 5 列中隐藏分隔模块

隐藏在平板电脑和手机上

在平板电脑和手机的第 3 列中隐藏分频器模块。

复制可见性样式

复制这些可见性样式。

粘贴可见性样式

并将它们粘贴到第 4 列和第 5 列的 Divider Module 上，您就完成了！

预览

现在我们已经完成了所有步骤，让我们最后看一下我们创建的三个不同示例。

最后的想法

在这篇用例博客文章中，我们向您展示了如何使用 Divi 的新列结构来创建令人惊叹的部分过渡。 本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些东西。 如果您有任何疑问，请确保在下面的评论部分发表评论！