石景山网络建设：如何使用Divi在Click上创建联系人表单

在本Divi教程中，石景山网络建设将向您展示如何通过使用Divi、一些jQuery代码和CSS代码创建在单击按钮(作为覆盖)后出现的联系人表单。

这是一个很好的方式，让你的网站访问者集中在他们承诺的行动，通过点击一个按钮。它不会将它们带到不同的页面，但在完成之前将它们锁定在该操作中。

在下面，您可以在我们将要创建的内容上取得一个快速的高峰，然后跳到教程中！

桌面结果

电话及平板电脑结果

灵感

这篇文章的灵感来源于评论请求，并在B3多媒体。尽管他们正在使用另一种方法来完成这项工作，但是他们也有一种惊人的方法来创建一个点击联系表单。看看结果：

用按钮模块创建区段

通常，我们将展示如何在Divi的前端视觉构建器中完成几乎所有的工作。然而，在今天的文章中，我将使用后端构建器。因为我们使用的代码比较容易一些。也就是说，如果您像我们一样热爱前端编辑器，那么您可以使用前端“骨架”视图轻松地完成本教程。

好的，让我们进入本教程！

订阅我们的YOUTUBE频道

我们需要做的第一件事是添加一个新的部分，在其中我们放置按钮，允许联系人表单弹出。只需添加一个标准部分并选择一列行。一旦你这样做了，添加一个按钮模块到它。

您可以随意设置按钮的样式，但您必须确保按钮URL以“#”开头，然后是其他内容。你不能把它留空，也不能只使用“#”字符。通过添加“#”和一些文本，一旦单击按钮，页面就不会移动。如果将其保留为空白，则该页将在单击时刷新。如果你只使用“#”，你就会被发送到页面的顶部。

我们需要做的下一件重要的事情是为按钮分配一个CSS类。稍后，我们将在jQuery代码中使用这个CSS类，以确保单击后弹出联系人表单。我们需要分配给按钮的类就是“按钮”。

点击创建桌面联系人表单

我们需要做的下一件事是创建桌面联系人表单，一旦有人单击我们在文章的前一部分中创建的按钮，该表单就会出现。在这篇文章的后面，我们还将向您展示如何创建移动版本。

您基本上可以在一行内创建任何您想要的设计，如果使用此方法，则可以使其显示为弹出。通过向您展示如何创建以下示例，我们只会让您体验一下您可以实现的目标：

增加新的标准部分

首先，在您正在处理的页面中添加一个新的标准部分。转到刚才添加的部分的“高级”选项卡，并将“弹出”添加到CSSClass字段中。向下滚动该选项卡，并将以下几行CSS代码放入自定义CSS子类别的“前”字段中：

01

02

03

04

05

06

07

08 top: 0px;

left: 0px;

width: 100%;

height: 100%;

z-index: 999;

content: "";

background: rgba(0,0,0, 0.8);

position: fixed;

通过添加这一项，石景山网络建设确保该部分占据了整个选项卡。您可以调整CSS代码中的背景色以创建所需的背景覆盖。在这个例子中，我们使用的是带有一定透明度的黑色。在同一选项卡中，还将以下CSS代码行添加到主元素中：

01 display: none;

在“高级”选项卡中，我们需要做的最后一件事是禁用可见性子类别中的电话和平板电脑部分。

加两列行

继续添加两列行并转到“设计”选项卡。首先修改“大小”子类别中行的宽度。在本例中，我们使用了1291px的自定义宽度。

向下滚动“设计”选项卡，并在间隔子类别中使用“30 px”作为两列的上、左和右填充。

最后转到高级选项卡。在主元素中，添加以下CSS代码行：

01

02

03

04

05

06

07 transform: translatey(-50%) translatex(-50%);

position: fixed;

top: 50%;

left: 50%;

z-index: 1000;

border: 2px solid #0c71c3;

border-radius: 8px;

添加第一个文本模块

一旦对部分和行进行了所有更改，就应该添加要显示的不同模块了。我们要添加的第一件事是出现的标题。首先，向行的第一列添加一个新的文本模块，在Content选项卡中写入文本，然后继续到Design选项卡。在“设计”选项卡中，我们对文本子类别使用了以下设置：

文本定位：中心

文本字体：龙虾

字体样式：粗体

文本字体大小：37

文本颜色：#002282

文本线高度：1.7em

添加第二个文本模块

继续添加一个新的文本模块，并键入您希望显示在“内容”选项卡中的文本。移至“设计”选项卡，并将下列设置应用于文本子类别：

文本定位：中心

文本字体：Arial

文本字体大小：13

文本颜色：#002282

文本线高度：1.7em

添加社交媒体跟踪模块

接下来，我们将把社交媒体跟踪模块添加到第一栏中。在这个例子中，我们选择了三个社交图标：Facebook、Twitter和Instagram。在“内容”选项卡中添加这些社交图标后，将“链接”形状更改为图标子类别中的“圆圈”。

我们需要做的最后一件事是在Advanced选项卡中向这个模块添加一个左填充。将以下CSS代码行添加到主元素：

01 padding-left: 40%;

添加联系人表单模块

然后，石景山网络建设可以转到行的第二列。在那一栏中，我们要做的第一件事是联系人表单模块。对于这个例子，我们只选择了两个字段：名称和电子邮件。添加联系人表单模块后，转到Contact Form Module的Design选项卡，并对Form Field文本子类别进行以下更改：

表单字段字体大小：15

表单字段文本颜色：#002282

野战线高度：1.7em

在同一选项卡中，对Button子类别进行以下更改：

为按钮使用自定义样式：是

按钮文本大小：20

按钮文本颜色：#FFFFFF

按钮背景颜色：#0086c4

按钮边框宽度：2

按钮半径：3

移到“高级”选项卡，并添加5%的顶部填充。

添加Blurb模块

我们需要添加到第二列的另一件事是Blurb模块。我们唯一需要这个模块的是弹出窗口右上方的退出图标。在图标列表中选择以下图标，并将所有其他内容保留为空白。

继续，转到Advancedtab并键入“Close”作为CSS类。在同一选项卡中，将以下代码行添加到自定义CSS子类别的主元素：

01

02

03

04 position: absolute;

top: -45px;

right: -30px;

cursor: pointer;

将梯度背景应用于行

最后但并非最不重要的是，我们将添加一些漂亮的渐变背景到行。打开设置并对渐变背景选项进行以下更改：

第一渐变颜色：#FFFFFF

第二渐变颜色：#0c71c3

梯度型：线性

梯度方向：124德克

起始位置：50%

期末职位：50%

点击创建平板电话联系人表单

既然我们已经创建了桌面版本，平板电脑和手机的版本就会快得多。我们为桌面版本使用的大多数模块对于移动版本都是相同的。移动终端的最终结果如下：

增加新的标准部分

首先添加另一个标准部分。本节将需要具有与我们之前创建的部分相同的设置。将“弹出”添加到CSS类中，并将以下几行CSS代码添加到“前”字段中：

01

02

03

04

05

06

07

08 top: 0px;

left: 0px;

width: 100%;

height: 100%;

z-index: 999;

content: "";

background: rgba(0,0,0, 0.8);

position: fixed;

还将下面的CSS代码行添加到主元素中：

01 display: none;

石景山网络建设将在桌面上禁用可见性子类别，而不是像桌面版本那样禁用手机和平板电脑：

增加一列行

对于手机和平板电脑弹出，我们只需要一列。对于这一行，我们将不使用自定义宽度。但是，我们将像桌面版那样应用自定义填充；30 px用于列的顶部、左侧和右侧填充。

我们还需要确保将以下几行CSS代码添加到自定义CSS子类别中的主元素中：

01

02

03

04

05

06

07 transform: translatey(-50%) translatex(-50%);

position: fixed;

top: 50%;

left: 50%;

z-index: 1000;

border: 2px solid #0c71c3;

border-radius: 8px;

复制文本、社交媒体跟踪与联系表单模块

接下来我们需要做的是克隆桌面版本使用的第一个文本模块，以及社交媒体跟踪和联系人表单模块。克隆完它们之后，将它们放在您刚刚创建的新部分的一行中。

克隆Blurb模块&更改高级标签中的CSS代码

您也可以克隆用于桌面版本的Blurb模块，但是CSS代码需要做一些小的更改。与其使用桌面代码，不如使用以下代码：

01

02

03

04 position: absolute;

top: -15px;

right: -25px;

cursor: pointer;

确保“关闭”CSS类也用于Blurb模块。

将梯度背景应用于行

对于移动版本，我们对行的渐变背景使用不同的设置：

第一渐变颜色：#FFFFFF

第二渐变颜色：#0c71c3

梯度型：线性

梯度方向：180度

起始位置：40%

最后职位：40%

将jQuery代码添加到主题选项中

在本教程中，石景山网络建设需要做的最后一件事是添加jQuery代码。您可以通过主题选项或您正在处理的页面中放置的代码模块添加代码。对于这个例子，我们只需要把它放在主题选项中。

要做到这一点，就去你的WordPress Dashboard>Divi>ThemeOptions>Integration>并将jQuery代码的下列行粘贴到网站的头上：

01

02

03

04

05

06

07

08

09 <script type="text/javascript">

jQuery(function($){

jQuery('.button').click(function() {

jQuery('.popup').css('display', 'block');

});

jQuery('.close').click(function() {

jQuery('.popup').css('display', 'none');

});});

</script>

结果

如果您一步地遵循这篇文章，您应该能够在桌面上获得以下结果：

平板电脑和手机的结果如下：

最后思想

在这篇文章中，石景山网络建设向您展示了如何在单击时创建联系人表单。使用这种方法与访问者取得联系是微妙的，但也是有效的。如果您有任何问题或建议，请确保在下面的评论部分留下评论。