WordPress divi主题

使用 Divi 在一个设计中创建多个有针对性的联系表单

by | May 11, 2022 | Divi主题使用教程 | 0 comments

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

您在网站上显示联系表格的方式绝对有助于提高转化率。 除了创建美观且用户友好的联系表格外,您还可以以更有针对性的方式处理它。 在这篇文章中,我们将向您展示如何创建一个设计,其中包含多个联系表单,这些联系表单取决于您的访问者感兴趣的服务。您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

有针对性的联系表格

移动的

有针对性的联系表格

免费下载有针对性的联系表格布局

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

将布局上传到页面后,您仍然需要将 CSS 代码添加到正在处理的页面中。 您可以在本教程的末尾找到 CSS 代码。

订阅我们的 Youtube 频道

让我们开始重建吧!

添加第 1 节

打开一个新的或现有的页面并添加一个新的常规部分。

WordPress divi主题

有针对性的联系表格

添加新行

立柱结构

继续使用以下列结构添加新行:

有针对性的联系表格

添加文本模块

添加H2含量

将文本模块添加到包含您选择的一些 H2 内容的列中。

有针对性的联系表格

H2 文本设置

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

  • 标题 2 字体粗细:超粗体
  • 标题 2 字体样式:大写
  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:#000000
  • 标题 2 文字大小:6vw
  • 标题 2 字母间距:-0.4vw
  • 标题 2 行高:0.8em

有针对性的联系表格

间距

添加一些自定义的顶部和底部边距。

  • 最高边距:2vw
  • 底边距:2vw

有针对性的联系表格

添加第 2 节

渐变背景

在前一个下方添加另一个部分并应用以下渐变背景(或您选择的任何渐变背景):

fiverr建站WordPress程序员
  • 颜色1:#30fff1
  • 颜色2:#4635ff
  • 渐变方向:110度
  • 结束位置:85%

有针对性的联系表格

顶部分隔线

转到设计选项卡并添加顶部分隔线。

  • 分隔线样式:在列表中查找
  • 分隔线排列:在部分内容下方

有针对性的联系表格

底部分隔线

还要添加一个底部分隔线。

  • 分隔线样式:在列表中查找
  • 分隔线排列:在部分内容下方

有针对性的联系表格

独立站选品工具

浆纱

接下来在尺寸设置中更改高度。

有针对性的联系表格

间距

接下来添加一些自定义间距设置。

  • 底边距:30vw(台式机)、45vw(平板电脑)、200vw(手机)
  • 顶部填充:0vw
  • 底部填充:0vw

有针对性的联系表格

CSS 类

稍后在帖子中,我们将添加一些 CSS 代码以使效果生效。 为此,我们将向该部分添加一个 CSS 类。

高质量外链购买
  • CSS 类:接触部分

有针对性的联系表格

添加新行

立柱结构

继续使用以下列结构添加新行:

有针对性的联系表格

溢出

打开行设置并隐藏溢出。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

有针对性的联系表格

JasperAI 10000字免费额度试用

过渡

也删除过渡持续时间。

有针对性的联系表格

添加模糊模块

向内容框添加标题

是时候开始添加模块了! 添加一个 Blurb 模块并输入您选择的代表您的一项服务的标题。

有针对性的联系表格

选择图标

接下来选择一个图标。

WordPress备份工具updrafplus

有针对性的联系表格

默认背景颜色

继续添加默认背景颜色。

  • 背景颜色:#ffffff

有针对性的联系表格

悬停背景颜色

更改悬停时的背景颜色。

  • 背景颜色:#000000

有针对性的联系表格

默认图标设置

转到设计选项卡并相应地更改图标设置:

  • 图标颜色:#000000
  • 使用图标字体大小:是
  • 图标字体大小:2.5vw(桌面)、5vw(平板电脑)、7vw(手机)

有针对性的联系表格

悬停图标设置

修改悬停时的图标颜色。

有针对性的联系表格

默认标题文本设置

接下来打开标题文本设置并应用以下更改:

  • 标题字体粗细:超粗体
  • 标题字体样式:大写
  • 标题文本对齐方式:居中
  • 标题文字颜色:#000000
  • 标题文字大小:0.9vw(桌面)、1.8vw(平板电脑)、3vw(手机)

有针对性的联系表格

悬停标题文本设置

更改悬停时的标题文本颜色。

  • 标题文字颜色:#ffffff

有针对性的联系表格

浆纱

接下来修改不同屏幕尺寸的宽度。

  • 宽度:10vw(桌面)、17vw(平板电脑)、30vw(手机)
  • 模块对齐:中心

有针对性的联系表格

间距

并在间距设置中添加一些自定义边距和填充值。

  • 最高边距:4vw
  • 底边距:4vw
  • 顶部填充:2vw(桌面)、3vw(平板电脑)、6vw(手机)
  • 底部填充:2vw(桌面)、3vw(平板电脑)、6vw(手机)

有针对性的联系表格

边界

我们还通过在边框设置中的每个角落添加“50vw”来将模块变成一个圆圈。

有针对性的联系表格

盒子阴影

也添加一个盒子阴影。

有针对性的联系表格

默认变换比例

继续进行变换设置并确保默认变换比例值保持为“100%”。

有针对性的联系表格

悬停变换比例

在悬停时更改这些值。

有针对性的联系表格

添加联系表

将姓名和电子邮件字段设为全角

我们在这一行中需要的第二个模块是联系表单模块。 添加联系表单后,打开姓名和电子邮件字段并使其全宽。

有针对性的联系表格

有针对性的联系表格

删除消息字段并为特定服务问题插入三个输入字段

接下来添加三个适用于该特定服务的问题。

有针对性的联系表格

禁用验证码

也禁用验证码选项。

有针对性的联系表格

字段设置

转到设计选项卡并相应地更改字段设置:

  • 字段顶部填充:0.6vw(桌面)、0.9vw(平板电脑)、1.5vw(手机)
  • 字段底部填充:0.6vw(桌面)、0.9vw(平板电脑)、1.5vw(手机)
  • 字段文本大小:0.8vw(桌面)、1.6vw(平板电脑)、2.3vw(手机)

有针对性的联系表格

按钮设置

接下来更改按钮的外观。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#000000
  • 按钮边框宽度:0px
  • 按钮字体粗细:超粗体
  • 按钮字体样式:大写

有针对性的联系表格

有针对性的联系表格

间距

也添加一些填充值。

  • 顶部填充:2vw
  • 底部填充:2vw
  • 左填充:2vw
  • 右填充:2vw

有针对性的联系表格

边框设置

最后但同样重要的是,转到边框设置并在每个角落添加“10px”。

有针对性的联系表格

克隆行 3 次

完成第一行后,您可以继续克隆它 3 次。

有针对性的联系表格

更改每个重复行的模糊内容和图标

确保更改每个副本的简介标题和图标。

有针对性的联系表格

有针对性的联系表格

更改每个重复行的服务特定问题

修改联系表格的具体问题。

有针对性的联系表格

附加行设置

默认高度

再次打开第一行的设置,进入尺寸设置并更改不同屏幕尺寸的高度。

  • 高度:18vw(台式机)、27vw(平板电脑)、38vw(手机)

有针对性的联系表格

悬停高度

在悬停时将高度恢复为自动。

有针对性的联系表格

将行大小设置扩展到部分中的所有行

修改第一行的大小设置后,您可以将设置扩展到整个部分的所有行。

有针对性的联系表格

有针对性的联系表格

在台式机和平板电脑上将行并排放置

打开页面设置

最后但同样重要的是,我们将在平板电脑和台式机上将所有四行并排放置。 为此,请打开页面设置。

有针对性的联系表格

插入自定义 CSS

转到自定义 CSS 框并添加以下 CSS 代码行:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

有针对性的联系表格

预览

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

桌面

有针对性的联系表格

移动的

有针对性的联系表格

最后的想法

在这篇文章中,我们向您展示了如何在一个设计中创建多个有针对性的联系表单。 这是了解更多访问者以及他们感兴趣的特定服务的好方法。如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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