Elementor Proでプロフェッショナルなプリローダーを作成し、ウェブサイトの読み込み体験を向上させるための完全ガイド

Elementorでウェブサイトを構築する場合、ユーザーにスムーズなビジュアル体験を提供することが重要です。プリローダーページのコンテンツが完全に読み込まれる前に、ローディングアニメーションを表示することが可能です。以下では、ページが完全に読み込まれる前にローディングアニメーションを表示する方法をステップバイステップで説明します。 エレメンタル・プロ にプリローダーを作成します。

プリローダーとは何ですか？

プリローダーとは通常、コンテンツが完全に読み込まれる前にウェブサイトが表示する画像やアニメーションのことです。プリローダーを使用することで、ブランドロゴや特定のアニメーションを表示することができ、より専門的でスムーズなブラウジング体験をユーザーに提供することができます。

ステップ1：タイトルテンプレートの作成

まず必要なのはタイトルテンプレートの作成サイトの全ページにプリローダーを適用するためです。
操作手順：

1. のElementorダッシュボードに移動します。 テンプレート > テーマジェネレーター.

2. 打点 キャプション セクションをクリックし + アイコンをクリックして、新しいタイトルテンプレートを作成します。

3. テンプレートの設定が完了したら ポスト と表示条件を適用します。

システムがポップアップします 表示条件 ウィンドウここで、このヘッダーテンプレートを適用したいページの範囲を選択します。ヘッダーテンプレートの ウェブサイト全体 をクリックすると、このタイトルがすべてのページに表示されます。選択を確認し 保存して閉じる でリリース完了。

ステップ2：コンテナの追加とCSS IDの設定

タイトルテンプレート内に、プリロードされたアニメーションを格納するコンテナを追加します。
操作手順：

1. タイトルテンプレートの編集ページにシングルカラムコンテナ.

2. コンテナの高いレベルタブでCSS IDを der_preload.

ステップ 3: ウィジェットアイコンまたは画像の追加

アイコンやブランドロゴなどの視覚効果をプリローダーに追加します。
操作手順：

1. コンテナに アイコン もしかしたら イメージ ウィジェット。

2. ウィジェットの高いレベルメニューのCSS IDを der_loader.

3. 入り込むタイプメニューから、デザインに合わせてアイコンのサイズを変更してください（推奨設定は1）。

ステップ4：スクリプトを実行するHTMLウィジェットの追加

次に、HTMLウィジェットを追加し、プリローダーの表示と非表示を制御するJavaScriptコードを挿入します。
操作手順：

1. アイコンまたは画像ウィジェットの下に追加 HTML ウィジェット。

2. 以下のコードを挿入してください：

</p
</p
</p

3. HTMLウィジェットの高いレベルオプションでCSS IDを der_preloader_addsウィジェットを隠し、不必要な空白を避けるためです。

ステップ5: カスタムCSSの追加

プリローダーを機能させるには、CSSコードをいくつか追加して、プリローディングの効果を洗練させます。

1. ページ設定アイコンをクリックして高いレベルメニュー

2. カスタムCSSフィールドに以下のコードを貼り付けます：

<code>#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items.center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border-right: 50%radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg)transform: rotate(360deg); } } #der_preloader_adds { display: none; }</code>
<code>#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items.center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border-right: 50%radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg)transform: rotate(360deg); } } #der_preloader_adds { display: none; }</code>
#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items.center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border-right: 50%radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg)transform: rotate(360deg); } } #der_preloader_adds { display: none; }
#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items.center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border-right: 50%radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg)transform: rotate(360deg); } } #der_preloader_adds { display: none; }
#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items.center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border-right: 50%radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } 100% { transform: rotate(360deg)transform: rotate(360deg); } } #der_preloader_adds { display: none; }

ステップ6：プリローダーの公開とテスト

テンプレートを公開し表示条件の設定を使用して、指定したページでプリローダーが正しく表示されるようにします。
操作手順：

1. 打点 ポスト表示条件ポップアップウィンドウで ウェブサイト全体.

2. 設定を保存し、ウェブサイトのページにアクセスして、プリローダーが期待通りに動作しているか確認してください。

概要

上記の手順で、カスタムElementor Proプリローダーを作成することができました。このプリローダーは、CSSとJavaScriptのコードを微調整して、あなたのブランドスタイルに合わせることで、さらにパーソナライズすることができます。