如何使用WordPress和Elementor创建自定义404页面

无论您输入了错误的 URL 还是单击了损坏的链接，404 都是 Internet 让您知道所请求的页面不存在的方式。

即使是最好的网站也会不时抛出 404 错误，那么为什么不利用这个错误来发挥自己的优势呢？在本教程中，我将向您展示如何创建 404 页面来帮助您与受众建立联系，提供更好的用户体验，甚至可能为您带来一些额外的销售！ 

我们将涵盖的内容

链接不会永远存在！ 

随着时间的推移，您可能需要移动或删除某些页面，或者决定将相关帖子合并到一个页面中，其中包含您的受众可能需要的所有信息。 

每当服务器找不到请求的网页时，它就会显示 404 错误。如果您不向您的网站添加自定义 404 页面，那么服务器将显示一个库存 404 页面——这并不是最好看的东西。

在本教程中，我将向您展示如何使用 Elementor将您网站的默认 404 替换为自定义网页。由于 Elementor 是一个灵活的工具，我们将使用以下所有方法创建一个 404 页面的选择： 

• 使用 Elementor 的 Theme Builder 创建一个 404 页面。我将向您展示一种使用 Elementor 的现成模板创建专业设计的 404 页面的快速简便的方法。

• 设计一个完全自定义的 404 页面。有特定的设计吗？或者想尝试一些不同的潜在设计？我将向您展示如何通过将文本、图像和按钮添加到空白模板来从头开始构建完全自定义的 404 页面。在本节结束时，您将创建以下设计：

• Envato 元素模板套件。安装一个主题模板集合，其中包含您网站可能需要的所有页面的设计 - 包括以下 404 模板：

为什么您的网站需要自定义 404 页面

Elementor 用户友好的拖放式编辑器可能会减轻网页设计的痛苦，但创建自定义 404 页面仍然 需要时间和精力。

在我们进入 Elementor 之前，让我们看看为什么您应该始终考虑创建自己的 404 页面的一些原因。

404错误是不可避免的

有时，您可能需要删除一段内容、将页面重新定位到新 URL，或将多个帖子合并到一个 URL 中。 

理想情况下，您应该执行定期内容审核，以识别并纠正任何损坏的链接，但即使您主动检查您的 URL，某些 404 错误也完全无法控制。 

如果访问者拼错了 URL 或容易出现拼写错误的第三方链接到您网站的某个部分，您的网站将抛出 404 错误！虽然您无法控制其他人的错误，但您可以通过创建引人入胜的 404 页面来最大程度地减少他们的影响。 

与您的观众联系

404 页面是表达自己和加强与观众关系的机会。 

只需在 Google 中输入“最佳 404 页面”，您就会发现无数的创意和不寻常的 404 页面。为什么不追随他们的脚步，利用您的 404 页面作为展示您闪耀个性的机会呢？ 

您可能会用一些与 404 相关的双关语来对待您的访问者，对流行的 meme 进行自己的解释，或者甚至构建更精细的东西，例如 404 迷你游戏。虽然它在技术上不是 404 页面，但 Google 的“无互联网”恐龙游戏是一个很好的例子，说明了如何将错误页面变成有趣和引人入胜的东西。

但是，您的 404 页面应该始终适合您的目标受众和更广泛的网站。如果您的网站涉及敏感主题，或者您试图将自己展示为受信任的权威，那么幽默的 404 页面可能不合适。

重新吸引闲散的访客

访问者可以通过多种不同的方式到达您的 404 页面，但最终结果总是相同的：此人希望访问一些有趣的内容，而现在他们正盯着一条错误消息。他们可能会感到沮丧和恼火，甚至可能会完全放弃您的网站。 

自定义 404 页面是一个在此人离开您的网站之前重新吸引他们兴趣的机会。

您通常可以通过导航控件来宣传您网站上最有趣和最相关的内容，从而重新吸引失望的访问者。这些控件可能包括菜单、轮播、您网站最受欢迎的页面列表或基于他们之前访问过的内容的推荐帖子列表。

通过标记您网站上最有趣的内容，您的 404 页面可以鼓励访问者重新进入您的网站，而不是离开它。 

推动转化并完成销售

为什么不将您的 404 页面用作推动转化和确保额外销售的工具？ 

您可以提供折扣、优惠券代码或免费会员订阅作为道歉，甚至是“找到”您的 404 页面的奖励！

或者，如果您经营一家电子商务商店，那么为什么不在您的 404 页面中添加一些产品推荐呢？如果这些建议是为个别访客量身定制的，则可获得奖励积分。 

以一致的品牌形象建立信任

研究表明，一旦你熟悉了一家公司的品牌，你就会下意识地开始信任这家公司。一致性是消费者信心的关键，这解释了为什么世界各地的每家 Apple Store 看起来都非常相似。

在投入如此多的时间和精力来设计一个完美反映您的品牌的网站之后，您最不想要的就是弹出一个通用的 404 页面并彻底破坏情绪。

通过创建自定义 404 页面，您可以提供无缝的用户体验，强化您的品牌，并向目标受众灌输信任感。 

将流失的访客转变为宝贵的测试人员

在识别和修复损坏的链接时，为什么不寻求观众的帮助呢？

只需将联系表添加到您的 404 页面，您的访问者就可以提醒您他们发现的任何损坏的链接。您甚至可以激励访问者报告 404 错误，例如提供折扣代码或免费订阅您的会员专享内容。

什么是元素？

在本教程中，我们将使用 Elementor 使用简单的拖放编辑器构建高级页面布局。 

核心 Elementor 插件可免费下载，并提供对 40 多个基本 Elementor 小部件和 30 多个模板的访问。但是，如果您投资高级计划，那么您还可以使用 Elementor 的：

• 主题生成器。这允许您自定义整个 wordpress 主题，包括其页眉、页脚和存档页面。 

• 弹出窗口生成器。弹出窗口可能名声不好，但偶尔放置好弹出窗口可能是吸引访问者注意力的好方法。使用 Popup Builder，您可以通过熟悉的 Elementor 用户界面设计、测试和发布自定义弹出窗口。 

• woocommerce生成器。如果您正在构建电子商务商店，那么 WooCommerce 构建器会提供以电子商务为主题的小部件，您可以将这些小部件拖放到您的商店中，包括Add to Cart、 Product Rating和Related Products 小部件。 

在本教程中，我们将使用Elementor Pro，在撰写本文时，它的价格在每月 4.10 美元到 16.60 美元之间。

如果您使用的是免费的 Elementor 插件，那么本教程将向您展示如何掌握 Elementor 用户界面和工作流程。但是，您需要订阅 Elementor Pro才能完成本教程的所有部分 。

如何为 WordPress 安装 Elementor

Elementor Pro 需要免费版的 Elementor，所以首先我们需要安装并激活这个免费插件：

• 如果您尚未登录，请登录您的 WordPress 帐户。 

• 在 WordPress 的左侧菜单中，选择Plugins > Add New。

• 搜索Elementor 插件。

• 当插件出现时，选择立即安装 > 激活。

• Elementor 的免费版本现已添加到您的 WordPress 帐户中。

要升级到 Elementor Pro： 

• 前往 Elementor 网站，购买 Elementor Pro。

• 在Elementor 网站上，使用购买确认电子邮件 中包含的详细信息登录您的帐户。

• 选择下载插件。Elementor Pro 现在将作为 ZIP 文件下载。 

• 前往您的 WordPress 网站。 

• 在左侧菜单中，选择Plugins > Upload Plugin。

• 单击选择文件 ，然后选择您刚刚下载的 ZIP 文件。

• 选择立即安装。

• 出现提示时，单击立即激活。

• 您现在应该会看到一条消息，要求您激活许可证；单击连接并激活并选择激活。

• 如果出现提示，请登录到您的 Elementor 帐户。 

Elementor Pro 现在已设置好并可供您使用！ 

轻松自定义 404 页面：Elementor 的现成模板

Elementor 附带了一系列现成的模板，您可以将其用作 WordPress 页面的基础。 

由于这是创建 404 页面的最简单方法，因此我们将基于 Elementor 的一个模板创建第一个 404 页面：

• 在 WordPress 的左侧菜单中，选择Templates > Theme Builder。

• 选择单 选项卡。在 Elementor 中，单个页面通常是一个单独的帖子。

• 选择添加新单曲。

• 打开模板类型 下拉菜单并选择Single。

• 打开Select post Type 下拉菜单并选择404 page。

给您的模板起一个描述性的名称。命名模板时，不要以404开头， 因为生成的固定链接会将访问者重定向到您的主页，而不是 404 页面。

单击创建模板。Elementor Pro 现在将显示所有可用的 404 模板；选择要使用的模板。

每当您选择模板时，Elementor 都会提示您导入该页面的文档设置，这将覆盖您之前的 404 页面设置。除非您有特定的理由不这样做，否则您通常需要为您选择的模板导入文档设置。 

此时，您在 Elementor 编辑器中打开了 404 模板。 

由于这是我们第一次体验 Elementor，让我们花点时间掌握编辑器的基础知识，然后再开始处理 404 页面。 

探索 Elementor 页面编辑器

Elementor 实时编辑器分为两个部分： 

1. 实时预览画布

右侧是实时预览画布，您可以在其中添加文本、图像和按钮等小部件。您还可以通过更改它们的大小和位置来编辑小部件，或从布局中删除不需要的小部件。 

通过将小部件放置在称为section的包装盒中，您可以将小部件添加到页面中。如果您在实时预览画布中选择一个部分，Elementor 将使用蓝色边框勾勒出该部分。 

每个部分包含一个或多个列。如果您单击以选择一列，则实时预览编辑器将用灰色勾勒该列，并在该列的左上角显示一个图标。 

如果您单击选择一个小部件，则实时预览画布将使用纯蓝色边框勾勒出该小部件的轮廓。 

2.元素面板

Elementor 面板包含您可以添加到页面的所有小部件。只需找到您要添加的小部件，将其从 Elementor 面板中拖动，然后将其拖放到实时预览画布上。  

Elementor 面板还包含各种菜单、滑块和其他设置，可用于编辑小部件，例如为文本选择新字体、为图像添加边框或添加颜色叠加。 

当您在实时预览画布中选择一个小部件时，Elementor 面板将显示与所选小部件相关的所有设置。例如，如果我选择标题 小部件，那么 Elementor 面板将显示与编辑文本相关的所有设置。 

Elementor 基础知识：构建您的第一部分

让我们看看如何使用实时预览画布和 Elementor 面板创建一个由多个列和小部件组成的简单部分： 

通过单击小+ 按钮添加一个新部分。

选择此部分的结构，可以是单列或多列。 

此时，您有了一个新的部分和一个列——让我们添加一些小部件！ 

• 在 Elementor 面板中，选择右上角的虚线图标。

• 确保选择了元素 选项卡。您现在应该会看到所有可用小部件的列表。 

• 找到您要使用的小部件，然后将此小部件拖放到您的部分中。 

• 在实时预览编辑器中，单击以选择您的小部件；Elementor 面板现在将显示可用于自定义此小部件的所有设置。 

• 让我们添加第二个小部件！在 Elementor 面板中，单击以选择右上角的虚线图标，并确保选择了Elements 选项卡。

• 选择第二个小部件，并将其放入您的部分。 

您现在有一个由两个小部件组成的简单部分。您可以通过以下几种方式编辑此部分：

拖放到新位置

您可以将此部分移动到新位置。

只需将鼠标悬停在该部分上，直到实时预览画布以蓝色勾勒该部分并显示三个手柄。然后抓住中间的把手（在下面的截图中圈出）。

将此部分拖动到新位置并释放。 

删除部分

犯了一个可怕的错误？您可以通过按住 Control 键单击该部分，然后选择Delete来删除该部分及其所有小部件。

删除列 

要从您的部分中删除列：

• 将鼠标悬停在列 图标上（在以下屏幕截图中圈出）。

• 按住 Control 键单击列图标。

•  从出现的上下文菜单中选择删除。

添加更多列

对部分的布局不满意？添加更多列很容易：

• 按住 Control 键单击列 图标。

• 选择添加新列。现在将在此部分添加一个新列。 

当一个部分由多列组成时，您可以通过拖动它们的分隔线来调整列的大小。

使用这些简单的技术，您可以构建复杂的页面布局——只需不断添加部分、列和小部件，并调整它们的设置，直到您对结果满意为止。

如何自定义 Elementor 的现成模板

至此，我们已经使用模板创建了一个 404 页面。 

根据您选择的模板，自定义这个 404 页面可能就像调整一些文本并点击Publish一样简单。但是，为了让事情更有趣，我将介绍一些您可能希望添加到 404 页面的小部件，即使您使用的是现成的模板。

帮助访问者浏览您的网站

如果您已经为您的网站创建了一些菜单，那么将这些菜单添加到您的 404 页面有助于创建一致的外观。

Elementor 提供了一个 导航菜单 小部件。

要设置 导航菜单 小部件： 

• 在 Elementor 面板中，选择导航菜单 并将此小部件拖放到一个部分中。 

• 单击以选择您刚刚创建的导航菜单小部件。

• 在 Elementor 面板中，打开选择菜单 下拉菜单。

• 您现在应该会看到您为网站创建的所有菜单的列表；选择要使用的菜单

• 在标题 文本框中，给这个菜单一个可选的标题。

• 如果您对菜单的配置方式感到满意，请单击Apply。 

或者，您可以使用 Elementor 的新菜单 小部件。

添加搜索栏

通过向 404 页面添加搜索栏，您可以帮助访问者准确找到他们感兴趣的内容。

您可以使用 Elementor 的搜索小部件创建基本搜索字段 。 

在 Elementor 面板中，找到Search 小部件，将其放到所需的部分，然后单击Apply。 

发布您的第一个自定义 404 页面

对模板所做的更改感到满意后，就可以发布 404 页面了：

• 在 Elementor 面板中，选择Publish。

• 在随后的弹出窗口中，打开Include 下拉菜单并确保选择了404 页面 。 

• 单击保存并关闭。

现在，您可以通过故意输入错误的 URL 或使用以下 URL 来查看 404 页面的运行情况：www.(your-website-url)/404。

使用 Elementor 的主题生成器设计 404 页面

也许您心中有一个特定的愿景；也许您想确保您的 404 页面在人群中脱颖而出，或者您想尝试许多不同的潜在设计？在本节中，我们将使用 Elementor 的 Theme Builder 从头开始构建 404 页面。

Elementor Pro 的 Theme Builder 可让您自定义 WordPress 主题的每个部分，包括通常需要您了解css和php的区域——或者有一位愿意帮助您的开发者朋友！ 

请注意，在以下屏幕截图中，我使用的是甜甜圈模板图形。这个资源是免费下载的，如果你想感谢他们的辛勤工作，设计师有一个 PayPal 捐赠链接。

要使用 Elementor 的模板生成器创建 404 页面，请首先前往 WordPress 主仪表板。在左侧菜单中，选择Templates并单击 Add New。

打开模板类型 下拉菜单并选择Single。然后，在 Select post type 下拉列表中，选择404 page。

给您的模板起一个描述性的名称，然后单击Create template。这将启动 Elementor 的模板库。由于我们没有使用其他模板作为起点，因此只需关闭此窗口即可。您现在应该有一个完全空白的工作状态。 

通过单击添加新部分的小 图标添加您的第一个部分。您现在可以为此部分选择结构；我正在使用单列。 

单击以选择您刚刚创建的部分，现在，在 Elementor 面板中，打开Content width 下拉菜单并选择Full width。

打开高度 下拉菜单，然后选择适合屏幕。

接下来，选择 Elementor 面板的样式 选项卡。单击以展开背景 部分。您现在可以为 404 页面设置背景。您可以从图像、渐变、视频或纯色中进行选择。我选择了纯白色背景，选择经典 ，然后在颜色选择器中选择白色。 

现在我们已经对背景进行了排序，让我们添加一张图片！在实时预览画布中，单击小+ 图标。然后，在 Elementor 面板中，找到Image 小部件并将其拖放到您的部分。 

选择 Elementor 面板的内容 选项卡，然后单击选择图像，然后选择 要显示为 404 页面一部分的图像。您现在可以使用 Elementor 面板调整图像大小（我使用的是 2048x2048）并更改图像在您的部分中的显示位置。 

接下来，我想添加一些文本来解释这是一个 404 页面。在 Elementor 面板中，找到Heading 小部件并将其拖到包含您的图像的部分；应出现一个蓝色面板，指示此小部件在放置时将出现的位置。 

我将标题 小部件直接添加到我的图像下方。 

在 Elementor 面板中，确保选择了Content 选项卡。然后，在标题 文本框中，输入您要使用的文本。 

您现在可以使用 Elementor 面板中的 样式 选项卡来更改文本的外观，包括其大小和对齐方式。在此选项卡中，您可以更改文本的颜色和字体、添加阴影以及进行其他风格更改。花一些时间进行实验，看看你可以创造什么效果。

如果您对文本感到满意，请通过选择右上角的虚线图标来重置 Elementor 面板。在 Elementor 面板中，找到按钮小部件并将此小部件拖放到一个部分；我将按钮直接放在标题 小部件下方。 

在 Elementor 面板中，选择内容 选项卡。在Link中，输入所需的位置 - 例如，我正在链接到我网站的主页。您可以使用文本 字段为按钮添加可选标签；我正在使用Go home。 

您现在可以设置按钮的样式，例如通过更改其大小和它在该部分中的位置。选择 Elementor 面板的样式 选项卡并进行任何后续样式更改。例如，我正在更改按钮的颜色以补充我的 404 页面的其余部分。 

一旦您对 404 页面感到满意，就该发布了：

• 在 Elementor 面板中，选择Publish。

• 打开Include 下拉菜单并选择404 page。

• 单击保存并关闭。

您的 404 页面现已上线！您可以通过访问您知道不存在的 URL 或前往www.(your-website-url)/404来查看您的 404 页面。

使用模板工具包让网页设计变得更容易

当您可以安装整个模板套件时，为什么要限制自己使用一个模板？

Envato Elements上的 Elementor 模板套件 是模板的主题集合，提供您的网站可能需要的所有页面，包括主页、联系我们 页面、博客、存档、关于我们 页面等等。

如果您想混搭，那么模板工具包还提供独立的块，您可以将其拖放到页面布局中以创建自己独特的设计。 

模板工具包可以减轻设计和构建 WordPress 网站的痛苦。只需选择您的工具包，生成所有需要的页面，进行一些自定义，然后将这些页面连接在一起——恭喜，您有了一个新网站！ 

或者，您可以使用模板工具包来增强现有网站，方法是添加设计和布局，让您的网站具有全新的外观和感觉，而且工作量很小。

Envato Elements 提供各种专业设计的模板套件，从灵活的多用途模板到专为您的利基而设计的行业特定套件——无论是宠物寄养、护肤、数字营销、冰淇淋还是介于两者之间的任何东西！ 

在我的下一篇文章中，我将向您展示如何使用您选择的 Envato 模板工具包创建 404 页面。由于我们正在使用完整的模板工具包，完成本部分后，您将可以访问涵盖所有最常见网页的一系列补充模板 - 如果您非常喜欢新的 404 页面并决定扩展其设计，那就完美了到您网站的其他区域！ 

WordPress 使用 Elementor 模板工具包创建自定义 WordPress 404 页面 Jessica Thornsby

结论 

在本教程中，我介绍了三种使用 Elementor 构建自定义 404 页面的方法。如果您一直在关注，那么您现在应该拥有设计和发布创意独特的 404 页面所需的一切，这些页面完美地反映了您网站的品牌，帮助访问者找到有趣的内容，甚至可能为您赢得一些额外的销售。