はじめに
A “404 Page Not Found” error can disrupt the browsing experience for your visitors and lead them to abandon your site. Instead of a default, often bland 404 error page, a custom design offers a valuable opportunity to guide users back to crucial content, improve navigation, and present a unique experience that aligns with your brand. While Elementor doesn’t automatically set up a custom 404 page, you can build and integrate one manually with both エレメンタル・プロ そして エレメンタ 無料. Here, we’ll cover a step-by-step process for each version of Elementor to make the 創造 シンプルで効果的。
Elementorでカスタム404ページを作成します：詳細な手順
Elementor Proによるカスタム404ページの設定
Elementor Pro ユーザーは テーマビルダー 機能は、404ページの作成と割り当てを簡素化します。この機能により、特定の テンプレート これは、ユーザーが見つからないページに遭遇したときに自動的に表示されます。
ステップ1：テーマビルダーへのアクセス
- WordPressのダッシュボードで、次の場所に移動します。 テンプレート > テーマビルダー.
- クリック 新規追加 を選択します。 404ページ をテンプレート・タイプとして使用します。
- この設定は、カスタム404エラーページをデザインするための白紙のキャンバスを開きます。 一から.
- をクリックすると、そのページに移動します。
ステップ2：ページレイアウトのデザイン
- 親切なエラーメッセージ:
- を使用します。 見出し ウィジェット to create a clear, welcoming message, such as “Oops! Page Not Found” or “We’re sorry, but that page doesn’t exist.”
- ナビゲーションリンクの追加 ボタン:
- などの人気ページにリンクするボタンを1つ以上入れてください。 ホームページ, ブログまたは お問い合わせ.を追加します。 検索 バーは、特定のコンテンツを探しているユーザーにも役立ちます。
- Customize each button (like “Go Back Home”) by setting the URL link directly within Elementor.
- 視覚的要素を含む:
- Consider adding images, icons, or animations that align with your brand’s style to keep users engaged.
- オプション要素:
- アニメーションやアイコン、ユーモラスなビジュアルタッチなどの要素を加えることで、404ページをより魅力的なものにすることができます。
ステップ3：テンプレートの割り当て
- デザインが確定したら 出版.
- を設定します。 表示状態 として 404ページ を使用して、エラーURLに対してのみページが表示されるようにします。
- 設定を保存して閉じ、テンプレートの割り当てを確定します。
ステップ4：404ページのテスト
- すべてが計画通りに動作することを確認するには、サイト上の存在しないURL（たとえば、yourwebsite.com/thispagedoesnotexist）に移動します。
- 404ページが正しく表示されることを確認し、各リンクやボタンが期待通りにユーザーを誘導することをテストしてください。
Elementorでカスタム404ページを作る 無料
Elementor Free doesn’t offer the テーマビルダー feature, but you can still create a custom 404 page by designing a template and embedding it into your theme’s 404.php file.
ステップ1：404ページのデザイン
- 新しいページの作成:
- こちらへ ページ > 新規追加 and name it something like “Custom 404 Page.”
- ユーザーフレンドリーなナビゲーションのための要素の追加:
- 追加 見出し widget for your error message, such as “Page Not Found” or “Sorry, this page doesn’t exist.”
- が含まれます。 ボタン ウィジェットは必須ページへのリンクと 検索 ウィジェットは、ユーザーが素早くコンテンツを見つけられるようにします。
- ビジュアル、アイコン、画像などを使って、視覚に訴えるページを作りましょう。
- テンプレートとして保存:
- をクリックしてください。 更新/公開ボタンの横にある矢印 を選択します。 テンプレートとして保存 をクリックしてデザインを保存します。
ステップ 2: テンプレートとテーマの統合
- テンプレートのショートコードを取得:
- こちらへ テンプレート > 保存されたテンプレート を見つけてコピーします。 ショートコード 新しく保存した404テンプレートの
- 404.phpファイルの編集:
- で Appearance > Theme File Editor (or via FTP), find your theme’s 404.php file under /wp-content/themes/your-theme/.
- テンプレートのショートコードを挿入:
- 404.phpの内容を以下のコードに置き換え、.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
?>- 変更の保存 を404.phpファイルに追加します。
ステップ3：ページのテスト
- 404ページが意図したとおりに表示されることを確認するには、サイト上の存在しないURLに移動し、すべてのリンクと要素が正しく動作していることを確認します。
ユーザーエクスペリエンス向上のための404ページの改善
A custom 404 page is more than just a placeholder; it’s an opportunity to keep users engaged with helpful navigation options and a bit of personality. Here are some tips for crafting an effective 404 page:
- メッセージのパーソナライズ: Friendly language, such as “Oops! Something went wrong” or “We couldn’t find the page,” can improve the experience.
- 関連リンクのハイライト:ユーザーを誘導するために、人気のカテゴリーや最新のブログ記事へのリンクを掲載します。
- インタラクティブ要素の使用:シンプルなアニメーションやホバー効果で、インタラクティブなタッチを加えます。
- ブランドの一貫性の確保: Reflect your website’s colors, fonts, and logo on the 404 page to align with your overall style.
結論
Elementorでカスタム404エラーページを作成することで、訪問者がエラーページに到達した場合でも、訪問者の関心を引き続けることができます。Elementor Proではテーマビルダーを使ってこのページを簡単に割り当てることができ、Elementor Freeではテンプレートの統合によって同様の効果を得ることができます。これらのステップに従うことで、ユーザーは常にコンテンツに戻る明確な方法を確保することができ、最終的にナビゲーションを改善し、フラストレーションを最小限に抑え、サイト全体のユーザーエクスペリエンスを向上させることができます。