はじめに

このエクスペリエンスを向上させる効果的な方法の1つは、プリローダーを追加することです。 アニメーション または イメージ これは、ページのコンテンツがバックグラウンドで読み込まれる間に表示されます。これにより、ユーザーを待たせることなくシームレスに遷移させることができ、洗練されたプロフェッショナルなサイトに仕上げることができます。このガイドでは プリローダー で エレメンタル・プロサイトのアイデンティティを強化するカスタムアニメーションやブランドロゴを表示することができます。

クリック Elementor Pro正規購入チャンネルへ移動します。

プリローダーとは？

プリローダーとは、サイトのコンテンツが読み込まれている間に表示される、プレースホルダーのアニメーションやグラフィックのことです。これは、読み込みに時間がかかるような重いコンテンツを含むページで特に役立ちます。プリローダーを使用することで、読み込み時間を短縮し、ユーザーを引きつけ、部分的に読み込まれたページが表示されるのを防ぐことで、より良いユーザーエクスペリエンスを実現します。さらに、プリローダーを使用することで、ブランディングをアピールし、ウェブサイトに個性を加えることができます。

Elementor Proでプリローダーを作成する方法

ステップ1：ヘッダーテンプレートの作成

最初のステップは ヘッダーの作成 テンプレート プリローダーを含むプリローダーをヘッダーテンプレートに配置することで、ウェブサイト上のすべてのページで一貫して表示されるようにすることができます。

テーマビルダーにアクセス:

• あなたの Elementorダッシュボードナビゲート テンプレートを選択します。 テーマビルダー.

新しいヘッダーテンプレートの作成:

• テーマビルダーで ヘッダー セクションをクリックし + アイコンをクリックして新しいテンプレートを作成します。

• テンプレートを選択し、Insertをクリックしてページに移動します。

テンプレートの公開:

• ヘッダーをデザインしたら 出版.

• 表示条件が表示されたら サイト全体 をクリックして、プリローダーがウェブサイト上のすべてのページに適用されるようにします。

• クリック 保存して閉じる.

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

では 容器 プリローダーのアニメーションを格納します。一意の CSS ID このコンテナにCSSとJavaScriptを追加することで、後でこのコンテナをターゲットにすることができます。

コンテナの追加:

• 新しいヘッダーテンプレートの中に、1カラムのコンテナを追加します。

CSS IDの設定:

• をご覧ください。 アドバンス タブをクリックします。

• での CSS ID フィールドに abc_preload.このIDは、プリローダーの動作を制御するためにカスタムCSSとJavaScriptを適用するために使用されます。

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

を作成します。 しかくようそ を追加することができます。 アイコン または 画像 ウィジェットを使って、ローディングアイコンまたはブランドのロゴを表示できます。

ウィジェットの追加:

• 標準のローディングアイコンにするか、カスタムロゴにするかによって、コンテナにアイコンまたは画像ウィジェットを追加できます。

ウィジェットのCSS IDを設定します。:

• をご覧ください。 アドバンス タブを開き、CSS IDを abc_loader.

アイコンまたは画像のスタイル:

• に移動します。 スタイル タブをクリックし、デザインに合わせてアイコンや画像のサイズを調整してください。多くの場合、アイコンのサイズは 1px.

ステップ4：プリローダーを制御するHTMLウィジェットの追加

次に、プリローダーが表示されるタイミングと消えるタイミングを制御するJavaScriptを含むHTMLウィジェットを追加します。このスクリプトは、短い遅延の後にプリローダーを非表示にし、コンテンツがスムーズに読み込まれるようにします。

HTMLウィジェットの追加:

• アイコンまたは画像ウィジェットの下に、HTMLウィジェットを追加します。

JavaScriptコードの挿入:

• HTMLウィジェットに、以下のJavaScriptコードを貼り付けます：

document.addEventListener('DOMContentLoaded', function () {)
    setTimeout(function () {
      document.getElementById('abc_preload').style.display = 'none'；
      document.getElementById('content').classList.add('visible')；
    }, 2000); // 必要に応じて遅延を調整します (ミリ秒単位)
  });
</script

このコードは、ページのコンテンツがロードされ始めてから2秒後にプリローダーを非表示にします。あなたのウェブサイトの平均読み込み時間に基づいて 2000 の値で遅延を増減します（ミリ秒単位）。

HTMLウィジェットのCSS IDを設定します。:

• HTMLウィジェットの アドバンス タブでCSS IDを abc_preloader_adds を使用して、意図しない間隔が空くのを防ぎます。

ステップ 5: プリローダーをスタイリングするためのカスタムCSSの追加

体制が整ったところで カスタムCSSの追加 を使用して、プリローダー・コンテナとローディング・アニメーションのスタイルを設定します。

カスタムCSS設定を開く:

• をクリックしてください。 ページ設定 アイコン（歯車アイコン）をElementorパネルに追加します。

• をご覧ください。 アドバンス タブを開き カスタムCSS セクションをご覧ください。

• 以下のCSSコードを貼り付けます。:

#abc_preload{。
  position: fixed；
  top：0;
  left: 0；
  width: 100%；
  height: 100%；
  background: #fff；
  display: flex；
  align-items: center；
  justify-content: center；
  z-index：1000;
}

#abc_loader{。
  border：8px solid #3636；
  border-top: 8px solid #3498db；
  border-radius: 50%；
  width: 50px；
  height: 50px；
  animation: spin 1s linear infinite；
}

スピン
  0% { transform: rotate(0deg); } { 100%
  100% { transform: rotate(360deg); }.
}

#abc_preloader_adds{。
  display: none；
}

• このコードは
  • ページ全体をカバー プリローダーが非表示になるまで、白い背景で表示されます。
  • ローダーのセンタリング (#abc_loader)を縦にも横にも表示します。
  • アニメイト ローダーは無限に回転します。

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

ヘッダーテンプレートの公開:

• クリック 出版 と表示されることを確認してください。 サイト全体 をクリックして、サイト全体でプリローダーが有効であることを確認してください。

プリローダーのテスト:

• あなたのウェブサイトにアクセスして、プリローダーの動作を確認してください。読み込み時間が短すぎたり長すぎたりする場合は、必要に応じてJavaScriptコードの遅延を調整してください。

結論

Elementor Proのウェブサイトにプリローダーを追加すると、コンテンツが読み込まれる間にシームレスな遷移を作成することで、ユーザーエクスペリエンスを向上させることができます。このアニメーションやグラフィックはユーザーを惹きつけ、読み込み時間を短縮し、ロゴやローディングアイコンなどのカスタムビジュアルでブランドのアイデンティティを強化します。セットアップの手順

• ヘッダーテンプレートの作成
• プリローダー用のコンテナの追加。
• CSSとJavaScriptは、その外観と動作を制御するために使用されます。

カスタマイズ可能でレスポンシブな、優れたデザインのプリローダーは、サイトに洗練されたタッチを加え、あらゆるデバイスでスムーズでプロフェッショナルな体験をお約束します。

よくあるご質問

1.プリローダーを使うメリットは何ですか？

プリローダーは、読み込み時間を短縮し、ユーザーを引きつけ、サイトにプロフェッショナルな外観を加えることで、ユーザーエクスペリエンスを向上させます。また、部分的に読み込まれたページがユーザーに表示されるのを防ぎ、スムーズなブラウジングを実現します。

2.プリローダーのアニメーションをカスタマイズできますか？

はい、コード内の CSS を変更することで、プリローダー アニメーションをカスタマイズできます。#abc_loader要素を変更して、さまざまな種類のアニメーション、色、サイズ、その他の視覚効果を含めることができます。必要であれば、アイコンをGIFや他のカスタムアニメーションに置き換えることもできます。

3.プリローダーの時間を調整する方法は？

JavaScriptのコードでは、setTimeout関数にミリ秒単位の遅延を表す2000という値があります。この値を変更することで、プリローダーが表示される時間を増減できます。例えば、3000に変更すると、プリローダーは3秒間表示されます。