13 個(gè)最佳 WordPress 404 錯(cuò)誤頁面設(shè)計(jì)示例

時(shí)間：2023-06-06 10:27:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-06-06 10:27:02 來源：網(wǎng)站運(yùn)營

13 個(gè)最佳 WordPress 404 錯(cuò)誤頁面設(shè)計(jì)示例：您在尋找最好的 404 錯(cuò)誤頁面設(shè)計(jì)示例嗎？

正確的 404 頁面將使訪問者在您的網(wǎng)站上停留更長時(shí)間，并鼓勵(lì)他們進(jìn)行轉(zhuǎn)化。通過創(chuàng)建引人入勝、有用且有趣的 404 頁面，您可以為訪問者提供良好的體驗(yàn)，即使他們看到錯(cuò)誤也是如此。

在本文中，我們將分享一些最佳的 404 錯(cuò)誤頁面設(shè)計(jì)。

為什么需要優(yōu)化 404 設(shè)計(jì)

當(dāng)服務(wù)器無法訪問某人試圖訪問的頁面時(shí)，會(huì)發(fā)生 404 錯(cuò)誤。服務(wù)器沒有向他們顯示空白屏幕，而是顯示 404 頁面。

大多數(shù)WordPress 主題都帶有一個(gè)基本的 404 模板，但這些設(shè)計(jì)通常是基本且簡(jiǎn)單的。

它們也不會(huì)顯示您網(wǎng)站的任何內(nèi)容，例如訪問者可能想閱讀的熱門帖子或您網(wǎng)站的導(dǎo)航菜單。

如果您向訪問者展示無聊、無用的 404 頁面，那么他們更有可能離開您的WordPress 網(wǎng)站，這會(huì)增加您的跳出率并損害您的WordPress SEO。

考慮到這一點(diǎn)，創(chuàng)建一個(gè)具有您自己的品牌和內(nèi)容的自定義 404 頁面是明智的。您還可以通過添加搜索欄、菜單、鏈接和其他有用的內(nèi)容來幫助訪問者找到他們正在尋找的內(nèi)容。

創(chuàng)建自定義 404 設(shè)計(jì)的最簡(jiǎn)單方法是使用SeedProd插件。它是最受歡迎的拖放著陸頁構(gòu)建器，因此您無需編寫任何代碼即可創(chuàng)建自定義 404 頁面。

SeedProd 還有許多專業(yè)設(shè)計(jì)的 404 模板，可幫助您快速創(chuàng)建漂亮的錯(cuò)誤頁面。

安裝 SeedProd 后，最好向競(jìng)爭(zhēng)對(duì)手尋求靈感?？紤]到這一點(diǎn)，我們收集了最好的 404 錯(cuò)誤頁面設(shè)計(jì)供您查看。

1.DFY

許多網(wǎng)站使用倒數(shù)計(jì)時(shí)器來營造緊迫感，并使用FOMO獲得更多轉(zhuǎn)化。然而，DFY 做出了一個(gè)不尋常的決定，即在他們的 404 頁面上添加一個(gè)倒計(jì)時(shí)計(jì)時(shí)器。

此計(jì)時(shí)器倒計(jì)時(shí)秒數(shù)，直到訪問者自動(dòng)重定向到主頁。通過創(chuàng)建時(shí)間限制，DFY 立即使他們的 404 頁面更具吸引力，并促使訪問者在時(shí)間用完之前做出決定。這也是一個(gè)不尋常的設(shè)計(jì)選擇，因此一定會(huì)吸引訪問者的注意力。

404 頁面的消息傳遞增加了這種緊迫感，使其成為一個(gè)非常引人注目和引人注目的頁面設(shè)計(jì)。

有關(guān)在您的網(wǎng)站上使用時(shí)間限制的更多信息，請(qǐng)參閱我們關(guān)于如何在 WordPress 中添加計(jì)時(shí)器小部件的指南。

2.OptinMonster _

OptinMonster是最好的 WordPress 電子郵件捕獲插件之一，被超過 120 萬個(gè)網(wǎng)站使用。它擁有將訪問者轉(zhuǎn)變?yōu)橛嗛喺吆涂蛻羲璧囊磺小?br>
不出所料，OptinMonster 使用他們的 404 頁面作為潛在客戶生成工具，具有引人注目的動(dòng)畫和清晰的號(hào)召性用語。

更好的是，他們的推銷與訪客的情況有關(guān)。

當(dāng)有人登陸 404 頁面時(shí)，他們很可能會(huì)放棄并放棄您的網(wǎng)站，因?yàn)樗麄冋也坏剿麄円业臇|西。

OptinMonster 的推銷通過詢問：“你知道嗎，超過 70% 的放棄你網(wǎng)站的訪問者將永遠(yuǎn)不會(huì)回來？”

由于訪問者已經(jīng)在考慮放棄網(wǎng)站，因此他們更有可能根據(jù)此統(tǒng)計(jì)數(shù)據(jù)采取行動(dòng)。然后，號(hào)召性用語為訪問者提供一本免費(fèi)電子書，承諾將放棄網(wǎng)站的訪問者轉(zhuǎn)化為訂閱者。

單擊“立即下載”按鈕會(huì)打開一個(gè)彈出窗口，用戶可以在其中輸入他們的電子郵件地址并獲得免費(fèi)下載。

正如我們所看到的，OptinMonster 通過創(chuàng)建一個(gè)感覺非常相關(guān)和及時(shí)的宣傳來利用 404 錯(cuò)誤來發(fā)揮他們的優(yōu)勢(shì)。

如果您想使用自己的 404 頁面來生成潛在客戶，那么您可以使用 SeedProd 的贈(zèng)品、聯(lián)系表格和選擇表格塊來收集電子郵件地址。

3.夸羅

許多網(wǎng)站使用游戲化來建立客戶忠誠度并讓人們回到他們的網(wǎng)站。

Kualo 更進(jìn)一步，將他們的 404 頁面游戲化。

404 頁面不是幫助訪問者找到返回 Kualo 主網(wǎng)站的路，而是向他們挑戰(zhàn)太空入侵者游戲。

這會(huì)將令人沮喪的錯(cuò)誤消息變成有趣的驚喜。

更好的是，當(dāng)您的生命耗盡時(shí)，Kualo 會(huì)激勵(lì)您繼續(xù)玩下去。

如果玩家設(shè)法得分超過 1000 分，彈出窗口會(huì)為玩家提供托管折扣。這是 404 頁面的一個(gè)完美示例，它可以讓訪問者在您的網(wǎng)站上停留更長時(shí)間，并增加用戶體驗(yàn)的價(jià)值。

4.貓途鷹

TripAdvisor 的 404 頁面既有趣又實(shí)用，并以旅游業(yè)特有的笑話打開。

當(dāng)有人登陸您的 404 頁面時(shí)，他們可能會(huì)對(duì)他們的體驗(yàn)感到沮喪。幽默是重新吸引這些人的好方法。

更好的是，這些笑話總是與 TripAdvisor 品牌聯(lián)系在一起。

品牌是用自定義設(shè)計(jì)替換標(biāo)準(zhǔn) WordPress 404 頁面的主要好處之一，TripAdvisor 的頁面顯示品牌不僅僅是自定義徽標(biāo)和圖像。404 頁面上的文字與圖片一樣重要。

404 頁面還突出顯示了 TripAdvisor 網(wǎng)站的所有主要區(qū)域，這有助于訪問者找到他們正在尋找的內(nèi)容。

由于導(dǎo)航非常重要，我們建議查看 SeedProd 的導(dǎo)航菜單塊，因?yàn)樗梢宰屇苯釉陧撁婢庉嬈髦袠?gòu)建各種菜單。

5.布雷特·特普斯特拉

乍一看，Brett Terpstra 的 404 頁面可能看起來很普通，但真正的力量在于它的建議帖子列表。

Brett Terpstra 的 404 頁面顯示了一個(gè)帖子列表，其中包含與訪問者在遇到 404 錯(cuò)誤時(shí)試圖訪問的鏈接相關(guān)的關(guān)鍵字。

這是一個(gè)簡(jiǎn)單的技巧，可以大大提升訪客體驗(yàn)。

個(gè)性化內(nèi)容可以使您的網(wǎng)站更有用、更具吸引力和吸引力，因此將其擴(kuò)展到您的 404 頁面是有意義的。

要了解有關(guān)目標(biāo)內(nèi)容的更多信息，請(qǐng)參閱我們關(guān)于如何在 WordPress 中向不同用戶顯示個(gè)性化內(nèi)容的指南。

6.持續(xù)聯(lián)系

Constant Contact是另一個(gè) 404 頁面，它使用幽默來贏得沮喪的訪問者。電子郵件服務(wù)提供商使用非正式語言來吸引目標(biāo)受眾，同時(shí)還為訪問者提供返回主頁的簡(jiǎn)便途徑。

如果向下滾動(dòng)頁面，您會(huì)找到指向Constant Contact網(wǎng)站其他一些重要區(qū)域的鏈接。

然而，我們真正喜歡的是每次將鼠標(biāo)移到其中一個(gè)藍(lán)色塊上時(shí)播放的短暫懸停動(dòng)畫。

動(dòng)畫可以使頁面更具吸引力，并且當(dāng)訪問者在 404 頁面上移動(dòng)時(shí)，多個(gè)懸停動(dòng)畫創(chuàng)建了一個(gè)講故事的元素。

有幾種不同的方法可以使您的 404 頁面動(dòng)起來，包括使用 SeedProd 動(dòng)畫標(biāo)題塊突出顯示和旋轉(zhuǎn)您的文本。有關(guān)更多信息，請(qǐng)參閱我們關(guān)于如何在 WordPress 中添加 CSS 動(dòng)畫的指南。

7.電影數(shù)據(jù)庫

大多數(shù)人在完全尋找其他內(nèi)容時(shí)會(huì)遇到您的 404 頁面。由于 404 錯(cuò)誤是意外的，因此通過保持品牌熟悉度來確保訪問者他們?nèi)栽谀木W(wǎng)站上非常重要。

IMDB 通過展示電影或電視節(jié)目中的名言，以一種非常微妙和輕松的方式做到這一點(diǎn)。

他們還包含一個(gè)鏈接，用于了解有關(guān)他們引用的電視節(jié)目或電影的更多信息。

通過這種方式，IMDB 的 404 頁面強(qiáng)化了他們的品牌，同時(shí)也為訪問者提供了一種探索其內(nèi)容的有趣方式。

在您的 404 頁面上顯示隨機(jī)引用可能會(huì)很有趣且引人入勝。但是，提供指向您網(wǎng)站最重要內(nèi)容的鏈接仍然是個(gè)好主意，以防訪問者對(duì)您隨機(jī)選擇的鏈接不感興趣。

IMDB 通過包含指向其主頁的鏈接表明這并不復(fù)雜。

8.史蒂夫馬登_

Steve Madden 試圖通過在 404 頁面上展示他們最暢銷的產(chǎn)品來將錯(cuò)誤消息轉(zhuǎn)化為銷售額。

更好的是，他們添加了過濾器，因此客戶可以直接從 404 頁面瀏覽不同的產(chǎn)品。

如果您經(jīng)營一家在線商店，那么您可以輕松地展示您最受歡迎的產(chǎn)品、打折產(chǎn)品、最新產(chǎn)品等等。只需將“暢銷產(chǎn)品”塊添加到您的 404 頁面，SeedProd 就會(huì)找到這些產(chǎn)品，然后自動(dòng)將它們添加到您的 404 頁面。

設(shè)計(jì)您自己的 404 頁面時(shí)，最好使用與網(wǎng)站其余部分相同的頁眉和頁腳。這將加強(qiáng)您的品牌，并阻止訪問者懷疑他們是否在正確的地方。

這正是我們?cè)谑返俜颉ゑR登 (Steve Madden) 的 404 頁面中看到的情況，但我們特別喜歡他們?cè)O(shè)法將大量?jī)?nèi)容放入這兩個(gè)小區(qū)域。

頁眉和頁腳可幫助訪問者直接跳轉(zhuǎn)到 Steve Madden 商店的任何部分，甚至是公司的 Twitter 和 Facebook 頁面等第三方網(wǎng)站。

他們甚至提供對(duì)交互區(qū)域的訪問，包括智能產(chǎn)品搜索欄。

9.公寓療法

Apartment Therapy 的這款 404 設(shè)計(jì)以大英雄形象立即吸引了訪客的注意力。

Apartment Therapy 還利用這個(gè)空間來強(qiáng)化他們的品牌形象，展示一張時(shí)尚的廚房照片和一個(gè)關(guān)于紙膠帶的笑話。

如果你想在你的設(shè)計(jì)中添加英雄形象，那么 SeedProd 有很多現(xiàn)成的英雄部分。這些是圖片集、號(hào)召性用語，甚至是簡(jiǎn)單的潛在客戶收集表格，您只需單擊一個(gè)按鈕即可將其添加到您的 404 設(shè)計(jì)中。

在 Apartment Therapy 網(wǎng)站上什至還有一個(gè)看起來很熟悉的部分。

10.尖叫青蛙

與此列表中的其他一些 404 頁面類似，Screaming Frog 使用幽默來嘗試與訪問者互動(dòng)。

然而，與此列表中的其他企業(yè)不同，Screaming Frog 創(chuàng)建了一個(gè)工具來幫助網(wǎng)站所有者查找和修復(fù)損壞的鏈接。他們的 404 頁面毫不猶豫地指出 Screaming Frog 網(wǎng)站的 URL 損壞的諷刺意味。

通過取笑自己，Screaming Frog 提供了一個(gè)令人難忘的 404 頁面，它并沒有太把自己當(dāng)回事。

動(dòng)畫背景也有助于這個(gè) 404 設(shè)計(jì)從人群中脫穎而出。

視頻和動(dòng)畫是讓您的 404 頁面更具吸引力的好方法。但是，它們會(huì)增加 404 頁面的加載時(shí)間，因此我們建議按照我們的提示來加快 WordPress 性能，尤其是當(dāng)您在 404 設(shè)計(jì)中使用大量大型或高分辨率視頻時(shí)。

11.怪物洞察力

MonsterInsights是適用于 Google Analytics 的最佳 WordPress 插件。它允許您在 WordPress 中輕松安裝 Google 分析，并在 WordPress 儀表板中顯示有用的報(bào)告。

MonsterInsights 是品牌頁面的一個(gè)很好的例子。一旦訪問者到達(dá)此頁面，他們就會(huì)看到基于 MonsterInsights 徽標(biāo)的獨(dú)特圖形。

這是一種讓訪問者知道他們?nèi)栽?MonsterInsights 網(wǎng)站上的有趣方式，即使他們點(diǎn)擊了損壞的鏈接也是如此。

此頁面還解釋了 404 錯(cuò)誤是什么，并建議訪問者可以采取一些措施來修復(fù)錯(cuò)誤。幫助人們自己解決 404 錯(cuò)誤可以改善訪問者體驗(yàn)，因此最好將此信息包含在您自己的 404 頁面中。

即使您鼓勵(lì)訪問者自己解決問題，包含指向您網(wǎng)站最重要內(nèi)容的鏈接仍然很重要。MonsterInsights 404 頁面通過包含指向支持頁面、MonsterInsights 文檔和定價(jià)頁面的鏈接，為人們提供了一些選項(xiàng)。

12.瘋狂

MAD 通過使用切換創(chuàng)建 404 錯(cuò)誤消息創(chuàng)建了一個(gè)簡(jiǎn)單但高度交互的頁面。您可以通過關(guān)閉所有切換來刪除此消息，甚至可以通過激活切換來創(chuàng)建您自己的消息。

這是一種非常簡(jiǎn)單但令人愉快的體驗(yàn)，旨在獲得來自訪客的大量互動(dòng)。這也是一個(gè)非常獨(dú)特的 404 頁面，訪問者會(huì)記住它，甚至可能會(huì)與其他人分享。

這個(gè)引人注目的設(shè)計(jì)證明您可以從一個(gè)簡(jiǎn)單的想法構(gòu)建一個(gè)令人難忘且有趣的 404 頁面。

13.西南

Southwest 的 404 頁面試圖通過解釋什么是 404 以及為什么他們可能會(huì)看到錯(cuò)誤來幫助訪問者回到正軌。他們甚至提出了一些可能的修復(fù)建議，如果您的目標(biāo)受眾對(duì) 404 錯(cuò)誤不是很熟悉，這可能會(huì)有所幫助。

這種設(shè)計(jì)真正突出的地方在于它設(shè)法顯示的鏈接數(shù)量以及這些 URL 的組織方式。

如果滾動(dòng)到屏幕底部，您會(huì)注意到社交媒體鏈接、聯(lián)系信息、加入他們的電子郵件列表的鏈接，以及許多其他鏈接，所有這些鏈接都排列在清晰且用戶友好的類別中。

Southwest 404 頁面是一個(gè)很好的例子，說明您可以在頁面中包含多少信息而不會(huì)讓訪問者不知所措。

在這里，正確的布局是關(guān)鍵，Southwest 在使用類別、列表和不同部分來創(chuàng)建信息豐富但仍易于閱讀的 404 頁面方面做得很好。

請(qǐng)?jiān)L問我的主頁https://wpeyes.com，找到更多文章與教程。