当您为您的 网站Web，使用 Divi 的主题构建器，您会发现自己正在寻找添加 AAL（号召性用语）的完美方式。 一种方法是添加一个 联系表 滚动。 这将帮助您保持标头的整体外观整洁，同时提供输入功能 CONTACT 与您一起，无需向下滚动。 在本教程中，我们将向您展示如何创建一个 联系表 下拉菜单使用 Divi 和 JQuery & CSS 代码。 您还可以免费下载 JSON 文件！
让我们去。
概观
在开始学习本教程之前，让我们看一下不同屏幕尺寸的结果。
1.转到Divi Theme Builder并开始创建全局标题
转到Divi Theme Builder
首先转到WordPress网站后端的Divi Theme Builder。
创建一个全局头
单击“添加全局标题”，然后选择“创建全局标题”以开始创建自定义全局标题。
2.建立标题设计
栏目设置
背景颜色
一旦进入整体标题模板，您将注意到一个部分。 打开此部分并使用白色背景色。
- 背景颜色：#FFFFFF
间距
然后从该部分中删除默认的上部和下部填充。
- 上边距：0px
- 底部填充：0px
影盒
同时应用细微的盒子阴影。
- 方块阴影模糊强度：50像素
- 阴影颜色：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列
选择菜单
在第二列中，我们将添加一个菜单模块。
提供
切换到模块设计选项卡并更改布局样式。
- 风格：居中
菜单文字设置
然后在模块菜单中更改文本设置。
- 菜单字体：打开不带
- 菜单字体粗细：半粗体
- 菜单文字颜色：＃000000
- 菜单文字大小：0.8vw（台式机），2vw（平板电脑），3vw（电话）
- 菜单字母间距：1px
下拉菜单文字设置
然后在下拉菜单中更改线条的颜色。
- 下拉菜单行的颜色：＃007dff
图标
与汉堡菜单图标的颜色。
- 汉堡菜单图标颜色：＃007dff
将1文本模块添加到3列
添加副本
让我们继续第三个模块！ 添加带有所选副本的文本模块。
背景颜色
然后添加背景色。
- 背景颜色：＃007dff
文字设定
切换到模块设计选项卡，并相应地更改文本设置：
- 文字字体：Open Sans
- 文字的字体粗细：粗体
- 文字颜色：#ffffff
- 文字大小：0.8vw（桌面），2vw（平板电脑），3vw（电话）
- 对齐文本：中心
浆纱
然后修改模块尺寸参数。
- 宽度：33％
- 模块对齐：中心
间距
然后添加自定义的上部和下部填充。
- 上部填充：0.8vw（台式机），2vw（平板电脑和手机）
- 底部填充：0.8vw（办公桌），2vw（平板电脑和手机）
接壤
并通过添加边框半径来完成模块参数。
- 所有角点：100px
将2文本模块添加到3列
在内容区域添加符号
让我们继续下一个模块，这是另一个文本模块。 在内容区域中添加以下箭头：“▼”。
文字设定
切换到模块设计选项卡，并相应地更改文本设置：
- 文字字体：Open Sans
- 文字颜色：＃007fff
- 文字大小：3vw
- 文本行的高度：0em
- 对齐文本：中心
Z指数
我们还增加了模块的z索引。
- Z索引：11
将联系表单模块添加到第3列
您现在可以添加一个 联系表 就在包含箭头的文本模块的底部。 该模块使用起来非常简单，因此您需要自定义要使其可见的字段。
3.自定义元素以一键创建联系表单
添加第3列的高度
一旦所有的mod就位了，就该创建效果了。 获得所需结果的第一步是打开第3列中的设置，并在“高级”选项卡中添加响应式自定义高度。
办公室：
height: 3vw;
平板电脑：
height: 5vw;
联系电话：
height: 6vw;
向按钮和箭头添加CSS类
然后，我们将在第3列的前两个文本模块中添加相同的CSS类。
- CSS 类：显示-CONTACT
将CSS类添加到联系表单
我们还将需要一个用于Contact Form模块的自定义CSS类。
- CSS 类： CONTACT-表单模块
隐藏联系表单模块
通过在Contact Form模块的main元素中添加额外的CSS代码行来继续。 这将允许我们在单击之前隐藏模块。
display: none;
使用JQuery和CSS代码将代码模块添加到第3列
为了创建click函数，我们将需要一些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;}
概观
现在我们已经完成了所有步骤，让我们最后看一下它在不同屏幕尺寸下的外观。
办公室
要记住什么
在本文中，我们向您展示了如何在自定义标题中添加下拉式联系表单。 这是尽早触发动作的好方法。
