混合模式可以帮助您对正在处理的设计的美学给予额外的关注，这已经不是什么秘密了。 过去，我们介绍了混合模式提示和技巧，可帮助您创建一些独特而华丽的设计。 现在，由于列更新已经出来，您可以使用这些混合模式做一些额外的事情。 其中之一是创建拆分混合模式标题。 在这篇文章中，我们将向您展示如何通过组合模块和列混合模式、列背景颜色和负边距来获得惊人的结果。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
免费下载拆分混合模式英雄部分
要接触免费的混合模式英雄部分，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
订阅我们的 Youtube 频道
让我们开始重建吧！
添加新部分
间距
向您正在处理的页面添加一个新的常规部分，并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
盒子阴影
移动到盒子阴影选项并添加一个微妙的盒子阴影。
- 盒子阴影模糊强度：70px
- 阴影颜色：rgba(0,0,0,0.07)
添加新行
立柱结构
继续使用以下列结构添加新行：
渐变背景
尚未添加任何模块，打开行设置并应用渐变背景。 在本文的下一步中，我们将使用混合模式将渐变背景与背景图像合并。
- 颜色1：#00cbff
- 颜色 2：#bf35ff
- 渐变方向：96度
背景图片
将背景图像添加到行中，并将其与以下背景图像设置结合使用：
- 背景图片尺寸：封面
- 背景图像位置：中心
- 背景图像重复：无重复
- 背景图像混合：屏幕
浆纱
接下来进入尺寸设置，让行占据部分容器的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
- 宽度：100%
- 最大宽度：100%
间距
删除下一行的所有默认顶部和底部填充。 这将确保我们稍后在本文中添加的第 2 列背景颜色触及行和部分容器的顶部和底部边框。
- 顶部填充：0px
- 底部填充：0px
展示
为了确保两列在较小的屏幕尺寸上彼此相邻，我们将在该行的主要元素中添加一行 CSS 代码。
display: flex;
第 2 列设置
背景颜色
完成常规行设置后，继续打开第二列的设置。 首先添加白色背景颜色。
- 背景颜色：#FFFFFF
过滤器
转到设计选项卡并为整个列添加混合模式。
将分隔模块添加到第 1 列
能见度
是时候开始添加模块了！ 我们在第一列中唯一需要的模块是 Divider Module。 该模块将帮助我们在第一列中创建空间，而无需显示模块。 确保分隔线的“显示分隔线”选项已禁用。
间距
继续进行间距设置并添加一些底部边距以在第一列中创建空间。
将文本模块 #1 添加到第 2 列
添加 H1 标题
进入第二列！ 在这里，我们将从标题文本模块开始。 输入您选择的一些 H1 内容。
H1 文字设置
转到设计选项卡并相应地更改文本设置：
- 标题字体：Poppins
- 标题字体粗细：粗体
- 标题文字颜色：#FFFFFF
- 标题文字大小：12vw
- 标题字母间距：-0.2vw
间距
我们还在模块周围创建了一些空间，并通过应用一些自定义边距值将其推向左侧。 负左边距在创建拆分混合模式中起着重要作用。 它允许副本的一部分出现在不包含任何背景颜色的第一列下方。
- 最高边距：18vw
- 底边距：2vw
- 左边距：-27.3vw
过滤器
现在，在下一步中，奇迹将会发生！ 我们正在结合模块和列混合模式以允许行背景显示。 确保为文本模块选择以下混合模式：
将文本模块 #2 添加到第 2 列
添加内容
进入第二个模块！ 添加一些您选择的内容。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：Poppins
- 文本对齐：对齐
- 文字颜色：#000000
- 文字大小：0.8vw（桌面）、1.5vw（平板电脑）、2.3vw（手机）
- 文本行高：2.5em（台式机和平板电脑），2.2em（手机）
间距
接下来添加一些自定义边距值。
- 底边距：1vw
- 左边距：5vw
- 右边距：14vw（桌面）、4vw（平板电脑）、5vw（手机）
将分隔模块添加到第 2 列
能见度
进入下一个模块，即分频器模块。 确保启用了“显示分隔线”选项。
线
转到设计选项卡并相应地更改线条设置：
- 线条颜色：#FFFFFF
- 线型：实线
- 线位置：顶部
浆纱
修改分隔线的大小设置。
- 分压器重量：0.7vw
- 宽度：9%
- 高度：0px
间距
并添加一些自定义间距值。
- 最高利润：2vw（桌面），5vw（平板电脑和手机）
- 底边距：3vw（桌面）、6vw（平板电脑和手机）
- 左边距：5vw
过滤器
最后但同样重要的是，应用混合模式以允许行背景图像和渐变显示出来。
将按钮模块添加到第 2 列
添加副本
进入下一个也是最后一个模块，这是一个按钮模块。 输入您选择的一些副本。
结盟
转到设计选项卡并确保按钮对齐设置为左。
按钮设置
修改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 按钮文字颜色：#000000
- 按钮边框半径：0px
- 按钮字体：Poppins
间距
最后，在间距设置中添加一些自定义边距和填充值。
- 底边距：10vw（台式机）、15vw（平板电脑和手机）
- 左边距：5vw
- 顶部填充：1vw
- 底部填充：1vw
- 左填充：3vw
- 右填充：3vw
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的新列选项来创建令人惊叹的拆分混合模式标题。 本教程仅展示 Divi 的内置选项的多功能性以及每次 Divi 更新如何不再需要第三方设计软件。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
