使用分隔模块通过 Divi 的变换选项创建背景形状

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

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用分隔模块通过 Divi 的变换选项和律师助理布局包创建背景形状。 分隔线模块用途广泛，可以真正提升页面的整体设计。 尽管我们将重新创建一些与律师助理布局包特别匹配的示例，但您可以将此技术用于使用 Divi 构建的任何类型的网站。

让我们开始吧！

预览

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

桌面

移动的

使用 Paralegal Layout Pack 的登陆页面创建新页面

创建一个新页面并将律师助理布局包的登录页面上传到该页面。

重新创建示例 #1

部分溢出

让我们开始创建第一个示例！ 继续并打开英雄部分设置并转到设计选项卡。 在这里，我们要确保没有任何内容超出部分容器。 为此，我们将向主元素添加一行 CSS 代码。

overflow: hidden;

将分隔模块添加到第 2 列

能见度

然后，继续将分隔模块添加到专业部分的第二列。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

背景颜色

我们将使用布局包调色板中的一种颜色作为分隔线的背景颜色。

• 背景颜色：#d94144

颜色

然后，我们将转到设计选项卡并更改分隔线的颜色。

• 颜色：#f3f1f2

样式

转到样式设置并修改分隔线样式。

• 分隔线样式：虚线

浆纱

也可以调整大小设置。 您可以按照自己的意愿设置此分隔模块的外观，但如果您希望它看起来与本文预览中显示的完全一样，请使用以下设置：

• 分隔线重量：4px
• 高度：0px

间距

现在，我们将使用一些自定义边距和填充值来更改分隔线模块的位置和大小。 确保根据不同的屏幕尺寸修改值，以便一切保持响应。

• 最高边距：-30vw（台式机），-100vw（平板电脑和手机）
• 左边距：-100vw（桌面）、-138vw（平板）、-300vw（手机）
• 顶部填充：0px
• 底部填充：1.3vw（台式机）、2.2vw（平板电脑）、3vw（手机）

转变

变换比例

是时候改造模块了！ 我们将在变换设置中做的第一件事是通过添加以下变换比例值来增加分隔线大小：

• 底部：153%
• 正确：500%

变换旋转

我们还将在变换旋转设置中旋转分隔线模块。 正如您所注意到的，由于我们在本教程开头添加的一行 CSS 代码，分隔器模块并没有超过本节。

• 左：348度

重新创建示例 #2

部分溢出

继续下一个例子！ 同样，我们希望通过向部分的主要元素添加一行 CSS 代码来确保没有任何内容超出部分容器。

overflow: hidden;

将新行添加到节的末尾

列结构

继续使用以下列结构在该部分的末尾添加一个新行：

间距

为了减小行占用的大小，我们将删除间距设置中的默认顶部和底部填充。

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

添加分频器模块

能见度

是时候添加和设置分隔模块的样式了！ 确保启用了“显示分隔线”选项。

• 显示分隔线：是

背景颜色

我们再次使用布局包调色板中的一种颜色作为背景颜色。

• 背景颜色：#d94144

颜色

转到设计选项卡并更改分隔线颜色。

• 颜色：#f3f1f2

浆纱

我们也在调整大小设置。

• 分隔线重量：10px
• 高度：0px

间距

我们将使用一些自定义填充创建我们想要的确切形状，我们将在不同的屏幕尺寸上修改这些填充。

• 顶部填充：2vw
• 底部填充：2.5vw（台式机）、3vw（平板电脑）、3.9vw（手机）

转变

变换比例

是时候转型了！ 我们要做的第一件事是缩放 Divider 模块。 我们这样做是为了确保该部分的开头或结尾没有间隙。 不要担心过度缩放您的分频器模块，超出部分的所有内容都不会出现在您的设计中。

• 底部：153%
• 右：153%（桌面）、250%（平板电脑）、500%（手机）

转换 翻译

然后，我们还将更改分隔模块的位置，使其显示在右侧。 确保将这些值与不同的屏幕尺寸相匹配。

• 底部：25vw（台式机），27vw（平板电脑和手机）
• 右：0px（桌面），-32vw（平板和手机）

变换旋转

最后但并非最不重要的一点是，我们将通过变换旋转设置将水平分隔线变成垂直分隔线。

• 左：270度

重新创建示例 #3

部分溢出

继续下一个也是最后一个例子！ 同样，通过向部分的主要元素添加一行 CSS 代码，确保没有任何内容超出部分容器。

overflow: hidden;

在节的开头添加新行

列结构

继续在该部分的顶部添加一个新行。 将行放在顶部很重要，这样它就不会在教程后面与下面的内容重叠。

浆纱

在不添加任何模块的情况下，打开行设置并允许列占据屏幕的整个宽度。

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

添加分频器模块

能见度

接下来添加您的分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

背景颜色

转到背景设置并添加您选择的背景颜色。

• 背景颜色：#d94144

颜色

还要修改分隔线颜色。

• 颜色：#f3f1f2

样式

并在样式设置中更改分隔线样式。

• 分隔线样式：虚线

浆纱

然后，转到大小设置并进行一些更改。

• 分隔线重量：4px
• 高度：0px

间距

并在间距设置中使用一些顶部和底部填充创建您想要的形状。

• 顶部填充：3vw
• 底部填充：3vw

盒子阴影

我们还将通过给分隔线一个微妙的框阴影来为我们的页面添加一些深度。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.3)

转变

变换比例

现在我们已经为分隔线设置了样式，我们可以开始改造它。 我们要做的第一件事是在变换比例设置中增加分隔模块的大小。

• 底部：140%
• 正确：140%

转换 翻译

然后，我们将转到变换转换设置并更改分隔器模块的位置。 将行放在部分的顶部有助于我们保持比它下面的行更低的 z-index，这创造了这种美丽的重叠！

• 底部：4vw
• 右：16vw（桌面）、26vw（平板电脑）、35vw（手机）

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divider 模块和 Divi 的新变换选项来创建背景形状并增强页面的整体外观。 本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议，请务必在下方评论区留言！