簡介

404 頁面未找到」錯誤會擾亂訪客的瀏覽體驗，導致他們放棄您的網站。自訂的 404 錯誤頁面往往是平淡無奇的預設頁面，取而代之的是一個寶貴的機會，可以引導使用者回到關鍵內容、改善導覽功能，並呈現出符合您品牌的獨特體驗。雖然 Elementor 不會自動設定自訂 404 頁面，但您可以透過以下兩種方式，手動建立並整合 404 頁面 Elementor Pro 和 Elementor 免費.在此，我們將針對每個版本的 Elementor 逐一說明製作的步驟。 創建 簡單有效。

在 Elementor 中建立自訂 404 頁面：詳細步驟

使用 Elementor Pro 設定自訂 404 頁面

對於 Elementor Pro 使用者 主題建立程式 功能簡化了 404 頁面的建立與指派。此功能可讓您指定特定的 範本 會在使用者遇到遺失頁面時自動顯示。

步驟 1：存取主題建立程式

1. 在 WordPress 面板中，導覽到 範本 > 主題建立程式.

2. 按一下 新增 並選擇 404 頁 作為範本類型。
   • 此設定會開啟空白畫布，讓您設計自訂 404 錯誤頁面 零起点.

3. 按一下 x 即可前往該頁面。

步驟 2：設計頁面版面

1. 設計友善的錯誤訊息:
   • 使用 標題 小工具 來創建一個清晰的歡迎訊息，例如「Oops！頁面未找到 「或 」我們很抱歉，但該頁面並不存在"。

2. 新增導覽連結或 按鈕:
   • 包含一個或多個連結至熱門頁面的按鈕，例如 首頁, 部落格或 聯絡我們.新增一個 搜尋 對於尋找特定內容的使用者來說，欄位也很有幫助。
   • 在 Elementor 中直接設定 URL 連結，自訂每個按鈕 (如「回到首頁」)。

3. 包含視覺元素:
   • 考慮加入符合您品牌風格的圖片、圖示或動畫，讓使用者持續投入。
4. 可選要素:
   • 加入動畫、圖示或幽默的視覺觸感等元素可以讓 404 頁面更吸引人。

步驟 3：指定範本

1. 設計完成後，按一下 發表.
2. 設定 顯示條件 如 404 頁 以確保頁面只出現在錯誤的 URL 上。
3. 儲存並關閉設定，以確認範本指派。

步驟 4：測試 404 頁面

1. 若要檢查一切是否按計劃運作，請導航至您網站上不存在的 URL (例如，yourwebsite.com/thispagedoesnotexist)。
2. 請確認 404 頁面是否正確顯示，並測試每個連結或按鈕，以確保它們能如預期般引導使用者。

使用 Elementor 免費建立自訂 404 頁面

Elementor Free 不提供 主題建立程式 功能，但您仍可透過設計模板並將其嵌入主題的 404.php 檔案，來建立自訂的 404 頁面。

步驟 1：設計您的 404 頁面

1. 建立新頁面:
   • 前往 頁面 > 新增 並將其命名為「自訂 404 頁面」。

2. 新增使用者友善導覽元素:
   • 新增一個 標題 錯誤訊息的 widget，例如 "Page Not Found「 或 」抱歉，此頁面不存在"。
   • 包括一個 按鈕 Widget 連結至重要頁面和 搜尋 如果您希望使用者快速找到內容，請使用 Widget。
   • 使用視覺效果、圖示或影像，讓頁面在視覺上更具吸引力。

3. 儲存為範本:
   • 按一下 更新/發佈按鈕旁邊的箭頭 並選擇 儲存為範本 來儲存您的設計。

步驟 2：將範本與您的主題整合

1. 取得範本簡碼:
   • 前往 範本 > 儲存的範本 找到並複製 簡碼 的新儲存的 404 模板。

2. 編輯 404.php 檔案:
   • 在 外觀 > 主題檔案編輯器 (或透過 FTP)，在 /wp-content/themes/your-theme/ 下找到您主題的 404.php 檔案。

3. 插入模板簡碼:
   • 以下列程式碼取代 404.php 的內容，插入您的範本簡碼以取代 ：

<?php

// Your theme's header and additional elements

?>

<div id="primary" class="content-area">

  <main id="main" class="site-main" role="main">

    <?php echo do_shortcode('[elementor-template id="123"]'); ?>

  </main>

</div>

<?php

// Your theme's footer and additional elements

?>

4. 儲存變更 到 404.php 檔案。

步驟 3：測試您的頁面

• 若要確認 404 頁面是否如預期般顯示，請導航至您網站上不存在的 URL，並檢查所有連結和元素是否正常運作。

強化 404 頁面以獲得更好的使用者體驗

自訂 404 頁面不只是一個占位符；它是一個透過有用的導覽選項和一點點的個性讓使用者參與的機會。以下是製作有效 404 頁面的一些提示：

• 個人化訊息:友善的語言，例如「Oops！出錯了 「或 」我們找不到該頁面 "等友好的語言可以改善您的體驗。
• 強調相關連結:為了引導使用者，請加入熱門類別或最新部落格文章的連結。
• 使用互動元素:簡單的動畫或懸停效果可增加互動性。
• 確保品牌一致性:在 404 頁面上反映您網站的顏色、字型和標誌，以符合您的整體風格。

總結

在 Elementor 中建立自訂的 404 錯誤頁面，即使訪客到達錯誤頁面，也能幫助他們保持參與。Elementor Pro 可讓您使用主題建立工具輕鬆指定此頁面，而 Elementor Free 則可讓您透過模板整合達到類似效果。遵循這些步驟可確保用戶總是有明確的方法回到您的內容，最終改善導航、減少挫折感，並提升網站的整體使用者體驗。