WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧!

预览

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

桌面

404页面模板

移动的

404页面模板

免费下载 404 页面模板

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

订阅我们的 Youtube 频道

1. 前往 Divi Theme Builder 并创建新模板

转到 Divi 主题生成器

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

404页面模板

WordPress divi主题

创建新模板

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

404页面模板

404页面模板

隐藏页眉和页脚区域

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

404页面模板

建立全球机构

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

404页面模板

2.开始构建404页面正文

添加新部分

背景颜色

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

  • 背景颜色:#FFFFFF

404页面模板

底部分隔线

转到该部分的设计选项卡并添加底部分隔线:

fiverr建站WordPress程序员
  • 分隔线样式:在列表中查找
  • 分隔线颜色:#ffee00
  • 分隔高度:25vw(台式机)、77vw(平板电脑)、90vw(手机)
  • 分频器翻转:垂直
  • 分隔线排列:在部分内容下方

404页面模板

间距

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

  • 顶部填充:4.6vw(台式机)、23vw(平板电脑)、25vw(手机)
  • 底部填充:4.6vw(台式机)、13vw(平板电脑)、11vw(手机)

404页面模板

添加第 1 行

立柱结构

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

404页面模板

独立站选品工具

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。

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

404页面模板

间距

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

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

404页面模板

将文本模块 1 添加到列

添加内容

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

高质量外链购买

404页面模板

文字设置

转到模块的设计选项卡并更改文本设置,如下所示:

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

404页面模板

将文本模块 #2 添加到列

添加内容

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

404页面模板

JasperAI 10000字免费额度试用

文字设置

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

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

404页面模板

间距

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

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

404页面模板

添加第 2 行

立柱结构

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

WordPress备份工具updrafplus

404页面模板

浆纱

打开行设置并调整大小设置,如下所示:

  • 宽度:32vw(桌面)、50vw(平板电脑和手机)
  • 最大宽度:100%

404页面模板

间距

也修改间距设置。

  • 最高边距:7vw(台式机)、22vw(平板电脑)、59vw(手机)
  • 顶部填充:0vw
  • 底部填充:0vw

404页面模板

第 1 列和第 2 列设置

默认背景颜色

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

  • 背景颜色:#FFFFFF

404页面模板

悬停背景颜色

修改悬停时的背景颜色。

  • 背景颜色:#fffa00

404页面模板

边界

也添加一些圆角。

  • 圆角:20px(所有角)

404页面模板

默认框阴影

继续框阴影设置并应用以下更改:

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

404页面模板

悬停框阴影

修改悬停时的阴影颜色。

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

404页面模板

默认变换比例

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

404页面模板

悬停变换比例

更改悬停时的变换比例值:

404页面模板

将文本模块添加到第 1 列

添加内容

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

404页面模板

添加链接

接下来添加指向模块的链接。

  • 模块链接地址:#
  • 模块链接目标:在同一窗口中

404页面模板

文字设置

转到模块的设计选项卡并更改文本设置,如下所示:

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

404页面模板

间距

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

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

404页面模板

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

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

404页面模板

更改内容

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

404页面模板

更改链接

也换个链接。

404页面模板

3.保存主题生成器更改

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

404页面模板

404页面模板

预览

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

桌面

404页面模板

移动的

404页面模板

最后的想法

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

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

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