需要加一个 联系表 到全球头？
当您为您的 网站Web 使用 Divi Theme Builder，您会发现自己正在寻找添加 CTA（号召性用语）的完美方式。 一种方法是添加一个 联系表 滚动。
这将帮助您保持标题的整体外观整洁，同时提供进入的能力 CONTACT 无需滚动。
在本教程中，我们将向您展示如何创建 联系表 使用 Divi 和 JQuery & CSS 代码可滚动。
让我们开始吧！
概观
在深入学习本教程之前，让我们看一下我们将要获得的结果的预览。
创建一个全局头
转到主题生成器
从 WordPress 仪表板中的 Divi 菜单转到 Theme Builder，然后单击“添加全局标题”。
选择“创建全局标题”。
创建标题样式
栏目设置
背景颜色
进入模板编辑器后，您会注意到一个部分。 打开此部分并更改背景颜色。
- 背景：#FFFFFF
间距
然后从该部分中删除默认的顶部和底部内边距。
- 内边距顶点：0px
- 底部内边距：0px
影盒
还应用一个微妙的盒子阴影。
- 框阴影蓝色强度：50px
- 字幕字体颜色：rgba(0,0,0,0.15)
添加新行
列的结构
使用以下列结构向该部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并更改大小设置，如下所示：
- 使用自定义装订线宽度：是
- 列间距：1
- 协调列高：是
- 最大宽度：95%
- 最大宽度：100%
间距
然后添加自定义的上部和下部填充。
- 峰值内部裕量：1vw
- 底部内边距：1vw
主要元素
通过向主行元素添加一行 CSS 代码来对齐所有列内容。
align-items: center;
第 2 列的 Z 下标
我们还确保第二列具有更高的 z-index 值以进行响应式设计。
- Z指数：12
将图像模块添加到第 1 列
下载徽标
是时候开始添加模块了！ 从第 1 列中的图像模块开始。上传徽标。
对准
然后更改模块的对齐方式。
- 图像对齐：居中
浆纱
同时更改宽度。
- 最大宽度：3vw（桌面）、5vw（平板电脑）、7vw（手机）
将菜单模块添加到第 2 列
选择菜单
在第二列中，我们将添加一个菜单模块。
提供
切换到 Module Style 选项卡并更改布局样式。
- 风格：居中
菜单文字设置
然后在模块菜单中更改文本设置。
- 字体菜单：打开无
- 暗光菜单：半粗体
- 菜单文字颜色：#000000
- 菜单文字大小：0,8 vw（桌面）、2 vw（平板电脑）、3 vw（手机）
- 菜单字母间距：1px
下拉菜单文本设置
接下来，从下拉菜单中更改线条颜色。
- 下拉菜单行颜色：#007dff
图标
更改汉堡菜单图标颜色。
- 汉堡菜单图标颜色：#007dff
将文本模块添加到第 3 列
添加消息
进入第三个模块！ 添加带有您选择的消息的文本模块。
背景颜色
添加背景颜色。
- 背景颜色：#007dff
文字设定
切换到模块设计选项卡并相应地更改文本设置：
- 文字字体：Open Sans
- 柔光文字：粗体
- 文字颜色文字：#ffffff
- 文本 文本大小：0,8 vw（桌面）、2 vw（平板电脑）、3 vw（手机）
- 文本对齐方式：居中
浆纱
然后修改模块尺寸参数。
- 最大宽度：33%
- 模块对齐：中心
间距
接下来，添加自定义顶部和底部填充。
- 最高内部边距：0,8 vw（台式机），2 vw（平板电脑和手机）
- 内部保证金低：0,8 vw（台式机），2 vw（平板电脑和手机）
边框
并通过添加边框半径来完成模块参数。
- 圆角矩形：100px
将另一个文本模块添加到第 3 列
在内容区域添加符号
让我们继续下一个模块，这是另一个文本模块。 在内容区域添加以下箭头符号：“▼”。
文字设定
切换到模块设计选项卡并相应地更改文本设置：
- 文字字体：Open Sans
- 文字颜色：#007fff
- 文字文字大小：3vw
- 文字行高：0em
- 文本对齐方式：居中
Z指数
让我们也增加模块的 z-index。
- Z指数：11
将联系表模块添加到第 3 列
添加您选择的全宽字段
第三列中我们需要的下一个也是最后一个模块是联系表单模块。 添加您需要的任何全角字段。
添加标题
还要使用标题。
背景颜色
接下来，让我们更改背景颜色。
- 背景颜色：#e7f2ff
栏位设定
让我们转到模块的样式选项卡并更改字段设置。
- 背景颜色字段：#ffffff
- 字段文本颜色：#dddddd
- 焦点文本颜色：#007dff
- 顶点填充字段：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 底部填充字段：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 字体字段：打开无
- 字段文本大小：0,7 vw（桌面）、1,8 vw（平板电脑）、3 vw（手机）
标题文字设定
编辑标题文本设置。
- 插入标题三：H3
- 柔光标题：粗体字
- 文本对齐方式：居中
- 标题文字颜色：#007dff
- 标题文字大小：1 vw（桌面）、2,5 vw（平板电脑）、3,5 vw（手机）
- 标题行高：1,6 em
验证码文本设置
带有验证码文本设置。
- 字体验证码：Open Sans
- 验证码文本颜色：#007dff
按钮设定
继续自定义按钮。
- 为按钮使用自定义样式：是
- 按钮文字大小：0,8 vw（桌面）、2 vw（平板电脑）、3 vw（手机）
- 按钮文字颜色：#ffffff
- 背景按钮：#007dff
- 边框宽度按钮：0 像素
- 按钮边框半径：100 px
- 字体按钮：打开无
- 柔光按钮：粗体字
- 按钮边距：1vw
- 顶部填充按钮：1vw（桌面）、2vw（平板电脑和手机）
- 底部填充按钮：1vw（桌面），2vw（平板电脑和手机）
- 左垫按钮：2vw（桌面），7vw（平板电脑和手机）
- 右 Pad 按钮：2vw（桌面）、7vw（平板电脑和手机）
间距
在不同的屏幕尺寸上使用自定义填充值。
- 峰值内部净空：4vw（台式机）、6vw（平板电脑和手机）
- 内边距底部：4vw（台式机）、6vw（平板电脑和手机）
- 左内边距：2vw（桌面）、6vw（平板电脑和手机）
- 右侧内边距：2vw（桌面）、6vw（平板电脑和手机）
边框
然后更改边框设置。
- 输入圆角矩形：10px
主要元素、联系人标题和验证码 CSS
通过向高级选项卡添加一些小的 CSS 更改来完成模块设置。
主要元素：
| 01 | border-radius: 20px; |
标题 CONTACT :
| 01 | margin-bottom: 1vw; |
验证码：
| 01 | margin-top: 1.5vw; |
自定义元素以一键创建联系表单
添加第3列的高度
一旦你有了所有的模块，就可以创建效果了。 获得所需结果的第一步是打开 3 列设置并在高级选项卡中添加自定义响应高度。
桌子 ：
| 01 | height: 3vw; |
平板电脑：
| 01 | height: 5vw; |
称呼：
| 01 | height: 6vw; |
向按钮和箭头添加CSS类
接下来，我们将在第 3 列的前两个文本模块中添加相同的 CSS 类。
- CSS 类：显示-CONTACT
将CSS类添加到联系表单
我们还需要一个用于联系表单模块的自定义 CSS 类。
- CSS 类：contact-form-module
隐藏联系表格模块
继续在联系表单模块的主要元素中添加一行额外的 CSS 代码。 这将允许我们在单击之前隐藏模块。
| 01 | display: none; |
使用 JQuery 和 CSS 代码将代码模块添加到第 3 列
要创建点击功能，我们需要 JQuery 代码。 我们还将使用自定义 CSS 代码。 使用代码将新代码模块添加到第 2 列。 一定要在脚本标签之间放置 JQuery 代码，在样式标签之间放置 CSS 代码。
jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});
.show-contact {
cursor: pointer;
}
.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}
概观
现在我们已经完成了所有步骤，让我们最后看一下结果。
结论
在本文中，我们向您展示了如何将下拉联系表单添加到您的自定义标题中。
如果您有任何疑问或建议，请随时在下面的评论部分中发表评论。
