使用 Divi 的变换选项创建对角线设计结构（免费下载！）

我们一直在寻找方法来扩展您使用 Divi 的设计可能性。 自从转换选项更新出来后，许多新技术已经成为可能，而无需自定义编码知识。

在这篇文章中，我们将向您展示如何创建令人惊叹的对角线设计结构。 我们将重新创建的设计非常适合英雄部分，并与您要设置的任何类型的网站相匹配。 在教程结束时，您还可以免费下载 JSON 文件！

让我们开始吧！

预览

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

让我们开始重建吧！

添加新部分

渐变背景

首先创建一个新页面或打开一个现有页面，然后向其中添加一个常规部分。 打开部分设置并使用以下设置为其添加渐变背景：

• 颜色 1：#ffd633
• 颜色 2：#efefef
• 梯度方向：217deg
• 起始位置：45%
• 结束位置：45%

间距

然后，转到设计选项卡并添加一些自定义的顶部和底部填充。

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

溢出

我们需要确保转换选项不超过节容器。 为此，我们将向该部分的主要元素添加一行 CSS 代码。

overflow: hidden;

添加第 1 行

列结构

继续使用以下列结构添加第一行：

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。 在本文的下一步中，我们将通过使用视口单元添加一些自定义的左右填充值来替换刚刚删除的空间。 这将确保设计在所有屏幕尺寸上保持响应。

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

间距

继续并在接下来的间距设置中添加一些自定义填充值。

• 顶部填充：0px
• 底部填充：0px
• 左填充：25vw（桌面）、16vw（平板电脑）、7vw（手机）
• 右填充：25vw（台式机和平板电脑），27vw（手机）

展示

我们还通过向行的主要元素添加一行 CSS 代码来确保列在较小的屏幕尺寸上彼此相邻。

display: flex;

将 Blurb 模块添加到第 1 列

添加标题

是时候开始添加模块了！ 将 Blurb 模块添加到第 1 列并输入您选择的标题。

上传插图

继续上传您选择的插图。 我们将在本教程中使用的那些是 App Developer Layout Pack 的一部分。 您可以通过转到帖子并在最后下载它们来免费下载插图。

背景

然后，为 Blurb 模块添加一个完全白色的背景色。

• 背景颜色：#ffffff

标题文字设置

转到设计选项卡并相应地修改标题文本设置：

• 标题字体: Poppins
• 标题字体粗细：半粗体
• 标题字体样式：大写
• 标题文本对齐：居中
• 标题文字大小：0.5vw（桌面）、1.6vw（平板电脑）、2.4vw（手机）
• 标题字母间距：1px
• 标题行高度：1.6em

间距

接下来修改间距设置。

• 顶部填充：1.3vw（桌面）、4vw（平板电脑）、6vw（手机）
• 底部填充：1.3vw（台式机）、4vw（平板电脑）、6vw（手机）
• 左填充：1vw（桌面），7vw（平板电脑和手机）
• 右填充：1vw（桌面），7vw（平板电脑和手机）

边界

继续在 Blurb 模块的左上角和右上角添加“1vw”。

盒子阴影

最后但并非最不重要的一点是，使用以下设置向模块添加框阴影：

• 框阴影垂直位置：10px
• 框阴影模糊强度：60px
• 阴影颜色：rgba(39,39,52,0.37)

克隆 Blurb 模块两次并在剩余列中放置重复项

自定义 Blurb 模块后，您可以继续克隆它两次。 将重复项放在该行的剩余两列中。

更改重复 #1

更改副本和插图

更改第一个副本的副本和插图。

更改间距

随着间距设置。

• 最高利润率：-3vw
• 顶部填充：2.7vw（台式机）、8vw（平板电脑）、11vw（手机）
• 底部填充：2.7vw（台式机）、8vw（平板电脑）、11vw（手机）

更改重复 #2

更改副本和插图

还要修改第二个副本的副本和插图。

添加第 2 行

列结构

进入下一行！ 使用以下列结构：

渐变背景

尚未添加任何模块，打开行设置并为其添加渐变背景。

• 颜色 1：#fff20a
• 颜色 2：#ffb200
• 渐变方向：165度

浆纱

然后，转到设计选项卡并启用“使此行全宽”选项。

• 使这一行全宽：是

盒子阴影

最后但并非最不重要的一点是，向该行添加一个框阴影。

• 框阴影垂直位置：0px
• 框阴影模糊强度：100px
• 阴影颜色：rgba(0,0,0,0.39)

添加分频器模块

能见度

我们仅将这一行用于设计目的，而不是展示任何模块。 但是为了确保我们确切地知道行的外观，我们需要向它添加一个分隔模块。 我们不想显示模块，因此请确保禁用“显示分隔符”选项。

• 显示分隔线：否

将转换选项应用于行

第 1 行

转换 翻译

现在我们已经完成了前两行，我们将把它们转换成我们想要创建的对角线设计结构。 首先打开第一行的设置并修改转换转换值。

• 底部：30vw
• 右：6vw

变换旋转

然后，更改左变换旋转值。

• 左：37度

第 2 行

变换比例

继续打开第二行的设置并修改变换比例值。

• 底部：133%（桌面）、171%（平板电脑）、176%（手机）
• 右：133%（桌面）、171%（平板）、176%（手机）

转换 翻译

随着变换翻译值。

• 底部：12vw（桌面）、1vw（平板电脑）、3vw（手机）
• 右：-2vw（桌面）、-6vw（平板电脑）、-4vw（手机）

变换旋转

并在变换旋转设置中旋转行。

• 左：37度

添加第 3 行

列结构

进入下一行和最后一行！ 您可以使用此行及其列来共享您想要的任何类型的信息。 要重新创建您在本文预览中看到的确切设计，请选择以下列结构：

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。

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

将文本模块 #1 添加到第 1 列

添加H1内容

是时候开始添加模块了！ 我们将从标题文本模块开始。 输入您选择的一些 H1 内容。

H1 文本设置

然后，转到设计选项卡并修改 H1 文本设置。

• 标题字体： Poppins
• 标题文字大小：3vw（桌面）、5vw（平板电脑）、6vw（手机）
• 标题字母间距：-2px

间距

接下来添加一些自定义间距值。

• 上边距：-6vw（台式机和平板电脑），11vw（手机）
• 左边距：10vw

将文本模块 #2 添加到第 1 列

添加内容

我们需要的第二个模块是另一个文本模块。 添加一些您选择的内容。

文字设置

然后，转到设计选项卡并修改文本设置。

• 文字字体：Open Sans
• 文字大小：0.8vw（桌面）、1.5vw（平板电脑）、2.2vw（手机）
• 文本行高：2.6em

间距

也更改间距值。

• 上边距：3vw（电话），5vw（电话）
• 左边距：10vw
• 右边距：28vw（平板电脑），20vw（手机）

将按钮模块添加到第 1 列

添加副本

我们需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。

按钮设置

然后，转到设计选项卡并修改按钮设置。

• 为按钮使用自定义样式：是
• 按钮文字大小：0.9vw（桌面）、2.5vw（平板电脑）、3.5vw（手机）
• 按钮文字颜色：#000000
• 按钮边框宽度：1px
• 按钮边框颜色：#000000
• 按钮边框半径：1px
• 按钮字体： Poppins
• 字体粗细：轻

间距

最后但并非最不重要的一点是，使用一些自定义间距值来塑造您的模块，您就完成了！

• 最高边距：2vw（台式机），5vw（平板电脑和手机）
• 左边距：10vw
• 顶部填充：1vw
• 底部填充：1vw
• 左填充：3vw
• 右填充：3vw

免费下载对角线设计部分

要了解免费的对角线设计部分，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

预览

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

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项创建令人惊叹的对角线设计结构。 我们希望本教程可以帮助您熟悉新的 Divi 变换选项。 如果您有任何问题或建议，请务必在下方评论区留言！