OpenByt - 無料のWordPressに関する究極の情報源

Elementor Proでプロフェッショナルなプリローダーを作成し、よりスムーズなウェブサイト体験を実現するための完全ガイド

トムスクム

はじめに

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

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

プリローダーとは？

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

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

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

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

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

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

テンプレートの公開:

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

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

コンテナの追加:

CSS IDの設定:

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

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

ウィジェットの追加:

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

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

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

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

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を設定します。:

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

体制が整ったところで カスタム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；
}
https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-15-21-17-14.mp4

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

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

プリローダーのテスト:

結論

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

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

よくあるご質問

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

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

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

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

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

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

モバイルバージョン終了