如何使用 Divi 的 Theme Builder 自动向所有页面添加底部页面联系表单

当您忙于设置要包含在网站上的所有页面时，您很有可能希望在每个页面的末尾包含一个联系表格，以使访问者的旅程更轻松。 使用 Divi，您当然可以向页面本身添加联系表单，但如果您希望简化流程，那也是可能的。 在今天的 Divi 教程中，我们将向您展示如何一次自动向所有页面添加底部页面联系表单。 我们还将自动添加一个带有锚链接的固定右下角图标，该图标会自动将人们重定向到他们所在页面的联系部分。 您也可以免费下载页面模板！

让我们开始吧。

预览

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

桌面

移动的

免费下载页面模板

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

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

教程概述

• 使用您选择的布局包在您的网站上设置页面
• 设置页面设​​计风格后，您可以在底部页面联系表单中重复使用该设计风格
• 要添加底部页面联系表单，您首先需要创建一个专用于所有页面的新模板
• 创建模板后，您可以开始使用 Divi 的可视化构建器构建模板的主体
• 为了确保所有独特的页面内容都显示在每个页面上，我们将添加帖子内容模块
• 帖子内容模块包含您的整个动态页面设计
• 在帖子内容模块下方，我们将为我们的联系表单添加另一个部分
• 我们将设计联系表单并确保向该部分添加唯一的 CSS ID，我们将使用此 CSS ID 创建一个锚链接
• 奖励：我们将在每个页面的右下角添加一个固定图标，并将该图标链接到该特定页面的联系部分

1. 使用 Layout Pack of Choice 设置网站页面

我们采用的方法适用于您构建的任何类型的网站。 但是对于这个特定的教程，我们使用的是 Magazine Layout Pack 的设计风格。 如果您在任何其他网站上使用这种方法，请随时根据您的需要调整设计。

2.转到Divi Theme Builder并添加新页面模板

转到 Divi 主题生成器并添加新页面模板

转到您网站上的 Divi Theme Builder。 在那里，添加一个新模板。

如果您希望底部页面的联系表单出现在所有页面上，请在所有页面上使用此新模板。 您也可以让它出现在特定页面上和/或从某些页面中排除它。

• 用于：所有页面

开始构建模板主体

创建新模板后，您可以开始构建自定义主体。

3. 将页面内容添加到模板正文

部分设置

间距

在模板编辑器中，您会注意到一个部分。 打开该部分并删除所有默认的顶部和底部填充。

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

添加新行

列结构

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

浆纱

在不添加任何模块的情况下，打开行设置并允许行占据部分容器的整个宽度。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

也删除所有行的默认顶部和底部填充。

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

将帖子内容模块添加到列

继续将 Post Content Module 添加到您行的列中。 此模块代表您创建的所有动态页面内容。

4. 将底部联系表添加到模板正文

添加新部分

渐变背景

在包含发布内容模块的部分下方，我们将添加另一个常规部分。 本节将专门介绍联系表格。 打开部分设置并添加渐变背景。

• 颜色 1：#ffffff
• 颜色 2：#ffc077
• 起始位置：50%
• 结束位置：50%

CSS ID

还包括一个 CSS ID。

• CSS ID：联系方式

添加新行

列结构

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

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

添加 H2 内容

第一列中我们需要的第一个模块是文本模块。 输入您选择的一些内容。

H2 文本设置

转到模块的设计选项卡并按如下方式更改 H2 文本设置：

• 标题 2 字体：蒙特塞拉特
• 标题 2 字体粗细：粗体
• 标题 2 文本颜色：#000000
• 标题 2 文字大小：70 像素（桌面）、48 像素（平板电脑）、36 像素（手机）
• 标题 2 行高：1.2em

浆纱

还要添加最大宽度。

• 最大宽度：750px

将文本模块 #2 添加到第 1 列

添加内容

使用您选择的一些内容将另一个文本模块添加到第 1 列。

文字设置

更改模块的文本设置如下：

• 文字字体：Cardo
• 文字字体粗细：粗体
• 文字颜色：rgba(0,0,0,0.03)
• 文字大小：150 像素（桌面）、100 像素（平板电脑）、60 像素（手机）
• 文本行高：1em

间距

并在不同的屏幕尺寸之间调整间距设置。

• 上边距：-0.8em（桌面）、-100px（平板）、-80px（手机）
• 左边距：-0.8em（桌面和平板电脑），-60px（手机）

将联系表格添加到第 2 列

添加所有需要的字段

在第二列中，我们需要的唯一模块是联系表单模块。 根据需要添加任意数量的字段，并将您的电子邮件帐户链接到模块。

将姓名和电子邮件字段全宽

继续将姓名和电子邮件地址字段全宽。

• 制作全角：是

字段设置

返回一般联系表单设置并更改字段背景颜色。

• 字段背景颜色：#ffffff

按钮设置

接下来修改按钮设置。

• 为按钮使用自定义样式：是
• 按钮文字大小：14px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#000000（默认），#ff2a38（悬停）
• 按钮边框宽度：8px

• 按钮边框颜色：rgba(0,0,0,0)
• 按钮边框半径：0px
• 按钮字母间距：2px
• 按钮字体粗细：超粗
• 按钮字体样式：大写
• 按钮图标：在列表中查找

边界

也添加一些边界半径。

• 所有角：5px

盒子阴影

并通过添加一个微妙的框阴影来完成模块的设置。

• 框阴影模糊强度：50px
• 框阴影扩散强度：-4px
• 阴影颜色：rgba(0,0,0,0.08)

奖励：将固定的右下角锚图标添加到模板正文

添加新部分

间距

现在，要将右下角的固定图标添加到每个页面，我们需要添加另一个常规部分。 打开该部分并删除所有默认的顶部和底部填充。

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

Z索引

也增加部分的 z 索引。 这将确保图标将保留在所有页面内容的顶部。

• Z指数：99999

添加新行

列结构

使用以下列结构向该部分添加新行：

浆纱

打开行设置并允许该行占据该部分的整个宽度。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

删除所有默认的顶部和底部填充。

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

将 Blurb 模块添加到列

将标题和内容框留空

为了显示右下角的图标，我们将使用一个 Blurb 模块。 确保将标题和内容框留空。

选择图标

然后，选择您选择的图标。

关联

通过将 ID 添加到模块链接 URL，将图标链接到联系人部分。

• 模块链接网址：#contact

背景颜色

也更改模块的背景颜色。

• 背景颜色：#ffc077

图标设置

转到模块的设计选项卡并按如下方式更改图标设置：

• 图标颜色：#ffffff
• 图像/图标放置：顶部
• 使用图标字体大小：是
• 图标字体大小：30px

浆纱

还要修改模块的大小设置。

• 宽度：100px
• 模块对齐：右

间距

并添加一些自定义的顶部和底部填充。

• 顶部填充：33px
• 底部填充：33px

边界

然后，转到边框设置并添加一些圆角。

• 所有角落：100px

盒子阴影

还要添加一个框阴影。

• 框阴影模糊强度：50px
• 框阴影扩散强度：-15px
• 阴影颜色：rgba(0,0,0,0.23)

主要元素 CSS

为了使图标固定，我们将在高级选项卡中将三行 CSS 代码应用于模块的主要元素。

bottom: 20px;
right: 20px;
position: fixed;

模糊图像 CSS

并删除模块的图像默认底部填充。

margin-bottom: 0px;

6. 保存所有主题生成器更改和预览结果

完成页面模板的主体后，您可以保存所有更改，退出主题生成器并查看所有页面上的结果！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何一次向所有页面添加底部页面联系表单。 为了实现这一点，我们设置了一个新的页面模板，包括发布内容模块并在模板末尾添加了一个联系部分。 我们还包含了一个固定的右下角图标，带有一个锚链接，可以将访问者重定向到他们所在页面的联系部分。 您还可以免费下载页面模板 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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