WordPress divi主题

如何将下拉联系表添加到您的全局标题

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

当您使用 Divi 的主题构建器为您的网站构建自定义标题时,您会发现自己正在寻找添加 CTA 的理想方式。 您可以采取的一种方法是添加下拉联系表格。 这将帮助您保持标题的整体外观和感觉干净,同时仍然提供无需滚动即可联系的可能性。 在本教程中,我们将向您展示如何使用 Divi 和一些 JQuery 和 CSS 代码创建下拉联系表单。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

下拉联系表格

移动的

下拉联系表格

免费下载全局标题模板

要使用免费的全局标题模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1. 转到 Divi Theme Builder 并开始构建全局标题

转到 Divi 主题生成器

首先转到 WordPress 网站后端的 Divi Theme Builder。

下拉联系表格

构建全局标题

单击“添加全局标题”并选择“构建全局标题”以开始构建自定义全局标题。

下拉联系表格

WordPress divi主题

2.构建标题设计

部分设置

背景颜色

进入全局标题模板后,您会注意到一个部分。 打开该部分并使用白色背景颜色。

  • 背景颜色:#FFFFFF

下拉联系表格

间距

接下来删除该部分的默认顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

下拉联系表格

盒子阴影

也应用一个微妙的盒子阴影。

  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.15)

下拉联系表格

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

下拉联系表格

浆纱

在不添加任何模块的情况下,打开行设置并更改大小设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:95%
  • 最大宽度:100%

下拉联系表格

fiverr建站WordPress程序员

间距

接下来添加一些自定义顶部和底部填充。

  • 顶部填充:1vw
  • 底部填充:1vw

下拉联系表格

主要元素

并通过将一行 CSS 代码添加到行的主要元素来对齐所有列内容。

align-items: center;

下拉联系表格

第 2 列 Z 索引

我们还确保第二列具有更高的 z 索引值以用于响应目的。

独立站选品工具

下拉联系表格

将图像模块添加到第 1 列

上传徽标

是时候开始添加模块了! 从第 1 列中的图像模块开始。上传徽标。

下拉联系表格

结盟

接下来更改模块的对齐方式。

下拉联系表格

高质量外链购买

浆纱

也修改宽度。

  • 宽度:3vw(桌面)、5vw(平板电脑)、7vw(手机)

下拉联系表格

将菜单模块添加到第 2 列

选择菜单

在第二列中,我们将添加一个菜单模块。

下拉联系表格

布局

转到模块的设计选项卡并更改布局样式。

JasperAI 10000字免费额度试用

下拉联系表格

菜单文字设置

接下来修改模块的菜单文本设置。

  • 菜单字体:Open Sans
  • 菜单字体粗细:半粗体
  • 菜单文字颜色:#000000
  • 菜单文字大小:0.8vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 菜单字母间距:1px

下拉联系表格

下拉菜单文本设置

然后,更改下拉菜单行颜色。

  • 下拉菜单行颜色:#007dff

下拉联系表格

WordPress备份工具updrafplus

图标

连同汉堡菜单图标颜色。

  • 汉堡菜单图标颜色:#007dff

下拉联系表格

将文本模块 1 添加到第 3 列

添加副本

进入第三个模块! 添加带有您选择的一些副本的文本模块。

下拉联系表格

背景颜色

接下来添加背景颜色。

  • 背景颜色:#007dff

下拉联系表格

文字设置

转到模块的设计选项卡并相应地更改文本设置:

  • 文字字体:Open Sans
  • 文字字体粗细:粗体
  • 文字颜色:#ffffff
  • 文字大小:0.8vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 文本对齐:居中

下拉联系表格

浆纱

接下来修改模块的大小设置。

  • 宽度:33%
  • 模块对齐:中心

下拉联系表格

间距

然后,添加一些自定义顶部和底部填充。

  • 顶部填充:0.8vw(桌面)、2vw(平板电脑和手机)
  • 底部填充:0.8vw(桌面)、2vw(平板电脑和手机)

下拉联系表格

边界

并通过添加一些边框半径来完成模块的设置。

下拉联系表格

将文本模块 2 添加到第 3 列

向内容框添加符号

进入下一个模块,这是另一个文本模块。 在内容框中添加以下箭头符号:“▼”。

下拉联系表格

文字设置

转到模块的设计选项卡并相应地更改文本设置:

  • 文字字体:Open Sans
  • 文字颜色:#007fff
  • 文字大小:3vw
  • 文本行高:0em
  • 文本对齐:居中

下拉联系表格

Z 指数

我们也在增加模块的 z 索引。

下拉联系表格

将联系表单模块添加到第 3 列

添加全宽选择字段

第三列中我们需要的下一个也是最后一个模块是联系表单模块。 添加您需要的所有全角字段。

下拉联系表格

添加标题

也使用标题。

下拉联系表格

背景颜色

接下来我们将更改背景颜色。

  • 背景颜色:#e7f2ff

下拉联系表格

字段设置

然后,转到模块的设计选项卡并更改字段设置。

  • 字段背景颜色:#ffffff
  • 字段文本颜色:#dddddd
  • 字段焦点文本颜色:#007dff
  • 字段顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 字段底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 字段字体:Open Sans

下拉联系表格

  • 字段文本大小:0.7vw(桌面)、1.8vw(平板电脑)、3vw(手机)

下拉联系表格

标题文本设置

接下来修改标题文本设置。

  • 标题标题级别:H3
  • 标题字体粗细:粗体
  • 标题文本对齐方式:居中
  • 标题文字颜色:#007dff
  • 标题文字大小:1vw(桌面)、2.5vw(平板电脑)、3.5vw(手机)
  • 标题行高度:1.6em

下拉联系表格

验证码文本设置

连同验证码文本设置。

  • 验证码字体:Open Sans
  • 验证码文本颜色:#007dff

下拉联系表格

按钮设置

继续设置按钮样式。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.8vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#007dff
  • 按钮边框宽度:0px
  • 按钮边框半径:100px

下拉联系表格

  • 按钮字体:Open Sans
  • 按钮字体粗细:粗体

下拉联系表格

  • 按钮顶部边距:1vw
  • 按钮顶部填充:1vw(桌面)、2vw(平板电脑和手机)
  • 按钮底部填充:1vw(桌面)、2vw(平板电脑和手机)
  • 按钮左侧填充:2vw(桌面)、7vw(平板电脑和手机)
  • 按钮右侧填充:2vw(桌面)、7vw(平板电脑和手机)

下拉联系表格

间距

然后,在不同的屏幕尺寸上使用一些自定义填充值。

  • 顶部填充:4vw(桌面)、6vw(平板电脑和手机)
  • 底部填充:4vw(桌面)、6vw(平板电脑和手机)
  • 左填充:2vw(桌面)、6vw(平板电脑和手机)
  • 右侧填充:2vw(桌面)、6vw(平板电脑和手机)

下拉联系表格

边界

接下来修改边框设置。

下拉联系表格

主要元素、联系人标题和验证码 CSS

通过向高级选项卡添加一些小的 CSS 更改来完成模块的设置。

主要元素:

border-radius: 20px;

联系人标题:

margin-bottom: 1vw;

验证码:

margin-top: 1.5vw;

下拉联系表格

3.自定义元素以在单击时创建联系表

添加第 3 列高度

一旦你有了所有的模块,就可以创建效果了。 实现预期结果的第一步是打开第 3 列设置并在高级选项卡中添加一些响应式自定义高度。

桌面:

height: 3vw;

药片:

height: 5vw;

电话:

height: 6vw;

下拉联系表格

将 CSS 类添加到按钮和箭头

然后,我们将在第 3 列的两个第一个文本模块中添加相同的 CSS 类。

下拉联系表格

将 CSS 类添加到联系表单

我们还需要为联系表单模块定制一个 CSS 类。

  • CSS 类:contact-form-module

下拉联系表格

隐藏联系表格模块

继续向联系表单模块的主要元素添加一行额外的 CSS 代码。 这将允许我们在单击之前隐藏模块。

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;
}

下拉联系表格

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

下拉联系表格

移动的

下拉联系表格

最后的想法

在这篇文章中,我们向您展示了如何将下拉联系表单添加到您的自定义标题中。 这是从一开始就触发行动的好方法。 我们还免费共享了 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题