WordPress に Lottie アニメーションを追加する方法 (4 つの簡単なステップ)

WordPress で Lottie アニメーションを使用すると、ページを美しくすることができます。 これらは通常、軽量でカスタマイズ可能であるため、ユーザー エクスペリエンス (UX) を損なうことなく魅力的なコンテンツを作成するのに役立ちます。 ただし、それらをサイトに追加するためのストレスのない方法を探しているかもしれません.

幸いなことに、プロセスは思ったより簡単です。 Otter Blocks のようなプラグインを使用すると、数回クリックするだけで Lottie アニメーションを追加およびカスタマイズできます。 適切なタイミングで再生されるように、可視性の条件を設定することもできます。

Lottie アニメーションの紹介

Lottie は、Web アニメーション用のオープンソース ファイル形式です。 ブランドのカスタム アニメーションを作成し、Web サイトで使用できます。

もちろん、いつでも GIF を選択できますが、これらのファイルはサイトの重荷になる可能性があります。 Lottie のアニメーションは、GIF よりもはるかに小さいです。 したがって、UX を維持し、読み込み時間を短縮しながら、サイトをより興味深いものにするのに役立ちます。

さらに、Lottie アニメーションには多くのカスタマイズ オプションが用意されています。 ライブラリ自体は豊富で、何千もの要素、文字、イラストにアクセスできます。 ただし、色を交換したり、表示設定を変更したり、表示条件を追加したりすることもできます。

カスタム アニメーションは、訪問者を感動させるのに役立ちます。 さらに、サイトを新鮮でユニークに見せることができます.

Lottie アニメーションを WordPress に追加する方法 (4 ステップ)

Lottie Animations についてもう少し理解できたところで、WordPress Web サイトに追加する方法を見てみましょう。

ステップ 1: Otter Blocks をインストールしてアクティブ化する

WordPress に Lottie アニメーションを追加する方法はたくさんあります。 たとえば、HTML と JavaScript を使用できます。 ただし、この方法はかなり複雑になる可能性があります。

別の方法として、Lottie アニメーション プラグインを使用することもできますが、これはすべてのページ ビルダーと互換性があるわけではありません。 さらに、多くのスタイルオプションを提供していません.

サイトに Lottie アニメーションを追加する最も簡単な方法は、Otter Blocks のようなプラグインを使用することです。

このプラグインは、Lottie アニメーションのブロックを含む、新しいコンテンツ ブロックとテンプレートをサイトに追加します。 また、カスタム CSS、アニメーション、可視性条件などを使用してブロック エディターの機能を拡張します。 したがって、ページをより効率的にデザインし、ページ ビルダーの必要性を減らすのに役立ちます。

Otter Blocks Pro にアップグレードすると、特別な WooCommerce ブロックや追加のスタイル設定などの高度な機能にアクセスできます。 ただし、Lottie アニメーション機能を使用するために Pro バージョンは必要ありません。

無料版を使用する場合は、WordPress ダッシュボードで[プラグイン] > [新規追加]に移動し、「Otter Blocks:」を検索してください。

次に、 [インストール] > [アクティブ化]をクリックします。 ブロック エディタに新しいブロックの選択が表示されます。

ステップ 2: Lottie ライブラリからアニメーションを選択する

Web サイトに Otter Blocks を設定したので、Lottie ライブラリに移動してアニメーションを選択できます。 デザインにアクセスするには、無料のアカウントを作成する必要があります。

プロファイルを作成したら、 Discoverに移動して、すぐに使用できる無料のアニメーションを選択します。

ここでは、Web サイト、アプリケーション、およびソーシャル メディアで使用できる Lottie 要素のライブラリを参照できます。

使いたいアニメーションが見つかったら、デザインをクリックします。 アニメーションの外観を変更できるポップアップが表示されます。

たとえば、アニメーションの速度を調整したり、背景色を変更したりできます。 Edit Layer Colorsをクリックすると、Lottie Editor に移動します。

ここでは、デザインの任意の部分の色をカスタマイズできます。 変更したい要素のセクションをクリックするだけで、 [すべての色]に移動し、カラー ピッカーを使用して新しいトーンを適用します。

気に入らない変更を行った場合は、画面の左上にある[元に戻す] 矢印をクリックします。

ステップ 3: Lottie アニメーションの URL を Otter Block に貼り付けるか、Lottie ファイルをアップロードします。

デザインに満足したら、それを WordPress に追加するための 2 つのオプションがあります。

1. Lottie アニメーションの URL をコピーして、LottieFiles のサーバーからサイトにバージョンを追加できます。 これは、アニメーション ポップアップのデザインのすぐ下にあります。
2. 右上隅にある[ダウンロード]ボタンをクリックし、 dotLottie形式を選択すると、完成した LottieFile をコンピューターにダウンロードできます。 これにより、サーバー上でファイルをホストできます。

次に、WordPress サイトに戻り、アニメーションを挿入するページまたは投稿を開きます。

クリックして新しいブロックを追加し、「Lottie Animations:」を検索します。

ブロックをページに追加します。 次に、次のいずれかのオプションを選択します。

• URL から挿入– LottieFiles のサーバーにある Lottie ファイルへのリンクを入力する場合は、これを使用します。 LottieFiles の Web サイトからコピーしたLottie Animation の URLリンクを貼り付けるだけです。
• アップロード– LottieFiles から実際の dotLottie ファイルをダウンロードした場合は、これを使用します。 その後、そのファイルを WordPress サイトにアップロードできます。

次に、 Enter キーを押すと、アニメーションがページに表示されます。

変更を保存して、最後のステップに進むことができます。

ステップ 4: Otter Blocks でアニメーションをカスタマイズする

WordPress に Lottie アニメーションを追加したので、デザインとレイアウトをカスタマイズする準備が整いました。 ブロック設定では、表示オプションの選択が表示されます。

TRIGGERの下で、 autoplay 、 scroll 、 hover 、 clickのいずれかを選択できます。 ページで次のアクションのいずれかが完了するまで、アニメーションは再生されません。

アニメーションをループで再生するように切り替えるオプションもあります。 さらに、スライダーを使用してアニメーションの速度を調整したり、方向を逆にしたり、デザインの幅を変更したりできます。

背景色を変更する場合は、 [背景]タブをクリックします。 ここでは、デフォルトのSolidオプションのいずれかを選択するか、カラー ピッカーを使用するか、グラデーションの背景を選択できます。

Visibility Conditionsに進むと、アニメーションが特定の状況でのみ表示されるように構成できます。

たとえば、ブロックをログイン ユーザーのみに表示したり、特定の日付に表示したりできます。 これを行うには、 Add Rule Groupをクリックします。 次に、矢印を選択して設定を開きます。

CONDITIONの下で、ドロップダウン メニューを使用して表示設定を構成します。 複数の条件を追加して、追加のルール グループを作成できます。

WordPress で Lottie アニメーションを使い始める

要約すると、WordPress に Lottie アニメーションを追加するための 4 つの手順は次のとおりです。

ネイティブの WordPress エディターを改善するためのさらに多くの方法については、最高の WordPress ブロック プラグインの完全なコレクションをご覧ください。

WordPress に Lottie アニメーションを追加することについて質問がありますか? 以下のコメントセクションでお知らせください！