如何使用 Divi 的列和转换选项创建重叠列

在最新的 Divi 更新之一中，我们为构建器中的列添加了一些非常惊人的控件。 现在创建列重叠比以往任何时候都容易。 在本教程中，我们将向您展示如何使用 Divi 的列和转换设置创建具有三个重叠列的推荐部分。

对于此设计，我们将使用三种颜色，丰富的橙色 #ff8300、暖黄色 #ffd400 和醒目的蓝色渐变 #0c99c1。 您可以立即将这种重叠的列设计应用到网站项目中。

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

1.新建正则部分+三列行

您需要做的第一件事是创建一个包含三列行的常规部分。

调整截面间距

增加部分的顶部和底部填充。

• 顶部填充：4vw
• 底部填充：16vw

调整行的大小和间距

打开行设置并相应地更改大小设置：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

之后，修改间距设置：

• 底部填充：0px
• 左填充：11vw
• 右填充：8vw

添加渐变背景

接下来添加渐变背景：

• 背景样式：渐变
• 第一种颜色：白色#ffffff
• 第二种颜色：橙色#ff8300
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：35%
• 结束位置：35%

2. 样式栏

在向列添加模块之前，我们将分别更改每列的样式、间距和变换设置。

第 1 栏

列样式的第一步是圆角和框阴影：

• 边框：所有圆角均为 20px
• 框阴影：第一个框阴影选项
• 框阴影垂直位置：0px
• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.3)
• 框阴影位置：外

* 在添加任何变换设置之前，我们将这些项目样式复制并粘贴到第二和第三列。

再次打开第 1 列设置并转到设计选项卡。 我们将使用变换设置使第一列与第二列重叠。 以防万一你忘记了，x 轴是水平的，y 轴是垂直的。

• 变换翻译：
  • 桌面：x 轴 = 3vw。 y 轴 = 14.2vw
  • 平板电脑和手机：x 轴 = -14vw。 y 轴 = 16vw
• 能见度：Z 指数 10

第 2 栏

进入第二列！ 转到框阴影（您已在前面的步骤之一中添加）并增加框阴影模糊强度。

• 框阴影模糊强度：50px

继续向第 2 列添加一些自定义间距值。

• 顶部填充：
  • 桌面 = 3vw
  • 平板电脑 + 手机 = 5vw
• 底部填充：
  • 桌面 = 5vw
  • 平板电脑 + 手机 = 7vw
• 左填充：
  • 桌面 = 2vw
  • 平板电脑 + 手机 = 4vw
• 右填充：
  • 桌面 = 2vw
  • 平板电脑 + 手机 = 4vw

是时候转换第二列了！ 第二列保留在桌面的位置，但我们必须在较小的屏幕上应用一些自定义转换设置。 继续调整变换翻译选项卡。 此外，我们将 Z 索引增加到 9。

• 变换翻译：
  • 平板电脑和手机：x 轴 = 9vw。 y 轴 = 13vw
• 能见度：Z 指数 9

第 3 栏

进入第三列！ 增加已经存在的框阴影的框阴影模糊强度。

• 框阴影模糊强度：50px

接下来打开背景设置并添加蓝色渐变背景。

• 背景：渐变
• 渐变色一：#0c99c1
• 渐变颜色二：rgba(5,0,78,0.72)
• 渐变类型：线性
• 梯度方向：220度
• 起始位置：0%
• 结束位置：100%

现在，让我们添加间距。

• 顶部填充：
  • 桌面 = 3vw
  • 平板电脑 + 手机 = 10vw
• 底部填充：
  • 桌面 = 3vw
  • 平板电脑 + 手机 = 7vw
• 左填充：
  • 桌面 = 1.5vw
  • 平板电脑 + 手机 = 10vw
• 右填充：
  • 桌面 = 1.5vw
  • 平板电脑 + 手机 = 10vw

最后但并非最不重要的一点是，我们将通过更改变换转换设置使第三列与第二列重叠。

• 变换翻译：
  • 桌面：x 轴 = -10vw。 y 轴 = 14.2vw
  • 平板电脑：x 轴 = -14vw。 y 轴 = 9vw
  • 电话：x 轴 = -14vw。 y 轴 = 11vw
• 能见度：Z 指数 9

这是添加模块之前我们的列的预览。

3.将模块添加到列并为其设置样式

现在，让我们将模块添加到每一列！

第 1 栏

在第一列中，我们将插入一个图像模块和一个文本模块。 首先添加图像模块。

1. 添加图片模块

插入客户的照片并按如下方式设置样式：

• 对齐方式：左
• 强制全角：是

还要为图像添加底部边框。

• 底部边框颜色：黄色 #ffd400
• 底部边框宽度：9px
• 边框样式：纯色

2. 添加文本模块

在图像模块正下方添加一个新的文本模块并插入客户的姓名和职位。

• 名称：标题 4
• 位置：段落

添加内容后，我们将设置文本设置的样式：

• 文字字体：Nunito Sans
• 文字字体粗细：常规
• 文本对齐：居中
• 文字颜色：黑色#000000
• 字体大小：
  • 桌面 = 0.8vw
  • 平板电脑 = 1.8vw
  • 电话 = 2.8vw

转到标题文本设置并应用以下更改：

• 标题文字：H4
• 标题 4 字体：Poppins
• 标题 4 字体粗细：粗体
• 标题 4 文本颜色：黑色 #000000
• 标题 4 文字大小：
  • 桌面 = 1vw
  • 平板电脑 = 3vw
  • 电话 = 4vw

我们还将更改间距设置：

• 最高保证金：
  • 桌面 = 1.5vw
  • 平板电脑 = 3vw
  • 电话 = 7vw
• 底部边距：
  • 桌面 = 1.5vw
  • 平板电脑 = 3vw
  • 电话 = 7vw

完成两个模块后，您的专栏应如下所示：

第 2 栏

在第 2 列中，我们需要一个文本、一个简介和一个分隔模块。 第一个文本模块看起来像列右上角的有角度的横幅。 我们将使用变换选项来实现这种效果。

1. 添加文本模块。

添加一个新的文本模块并将“推荐”一词添加到内容框中。

为模块添加黄色背景。

• 背景颜色：黄色#ffd400

转到设计选项卡并相应地更改文本和间距设置：

• 文字字体： Poppins
• 文字字体粗细：粗体
• 文本对齐：居中
• 文字颜色：白色#ffffff
• 文字大小：23px
• 右边距：-50px
• 左边距：-50px
• 顶部填充：15px
• 底部填充：15px

最后但并非最不重要的一点是，我们将按如下方式调整变换设置：

• 变换翻译：
  • 桌面 = x 轴上的 17vw
  • 平板电脑 = x 轴上的 24vw，y 轴上的 1vw
  • 电话 = x 轴上的 20vw，y 轴上的 1vw
• 变换旋转：第一个轴上 32 度

2. 添加 Blurb 模块。

一旦你完成了第一个模块，就该添加一个简介模块了。

简介模块是显示客户推荐的地方。 首先，单击 + 图标添加模块并选择模糊。

然后，插入内容，选择一个图标并设置图标样式如下：

• 使用图标：是的，一颗星星
• 图标颜色：黄色 #ffd400
• 图标位置：左
• 使用图标字体大小：是的，48px

继续在 H4 级别设置标题文本的样式

• 标题文字：H4
• 标题字体: Poppins
• 标题字体粗细：粗体
• 标题字体颜色：黑色#ffffff

• 标题文字大小：
  • 桌面 = 1.2vw
  • 平板电脑 = 2.3vw
  • 电话 = 3.3vw
• 标题行高度：
  • 桌面 = 2vw
  • 平板电脑 = 3.4vw
  • 电话 = 4.6vw

相应地设置正文文本设置的样式：

• 正文字体：Nunito Sans
• 正文重量：半粗体
• 正文颜色：黑色 #000000
• 正文大小：
  • 桌面 = 0.7vw
  • 平板电脑 = 1.6vw
  • 电话 = 2.4vw
• 车身线高：
  • 桌面 = 1.6vw
  • 平板电脑 = 4vw
  • 电话 = 5vw

我们希望模糊的宽度小于其列，为此，我们将调整宽度、边距和填充值。

首先，我们将调整模糊的宽度：

• 内容宽度：100%
• 宽度：
  • 桌面 = 58.4%
  • 平板电脑 + 手机 = 90%

然后，间距设置：

• 最高利润率：3vw
• 底边距：3vw
• 右边距：-24vw
• 左填充：0px
• 右填充：4px

3. 添加分隔线

本专栏中我们需要的最后一个模块是分隔器模块。 将以下更改应用于分隔符：

• 见分频器：是
• 分隔线颜色：黑色#oooooo
• 分隔线重量：1px

我们快到了！ 到目前为止，我们的结果是这样的：

第 3 栏

进入第三列也是最后一列！ 我们使用此列来显示号召性用语。 我们使用了三个模块； 一个文本模块、一个分隔模块和一个按钮模块。

1. 添加文本模块

我们将添加到此列的第一件事是文本模块。

我们将在 H3 中添加一个标题，并在内容框中添加一些段落文本。

继续并相应地设置文本设置的样式：

• 文字字体：Nunito Sans
• 文字字体粗细：常规
• 文字字体颜色：白色#ffffff
• 文字字体大小：
  • 桌面 = 0.8vw
  • 平板电脑=- 2vw
  • 电话 = 2.6vw
• 文本行高度：
  • 桌面 = 1.5vw
  • 平板电脑 = 4vw
  • 电话 = 5vw

通过设置标题文本设置的样式来完成文本模块。

• 标题文字：H3
• 标题 3 字体：Poppins
• 标题 3 字体粗细：粗体
• 标题 3 文本颜色：白色 #ffffff
• 标题 3 文字大小：
  • 桌面 = 1.1vw
  • 平板电脑 = 3vw
  • 电话 = 4vw
• 标题 3 行高：
  • 桌面 = 1.5vw
  • 平板电脑 = 3vw
  • 电话 = 4.5vw

2. 添加分频模块

继续向第 3 列添加分隔条模块。要设置分隔条的样式，我们将复制并粘贴第 2 列中的分隔条样式。

打开分隔线设置并将颜色从黑色更改为白色。 添加一些顶部和底部填充。

• 分隔线颜色：白色#ffffff
• 顶部填充：40px
• 底部填充：20px

3. 添加按钮模块

到最后一个模块，这是一个按钮模块。 添加一些您选择的副本。

转到设计选项卡并按如下所示设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：
  • 桌面 = 0.8vw
  • 平板电脑 = 2.4vw
  • 电话 = 3vw
• 按钮文字颜色：白色#ffffff

• 按钮背景颜色：渐变
• 渐变色一：黄色#ffd400
• 渐变色二：橙色#ff8300
• 渐变类型：线性
• 梯度方向：202deg。

• 按钮边框宽度：0px
• 按钮字母间距：1px
• 按钮字体：Nunito Sans
• 按钮字体重量：重
• 按钮字体样式：TT

为了使按钮在所有屏幕尺寸上看起来都不错，我们将按如下方式调整按钮的内边距：

桌面

• 顶部填充：1vw
• 底部填充：1vw
• 右填充：3vw
• 左填充：3vw

药片

• 顶部填充：2vw
• 底部填充：2vw
• 右填充：6vw
• 左填充：6vw

电话

• 顶部填充：3vw
• 底部填充：3vw
• 右填充：8vw
• 左填充：8vw

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

包起来

这个重叠的三列构建作为推荐看起来很棒，但我们相信您可以将它用于其他令人惊奇的事情。 我们希望这会激励您在未来的项目中使用列变换和重叠选项。 如果您有任何问题或建议，请务必在下方评论区留言！