如何使用 Divi 的 Theme Builder 创建 404 页面模板

Divi 的 Theme Builder 和内置的设计选项打开了许多新的大门。 您现在比以往任何时候都能够自定义客户登陆的每个页面。 这包括设置 404 页面。 在本教程中，我们将向您展示如何创建漂亮的 404 页面模板并将其立即应用于您的网站。 我们将只使用 Divi 的内置选项，您也可以免费下载模板 JSON 文件。 我们希望本教程能激发您在下一个 404 页面设计中发挥创意。

让我们开始吧！

预览

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

桌面

移动的

免费下载 404 页面模板

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

1.转到Divi Theme Builder并创建新模板

转到 Divi 主题生成器

要开始创建 404 页面模板，请转到 Divi 设置中的 Divi Theme Builder。

创建新模板

单击“添加新模板”并为您的 404 页面设置新模板。

• 使用于：404 页面

隐藏页眉和页脚区域

单击眼睛图标，继续隐藏 404 页面的自定义页眉和页脚。

构建全局体

完成所有前面的步骤后，您可以通过选择“构建自定义正文”开始构建 404 页面正文。

2.开始构建404页面正文

添加新部分

背景颜色

进入模板编辑器后，您会注意到页面上的一个部分。 打开此部分并添加白色背景色。

• 背景颜色：#FFFFFF

底部分隔线

移至该部分的设计选项卡并添加底部分隔线：

• 分隔线样式：在列表中查找
• 分隔线颜色：#ffee00
• 分隔线高度：25vw（台式机）、77vw（平板电脑）、90vw（手机）
• 分隔线翻转：垂直
• 分隔线安排：在部分内容下方

间距

接下来在不同的屏幕尺寸中添加一些自定义填充值。

• 顶部填充：4.6vw（台式机）、23vw（平板电脑）、25vw（手机）
• 底部填充：4.6vw（台式机）、13vw（平板电脑）、11vw（手机）

添加第 1 行

列结构

完成部分设置后，您可以添加第一行。 选择以下列结构：

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。

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

间距

接下来修改行的顶部和底部填充值。

• 顶部填充：2vw
• 底部填充：2vw

将文本模块 1 添加到列

添加内容

是时候开始添加模块了！ 我们需要的第一个模块是文本模块。 插入一些您选择的段落内容。

文字设置

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

• 文字字体：单调
• 文字颜色：#000000
• 文字大小：24vw（桌面），35vw（平板电脑和手机）
• 文本行高：1em
• 文本对齐：居中

将文本模块 #2 添加到列

添加内容

进入下一个模块，这是另一个文本模块。 添加一些您选择的内容。

文字设置

相应地更改模块的文本设置：

• 文字字体：蒙特塞拉特
• 文字颜色：#000000
• 文字大小：1.2vw（桌面）、2.6vw（平板电脑）、3vw（手机）
• 文本行高：1.8em
• 文本对齐：居中

间距

通过添加一些自定义顶部和底部边距来完成模块的设置。

• 最高利润率：2vw
• 底边距：6vw

添加第 2 行

列结构

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

浆纱

打开行设置，调整大小设置如下：

• 宽度：32vw（桌面），50vw（平板电脑和手机）
• 最大宽度：100%

间距

也修改间距设置。

• 上边距：7vw（桌面）、22vw（平板电脑）、59vw（手机）
• 顶部填充：0vw
• 底部填充：0vw

第 1 列和第 2 列设置

默认背景颜色

完成常规行设置后，您可以单独打开每一列并进行一些更改，从背景颜色开始。

• 背景颜色：#FFFFFF

悬停背景颜色

修改悬停时的背景颜色。

• 背景颜色：#fffa00

边界

也添加一些圆角。

• 圆角：20px（所有角）

默认框阴影

转到框阴影设置并应用以下更改：

• 框阴影模糊强度：50px
• 阴影颜色：rgba(0,0,0,0)

悬停框阴影

修改悬停时的阴影颜色。

• 阴影颜色：rgba(0,0,0,0.12)

默认变换比例

然后，转到变换比例设置并确保默认值保持为“100%”。

• 正确：100%
• 底部：100%

悬停变换比例

在悬停时更改变换比例值：

• 正确：110%
• 底部：110%

将文本模块添加到第 1 列

添加内容

完成行和列设置后，将文本模块添加到第 1 列，其中包含您选择的一些段落内容。

添加链接

接下来添加模块的链接。

• 模块链接网址：#
• 模块链接目标：在同一窗口中

文字设置

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

• 文字字体：蒙特塞拉特
• 文字字体粗细：粗体
• 文本字体样式：大写
• 文字颜色：#000000
• 文字大小：0.8vw（桌面）、2vw（平板电脑）、3vw（手机）
• 文字字母间距：1px
• 文本行高：1.8em
• 文本对齐：居中

间距

然后，转到间距设置并在不同的屏幕尺寸上应用一些自定义的顶部和底部填充值。

• 顶部填充：2vw（桌面）、3vw（平板电脑）、4vw（手机）
• 底部填充：2vw（桌面）、3vw（平板电脑）、4vw（手机）

克隆文本模块并在第 2 列中放置重复项

完成文本模块及其所有设置后，您可以克隆整个模块并将副本放在第 2 列中。

更改内容

确保更改重复模块的内容。

更改链接

也换个链接。

3. 保存主题生成器更改

设计完成后，您可以保存所有模板的设置。 就是这样！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何设置和创建 404 页面模板。 Divi 的主题构建器和内置设计选项允许您使用自定义模板触摸网站的每个页面。 我们希望您喜欢所有 Divi Theme Builder 教程！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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