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

カスタムプリローダーアニメーションでElementorウェブサイトを強化しましょう

f林

目次

プリローダー・アニメーションが重要な理由

プリローダーは、Elementorウェブサイトの第一印象を印象深いものに変えることができます。真っ白なページや恐ろしいローディングスピナーの代わりに、よくデザインされたプリローダーが個性を加え、コンテンツが表示されるのを待つ間、訪問者の興味を惹きつけます。この記事では、Elementorでプリローダーアニメーションを作成・カスタマイズする手順を、誰でもできる簡単なステップに分けて説明します。

リンクをクリックしたのに、真っ白な画面を見つめているとします。イライラしますよね？プリローダーアニメーションは、ページがアクティブに読み込まれているという視覚的なフィードバックを提供することで、この問題を解決します。プリローダーはユーザーのエンゲージメントを高めるだけでなく、視覚的な創造性によってブランドの個性を伝えるのにも役立ちます。

プリローダー・スタイル

Elementorのウェブサイトにプリローダーを追加する方法の前に、使用できるさまざまなスタイルを調べてみましょう：

  1. スピナーアニメーション:定番の選択。シンプルで効果的な回転スピナーは、ユーザーに何かが起こっていることを伝えます。
    • ユースケース:ミニマリストや技術志向のウェブサイトに適しています。このスタイルはストレートで邪魔にならないので、シンプルさが重要なウェブサイトに最適です。
    • カスタマイズのヒント:一貫性を保つため、スピナーにはブランドカラーを使用してください。
  2. プログレスバー:ローディングのパーセンテージを正確に伝え、訪問者にどれくらい待つ必要があるのかを感覚的に伝えたい場合に最適です。
    • ユースケース:Eコマースや画像の多いブログなど、コンテンツの多いサイトに最適です。プログレスバーは、ユーザーに読み込みの進捗状況を明確に示し、フラストレーションを軽減します。
    • カスタマイズのヒント:プログレスバーの色をウェブサイトのメインカラーに合わせてカスタマイズし、「Loading... Please wait（読み込み中...しばらくお待ちください）」のようなラベルを追加して、より分かりやすくすることを検討してください。
  3. ロゴアニメーション:ロゴをアニメーション化することで、クリエイティブなセンスを発揮しながら、ブランドを維持することができます。
    • ユースケース:代理店やファッションブランド、クリエイティブなポートフォリオなど、ブランドに特化したウェブサイトに最適です。このタイプのプリローダーはブランドのアイデンティティを強化します。
    • カスタマイズのヒント:のようなツールを使用します。 アフターエフェクツ または ロティファイル を使って、ロゴの軽量なSVGアニメーションを作成できます。アニメーションのループがスムーズで、数秒以上続かないようにしてください。
  4. テキストのフェードイン/アウト:Loading... "のような文字が表示されたり消えたりするオプションは、シンプルでインパクトがあり、個人的なタッチを追加します。
    • ユースケース:個人ブログやコミュニティサイトに最適。温かく親しみやすい雰囲気を醸し出し、ユーザーにつながりを感じさせます。
    • カスタマイズのヒント:あなたのブランドの声に合わせてテキストをカスタマイズしてください。"Hold tight, amazing content is on the way!"のようなユニークなものを使って、個性を加えてください。

目標は、ブランドと調和し、ウェブサイトのスタイルにマッチし、コンテンツが読み込まれる間、ユーザーを引きつけるプリローダーを選ぶことです。

ステップバイステップElementorでのカスタムプリローダーの追加

それでは、Elementorウェブサイトにカスタムプリローダーアニメーションを追加する方法を詳しく説明します。コーディングの専門家でなくても心配する必要はありません。

ステップ1：プリローダー・プラグインのインストール

Elementorでプリローダーアニメーションを追加する最も簡単な方法は、プラグインを使用することです。最も人気のあるオプションには次のようなものがあります：

このチュートリアルでは プリローダー・プラス プラグインはユーザーフレンドリーで、コードに触れることなく多くのカスタマイズが可能です。

ステップ2：Preloader Plusのインストール

  1. WordPressのダッシュボードに移動します。.
    • WordPressの管理画面にログインします。
    • ダッシュボードからプラグインのインストールや設定のカスタマイズができます。
  2. プラグイン > 新規追加.
    • をクリックしてください。 プラグイン をクリックします。 新規追加.
  3. 検索バーで「Preloader Plus」を検索してください。
    • 検索バーに「Preloader Plus」と入力し、Enterキーを押してください。
  4. クリック 今すぐインストール そして 起動.
    • プラグインを見つけたら 今すぐインストール.
    • インストールが完了したら 起動 をクリックしてプラグインを有効にしてください。

有効化すると、WordPressのダッシュボードにPreloader Plusの設定が表示されます。

ステップ3：プリローダーの設定

  1. プリローダー・プラスの設定を開く ダッシュボードから
    • こちらへ 設定 > プリローダー・プラス をクリックして設定オプションにアクセスします。
  2. に移動します。 一般設定 タブ
    • ここでは、プリローダーを有効または無効にしたり、基本的な動作を設定したりできます。
  3. プリローダーの有効化 トグルをオンにします。
    • これにより、選択した設定に基づき、ウェブサイト全体でプリローダーが有効になります。

次に、いつ、どこでプリローダーをアクティブにするかを決めましょう。トップページだけに使うこともできますし、サイト全体に使うこともできます。

ステップ4：プリローダーアニメーションの選択

  1. をご覧ください。 スタイル設定 タブ
    • このタブでは、プリローダーの外観を設定できます。
    • 例:訪問することができます https://example.com ロゴアニメーションのプリローダーが、クリエイティブなポートフォリオのブランディングをどのように強化するかをご覧ください。
  2. プリローダー・タイプの選択:スピナー、プログレスバー、カスタムアニメーションのいずれかを選択します。
    • ブランドのスタイルに応じて、ニーズに最適なプリローダーをお選びください。
    • 例:のようなeコマースサイトの場合 https://shopdemo.comプログレスバーは、ユーザーに情報を提供するのに有効です。
  3. について カスタムプリローダーブランドアニメーションが必要な場合は、ロゴのGIFまたはSVGをアップロードしてください。
    • をクリックしてください。 アップロード をクリックして、カスタムプリローダーアニメーションを追加します。

ブランドロゴのカスタムGIFは、訪問者に印象を残すのに最適な方法です。以下のようなツールを使うことができます。 カンヴァ または フィグマ で簡単なロゴアニメーションを作成できます。

ステップ5：デザインとタイミングの調整

Elementorとプリローダーを統合してより大きなコントロールを実現

プリローダーを表示する場所とタイミングをより細かく制御したい場合は、Preloader PlusをElementorに統合することができます。 ElementorのカスタムCSS 特集です。

/* プリローダー用カスタムCSS */
.preloader-section {
  animation: fadeIn 2s ease-in-out；
}

キーフレーム fadeIn {
  0% { opacity: 0; }.
  100% { opacity: 1; }.
}

プリローダーのテストと最適化

プリローダーを設定したら、テストすることが重要です。ここではいくつかのヒントを紹介します：

最終的な感想あなたのElementorウェブサイトを際立たせるために

優れたデザインのプリローダーは、単なるローディング画面ではありません。Elementorのウェブサイトを次のレベルに引き上げるには、プリローダーを追加するだけで終わらせないでください。サイトのパフォーマンスを継続的に最適化し、プリローダーからページアニメーションまで、各インタラクションがブランドストーリーにどのように付加されるかを検討しましょう。

これらのステップとヒントにより、訪問者を惹きつけるだけでなく、ブランドアイデンティティを強化するカスタムプリローダーを作成するために必要なものがすべて揃いました。

モバイルバージョン終了