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

已发表: 2018-09-26

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

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

让我们开始吧！

预览

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

部分过渡

使用 Divi 的化妆师布局包的登陆页面

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

第 1 节过渡

部分过渡

添加新部分

定位

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

部分过渡

间距

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

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

部分过渡

添加新行

列结构

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

部分过渡

浆纱

也增加行的宽度：

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

部分过渡

间距

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

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

部分过渡

筛选

要使行更加生动，请在过滤器设置中增加饱和度：

饱和度：200%

部分过渡

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

隐藏分隔线

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

部分过渡

渐变背景

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

颜色 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 列的分隔模块中。

部分过渡