如何使用 Divi 创建动画移动拆分内容英雄部分
已发表: 2019-04-01创建一个突出的英雄部分非常重要。 它不仅应该脱颖而出，而且还应该分成多个元素，以增强对那里的行动呼吁。 易于理解的结构拆分内容英雄部分使它们在不同类型的网站中非常流行和频繁使用。
虽然为桌面制作拆分内容的英雄部分很简单，但为较小的屏幕尺寸制作它们可能不是。 这就是本教程派上用场的地方。 我们将重新创建一个高度互动的移动分割英雄部分，它不仅在移动设备上看起来不错，而且在所有不同的屏幕尺寸上都很好。 我们还结合了一些很棒的动画，使设计风格与 2019 完美匹配。 我们希望本教程能激发您创建自己的移动拆分内容英雄部分。
让我们开始吧！
预览
在深入学习本教程之前，让我们先看看不同屏幕尺寸的结果。
移动的
桌面
让我们开始重建吧！
添加新部分
间距
首先创建一个新页面或打开一个现有页面。 添加一个新的常规部分，转到间距设置并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加新行
列结构
继续使用以下列结构添加新行：
背景颜色
尚未添加任何模块，打开行设置并添加完全黑色的背景色。
- 背景颜色：#000000
第 1 列背景颜色
还将黑色背景色添加到第一列。
- 第 1 列背景颜色：#000000
第 2 列背景颜色
第二列也是一样。
- 第 2 列背景颜色：#000000
浆纱
然后，转到大小设置并允许行及其列占据屏幕的整个宽度。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
间距
我们还将删除该行的所有默认顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
- 右填充：1vw
展示
最后但并非最不重要的一点是，我们将确保两列在较小的屏幕尺寸上也彼此相邻。 为此，我们需要向该行的高级选项卡添加一行 CSS 代码。
display: flex;
将图像模块添加到第 1 列
将图像框留空
是时候添加我们需要的所有不同模块了！ 从第一列中的图像模块开始。 我们将在接下来的步骤中将图像上传到背景设置，而不是将图像上传到图像框。 这将允许我们处理图像的定位方式以及它在我们一行中占用多少空间。
添加背景颜色
转到图像模块的背景设置并添加背景颜色。 在下一步中，我们将使用混合效果将此背景颜色与背景图像结合起来，使图像变暗。
- 背景颜色：#686868
添加背景图片
添加您选择的背景图像并相应地修改背景设置：
- 背景图片尺寸：封面
- 背景图片位置：中心
- 背景图像重复：不重复
- 背景图像混合：相乘
浆纱
我们为正在处理的行使用了两个大小相同的列，但结果看起来并非如此。 我们将手动更改我们添加的每个模块的大小，使其看起来好像我们正在使用不同的列结构。 我们这样做的原因（而不是仅仅选择另一种列结构）是为了让所有内容在较小的屏幕尺寸上看起来也很好并且响应迅速。 转到图像模块的大小设置并修改宽度。
- 宽度：88%
- 模块对齐：左
间距
我们现在可以在间距设置中决定图像的大小。 我们还为这些值使用了一个视口单位，以确保我们的设计在所有屏幕尺寸上都保持完全响应。
- 顶部填充：26.3vw（桌面）、48vw（平板电脑）、72vw（手机）
- 底部填充：26.3vw（台式机）、48vw（平板电脑）、72vw（手机）
动画片
最后但并非最不重要的一点是，我们将向图像模块添加幻灯片动画。 应用动画后，您会注意到图像只会从进入第一列的那一刻开始显示。 第二列的背景颜色在向左滑动时保持在图像模块的顶部。
- 动画风格：幻灯片
- 动画重复：一次
- 动画方向：左
- 动画持续时间：1450ms
- 动画强度：60%
- 动画开始不透明度：100%
将按钮模块添加到第 1 列
添加副本
我们在第 1 列中需要的下一个模块是按钮模块。 输入您选择的一些副本。
按钮设置
然后，转到设计选项卡并更改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字大小：1.5vw（桌面）、2.5vw（平板电脑）、4vw（手机）
- 按钮文字颜色：#ffffff
- 按钮背景颜色：#e02b20
- 按钮边框宽度：0px
- 按钮边框半径：1px
- 按钮字体： Poppins
- 字体粗细：重
间距
还要修改间距值。
- 上边距：-3.3vw（桌面）、-6vw（平板电脑）、-9.1vw（手机）
- 左填充：8vw
- 右填充：8vw
盒子阴影
并添加一个微妙的框阴影以在页面上创建一些深度。
- 框阴影模糊强度：20px
- 阴影颜色：rgba(0,0,0,0.27)
将文本模块 #1 添加到第 2 列
添加H1内容
进入第二列！ 我们需要的第一个模块是文本模块。 添加一些您选择的 H1 内容。
H1 文本设置
然后，转到设计选项卡并修改 H1 文本设置。
- 标题字体： Poppins
- 标题文字颜色：#ffffff
- 标题文字大小：4vw（桌面）、5vw（平板电脑）、6vw（手机）
间距
也改变间距值。
- 最高利润率：12vw
- 左边距：-20vw
- 右边距：17vw（桌面）、15vw（平板电脑）、1vw（手机）
动画片
并添加一个微妙的动画。
- 动画风格：幻灯片
- 动画重复：一次
- 动画方向：下
- 动画持续时间：1450ms
- 动画强度：10%
- 动画开始不透明度：100%
将分隔模块添加到第 2 列
能见度
我们在第二列中需要的下一个模块是分频器模块。 确保启用了“显示分隔线”选项。
- 显示分隔线：是
颜色
然后，转到设计选项卡并更改分隔线颜色。
- 颜色：#e02b20
动画片
接下来将动画添加到分隔器模块。
- 动画风格：幻灯片
- 动画重复：一次
- 动画方向：右
- 动画持续时间：1450ms
- 动画强度：83%
- 动画开始不透明度：100%
将文本模块 #2 添加到第 2 列
添加内容
在第二列中我们需要的下一个也是最后一个模块！ 添加您选择的描述。
文字设置
然后，转到设计选项卡中的文本设置并相应地进行一些更改：
- 文字字体： Poppins
- 文字字体粗细：轻
- 文字颜色：#919191
- 文字大小：0.7vw（桌面）、1.8vw（平板电脑）、2.2vw（手机）
- 文字字母间距：0.1vw
- 文本行高：2.2em
间距
还要修改间距值。
- 上边距：9vw（桌面）、19vw（平板电脑）、23vw（手机）
- 下边距：12vw（桌面）、19vw（平板电脑）、23vw（手机）
- 左边距：-3vw
- 右边距：20vw（桌面）、6vw（平板电脑）、3vw（手机）
动画片
最后但并非最不重要的一点是，向模块添加淡入淡出动画，您就大功告成了！
- 动画风格：淡入淡出
- 动画重复：一次
- 动画持续时间：1450ms
- 动画延迟：1000ms
- 动画开始不透明度：0%
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
移动的
桌面
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 创建令人惊叹的拆分内容英雄部分。 拆分内容的英雄部分在网络上非常流行并且经常使用，但确保它们具有高度响应性也很重要。 我们希望本教程能帮助您为即将构建的网站创建移动拆分内容的英雄部分！ 如果您有任何问题或建议，请务必在下方评论区留言！