在考虑在页面设计中包含 CTA 的方法时，您可能会考虑在您的英雄部分中包含一个联系表。 这种方法允许人们立即与您取得联系，而无需在您的网站上进一步导航。 如果您正在寻找一种无缝方式在 Divi 中进行这项工作，那么您会喜欢这篇文章的。 在本教程中，我们将向您展示如何仅使用 Divi 的内置选项将滑入式列联系表单添加到您的英雄部分。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载专栏联系表英雄部分布局
要掌握免费的专栏联系表格英雄部分布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
让我们开始重新创建
添加新部分
背景颜色
首先向您正在处理的页面添加一个新部分。 打开部分设置并更改背景颜色。
- 背景颜色：#ff8949
背景图片
接下来我们将上传一个背景图案，它是财务顾问布局包的一部分。 您可以在本文开头下载的文件夹中找到此背景图片。
- 背景图像大小：适合
- 背景图像位置：中心
间距
转到该部分的设计选项卡并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
溢出
通过隐藏高级选项卡中的溢出来完成部分设置。 这将确保我们稍后添加的动画不会超出部分容器。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加新行
立柱结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并修改大小设置，如下所示：
- 均衡柱高：是
- 宽度：80%（桌面）、100%（平板电脑和手机）
- 最大宽度：1380px
- 行对齐：右
间距
接下来删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
第 1 列设置
间距
然后，打开第 1 列设置，修改不同屏幕尺寸的间距设置。
- 顶部填充：22%
- 底部填充：22%
- 左侧填充：10%（仅限平板电脑和手机）
- 右侧填充：10%（仅限平板电脑和手机）
第 2 列设置
背景颜色
接下来，我们将打开第 2 列设置并使用白色背景颜色。
- 背景颜色：#ffffff
动画片
我们将通过应用以下动画设置来完成第 2 列的设置：
- 动画方向：左（桌面），上（平板电脑和手机）
- 动画时长：1500ms
- 动画强度：70%
- 动画开始不透明度：100%
将文本模块 #1 添加到第 1 列
添加H1内容
是时候添加模块了，从第 1 列中的第一个文本模块开始。添加一些您选择的 H1 内容。
H1 文字设置
转到模块的设计选项卡并更改 H1 文本设置，如下所示：
- 标题字体：Oswald
- 标题字体样式：大写
- 标题文字颜色：#ffffff
- 标题文字大小：120 像素（桌面）、70 像素（平板电脑）、60 像素（手机）
浆纱
我们也在更改模块的大小设置。
- 宽度：75%（桌面）、100%（平板电脑和手机）
- 模块对齐：左
将文本模块 #2 添加到第 1 列
添加描述内容
进入下一个模块，这是另一个文本模块。 添加一些您选择的描述内容。
文字设置
转到模块的设计选项卡并相应地更改文本设置：
- 文字字体：Open Sans
- 文字颜色：#ffffff
- 文字行高：1.9em
浆纱
也修改大小设置。
- 宽度：75%（桌面）、100%（平板电脑和手机）
- 模块对齐：左
将按钮模块添加到第 1 列
添加副本
第 1 列中我们需要的最后一个模块是按钮模块。 添加一些您选择的副本。
按钮设置
转到模块的设计选项卡并更改按钮设置，如下所示：
- 为按钮使用自定义样式：是
- 按钮文字颜色：#ffffff
- 按钮边框半径：1px
- 按钮字体：Oswald
- 按钮字体样式：大写
将 Blurb 模块添加到第 2 列
添加内容
到第二列。 在那里，我们需要的第一个模块是一个 Blurb 模块。 添加您选择的标题。
选择图标
接下来，选择一个图标。
图标设置
转到模块的设计选项卡并更改图标设置，如下所示：
- 图标颜色：#ffd8c6
- 图标位置：顶部
- 图标对齐：居中
- 使用图标字体大小：是
- 图标字体大小：250px（桌面）、150px（平板电脑和手机）
标题文本设置
接下来修改标题文本设置。
- 标题标题级别：H2
- 标题字体：Oswald
- 标题字体样式：大写
- 标题文本对齐方式：居中
- 标题文字颜色：#ff8949
- 标题文字大小：38px
间距
也添加一些左右填充。
- 左填充：11%
- 右填充：11%
动画片
并通过添加以下动画设置来完成模块：
- 动画方向：下
- 动画时长：1100ms
- 动画延迟：400ms
- 动画开始不透明度：100%
将联系表单模块添加到第 2 列
将字段全宽
到最后一个模块，即联系表单模块。 分别打开名称和电子邮件字段，并在布局设置中将它们设为全角。
背景颜色
然后，返回到常规联系表单模块设置并添加背景颜色。
- 背景颜色：#f7f7f7
字段设置
转到设计选项卡，然后对字段设置进行一些更改。
- 字段背景颜色：#ffffff
- 字段文本颜色：#ff8949
- 字段上边距：15px
- 字段下边距：15px
- 字段顶部填充：20px
- 字段底部填充：20px
- 字段字体：Oswald
- 字段字体样式：大写
- 字段文本对齐方式：居中
- 字段文本大小：21px
按钮设置
然后，相应地设置按钮样式：
- 为按钮使用自定义样式：是
- 按钮文字颜色：#ff8949
- 按钮边框半径：1px
- 按钮字体：Oswald
- 按钮字体样式：大写
浆纱
我们还在尺寸设置中确保宽度为“100%”。
间距
接下来继续间距设置并应用一些自定义填充值。
- 顶部填充：14%
- 底部填充：14%
- 左填充：12%
- 右填充：12%
动画片
然后，使用以下动画设置：
- 动画风格：幻灯片
- 动画方向：向上
- 动画时长：1100ms
- 动画延迟：400ms
- 动画开始不透明度：100%
位置
并通过仅在桌面上重新定位模块来完成模块设置（和教程）：
- 位置：绝对（桌面），默认（平板电脑和手机）
- 位置：底部中心
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何在您的英雄部分无缝地包含联系表。 更具体地说，我们创建了一个滑入式列联系表单，该表单在所有屏幕尺寸上看起来都很棒。 您还可以免费下载 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
