当您尝试为您的网站创建独特的设计时，跳出框框思考可以帮助您实现目标。 在过去的教程中，我们经常将设计元素用于其内置选项。 它不仅可以帮助您保持对所创建设计的实时视图，还可以帮助您使其在不同的屏幕尺寸上看起来完全符合您的要求。 在今天的 Divi 教程中，我们将向您展示如何使用模块的低 z 索引边框来创建令人惊叹的设计，并且可以用于多种用途。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载低 Z 指数模块边框布局
要掌握免费的低 z 指数模块边框布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
订阅我们的 Youtube 频道
让我们开始重建吧！
添加新部分
间距
首先向您正在处理的页面添加一个新部分。 打开部分设置并删除默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
溢出
转到高级选项卡并更改溢出。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加新行
立柱结构
继续使用以下列结构添加新行：
背景颜色
尚未添加任何模块，打开行设置并更改背景颜色。
- 背景颜色：#f3f3e6
浆纱
转到设计选项卡并相应地更改尺寸设置：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
- 宽度：100%
- 最大宽度：100%
间距
删除下一行的默认顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
第 1 列设置
完成行设置后，您可以打开第一列的设置并进行一些更改。
渐变背景
使用以下设置添加渐变背景：
- 颜色 1：rgba(0,0,0,0)
- 颜色 2：#2e2d3c
- 渐变方向：90度
- 起始位置：54%
- 结束位置：54%
盒子阴影
也添加一个盒子阴影。
- 盒子阴影模糊强度：80px
- 阴影颜色：rgba(0,0,0,0.3)
将文本模块 #1 添加到第 1 列
将内容框留空
是时候开始添加模块了！ 在第一列中插入一个文本模块并将内容框留空。 我们只会将此模块用于其内置设置。 由于它的位置（第一列中的第一个模块），该模块的 z 索引较低，并将出现在后面的所有其他内容下方。
浆纱
在设计选项卡上移动并更改不同屏幕尺寸的宽度。
- 宽度：24vw（桌面）、50vw（平板电脑和手机）
间距
接下来进入间距设置并按如下方式更改值：
- 最高边距：15vw
- 左边距：12vw（桌面），30vw（平板电脑和手机）
- 顶部填充：32vw（台式机）、67vw（平板电脑）、60vw（手机）
边界
通过添加边框完成模块设计。
- 边框宽度：2vw（桌面）、4vw（平板电脑）、5vw（手机）
- 边框颜色：#00ffb2
将文本模块 #2 添加到第 1 列
添加内容
将另一个文本模块添加到第 1 列并输入您选择的一些内容。
背景颜色
将背景颜色与列的第二个渐变颜色匹配。
- 背景颜色：#2e2d3c
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：蒙特塞拉特
- 文字字体粗细：粗体
- 文本字体样式：大写
- 文本对齐：居中
- 文字颜色：#f3f3e6
- 文字大小：4vw
- 文字字母间距：-0.2vw
浆纱
也改变宽度。
间距
然后，转到间距设置并使用不同屏幕尺寸的值。
- 最高边距：-23.2vw（台式机），-46vw（平板电脑和手机）
- 左边距：21.5vw（台式机）、64.5vw（平板电脑）、64vw（手机）
- 顶部填充：4vw
- 底部填充：4vw
- 左填充：2vw
- 右填充：2vw
变换旋转
通过在变换设置中旋转模块来完成模块的设置。
将图像模块添加到列
上传图片
第 1 列中我们需要的下一个也是最后一个模块是图像模块。 上传您选择的半透明图像。
浆纱
转到设计选项卡并启用“强制全宽”选项。 这将帮助我们使图像在不同的屏幕尺寸上响应。
间距
接下来打开间距设置并按如下方式更改值：
- 在图像下方显示空间：否
- 最高边距：-6vw
- 左边距：3vw
- 右填充：22vw（桌面）、47vw（平板电脑和手机）
过滤器
我们还在滤镜设置中降低了图像的饱和度。
将文本模块 #2 添加到第 2 列
添加内容
进入下一栏！ 输入您选择的一些内容。
文字设置
转到设计选项卡并更改文本设置，如下所示：
- 文字字体：蒙特塞拉特
- 文本对齐：对齐
- 文字颜色：#2e2d3c
- 文字大小：0.9vw（桌面）、2.2vw（平板电脑）、2.5vw（手机）
- 文字行高：2.5em
间距
接下来添加一些自定义间距值。
- 最高边距：10vw（台式机）、15vw（平板电脑和手机）
- 左填充：8vw
- 右填充：8vw
克隆文本模块
完成文本模块后，将其克隆一次。
删除上边距
删除副本的上边距。
在第 2 列的两个文本模块之间放置新的文本模块
添加内容
在列中的两个现有文本模块之间添加另一个文本模块，然后输入您选择的一些内容。
文字设置
更改文本设置如下：
- 文字字体：蒙特塞拉特
- 文本字体粗细：半粗体
- 文字颜色：#2e2d3c
- 文字大小：2vw（桌面）、5vw（平板电脑和手机）
- 文字行高：1.4em
间距
也更改填充值。
- 顶部填充：4vw（桌面）、8vw（平板电脑）、10vw（手机）
- 底部填充：4vw（桌面）、8vw（平板电脑）、10vw（手机）
- 左填充：4vw
- 右填充：4vw
将按钮模块添加到第 2 列
添加副本
到下一个也是最后一个按钮模块。 插入您选择的一些副本。
按钮设置
转到设计选项卡并更改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字大小：0.9vw（桌面）、2.5vw（平板电脑）、3vw（手机）
- 按钮文本颜色：#f3f3e6
- 按钮背景颜色：#2e2d3c
- 按钮边框宽度：0px
- 按钮边框半径：0px
- 按钮字体：蒙特塞拉特
间距
通过添加一些自定义间距值来完成按钮模块设计，您就完成了！
- 最高利润：2vw（桌面），8vw（平板电脑和手机）
- 底边距：10vw（台式机）、15vw（平板电脑和手机）
- 左边距：8vw
- 顶部填充：1.5vw（台式机）、2.5vw（平板电脑）、3vw（手机）
- 底部填充：1.5vw（台式机）、2.5vw（平板电脑）、3vw（手机）
- 左填充：4vw（桌面）、8vw（平板电脑）、10vw（手机）
- 右填充：4vw（桌面）、8vw（平板电脑）、10vw（手机）
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何创造性地使用空模块的低 z 索引边框设置来创建令人惊叹的结果。 我们还在设计中包含了一些旋转的副本。 本教程将展示 Divi 的内置选项的多功能性以及如何调整每个元素的设置以使其与不同的屏幕尺寸相匹配。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
