ローダーとも呼ばれるプリローダーは、ページの他のコンテンツが読み込まれている間、ページ上で実行され続ける単純または複雑なアニメーションまたはGIFです。
あなたのウェブサイトがコンテンツをロードするのにかかる短い時間の間、あなたのユーザーを楽しませ続けることは非常に重要です。 多くのユーザーを維持するのに役立つだけでなく、ユーザーの心に永続的な存在感を生み出すこともできます。 このチュートリアルでは、 Elementorを使用してプリローダーを作成する方法を理解します。
Elementorを使用してプリローダーを作成する方法
Elementorには、完全に異なるレベルでWebサイトを表現できるオプションがたくさんあります。 同様に、それはまたあなたがあなたのウェブサイトからすぐに跳ね返るユーザーを捕まえることができるプリローダーを作成することを可能にします。
まず、コンテンツをロードするのに実際に少し時間が必要で、Webサイトの重要な側面であるページに対してのみプリローダーを作成するようにしてください。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始めるプリローダーを配置するページを決定したら、Webサイトとその特定のページに適したSVGまたはGIFを見つけます。 Icons8は、プリローダーアニメーションの非常に有名なソースです。
ElementorにSVG形式のファイルをインポートする方法がわからない場合は、チュートリアルを確認してください。
次に、Webサイトでプリローダーを使用するには、特定のページに使用する方法と、Webサイト全体に使用する方法の2つがあります。
- ウェブサイト全体でプリローダーを使用する場合は、ヘッダーテンプレートに新しいセクションを作成します。
- 特定のページにプリローダーを使用する場合は、ページの上部に新しいセクションを作成します。
どちらの場合も、セクションの設定を必ず[ギャップなし]に変更してください。
全体として、設定が完了したら、画面の左側にある[要素]タブに移動し、 [ HTML ]を選択します。
[HTML]フィールドに次のコードを追加し、プリローダーのURLを独自のURLに変更してください。
>div class="loader" /divscript/scriptstyle/styleコーディングには、初心者が必要に応じて何らかの変更を加えるための解説説明があります。
最後に、プリローダーを公開して、完全に機能するかどうかを確認します。 これは、WordPressWebサイトでElementorを使用してプリローダーを作成する方法です。
このチュートリアルが、Webサイトのユーザーを維持し、よりプロフェッショナルに見えるようにするのに役立つことを願っています。 このチュートリアルは以上です。 TwitterとFacebookに参加して、コンテンツの最新情報を入手してください。
