Divi 5のLottieモジュールについて知っておくべきことすべて

Divi 5のLottieモジュールは、ページに動的で軽量なアニメーションをもたらし、ページをより魅力的でインタラクティブにします。適切なビジュアルは、注意を引いて訪問者を引き付け続けるための鍵です。 Lottieモジュールを使用すると、Divi 5を使用すると、パフォーマンスにも優しいプロフェッショナルなアニメーションを追加できます。

この投稿では、その機能、セットアッププロセス、カスタマイズオプション、それを使用する方法など、Lottieモジュールについて知っておく必要があるすべてのことを説明します。飛び込もう！

Lottieファイルとは何ですか？

Lottieアニメーションは、JSONベースのグラフィックスの軽量で、スケーラブルなベクトルとしてレンダリングされています。ビデオやGIFの大きなファイルサイズなしでスケーラブルなビジュアルを提供します。パフォーマンスを柔軟性と組み合わせる能力のおかげで、Lottieは人気を博し、最新のWebデザインで人気を博しています。従来のアニメーションとは異なり、LottieファイルはベクトルベースのJSONデータを使用し、すべてのデバイスと画面サイズで鮮明なビジュアルとスムーズな再生を確保します。

YouTubeチャンネルを購読してください

Divi 5では、LottieモジュールはこれらのアニメーションをVisual Builderにシームレスに統合し、数回クリックしてDivi Webサイトにダイナミックでモダンなタッチを追加できるようにします。 CTAを強調したり、ヒーローセクションにFLAIRを追加したりする場合でも、Lottieモジュールは、複雑なコーディングなしでアニメーションを簡単に組み込むことができます。

Lottieモジュールを使用すると、Divi 5は、Webデザインに動きをもたらす方法を変換し、魅力的で効率的にします。

重要な機能

Divi 5のLottieモジュールは、ダイナミックで最適化されたアニメーションを簡単に作成できる機能を備えた汎用性の高いツールです。アニメーションの動作を制御し、速度、方向、トリガーなどを調整できるようにします。その主要な機能のいくつかを見てみましょう。

使いやすさ

Divi 5のLottieモジュールは、シンプルさを念頭に置いて設計されており、あらゆるスキルレベルのユーザーが初心者にやさしくアクセスできるようにします。専門的で人目を引くアニメーションをDIVI Webサイトに追加するために、コーディングの専門家である必要はありません。

オンラインで利用可能なリソースの数のおかげで、アニメーションを調達するのは簡単です。 LottiefilesやLordiconなどのプラットフォームは、微妙なロードアイコンから活気のあるグラフィックスまで、無料でプレミアムのロッティアニメーションの広範なライブラリを提供しています。

ユニークなタッチを探している人のために、BodyMovinプラグインでAdobe After Effectsなどのツールを使用してカスタムアニメーションを作成できます。このプラグインは、JSONがLottieモジュールと互換性のあるファイルとしてアニメーションをエクスポートします。既製のアニメーションまたはカスタムアニメーションを選択するかどうかにかかわらず、プロセスは簡単です。

カスタマイズオプション

Divi 5のLottieモジュールは、カスタマイズオプションを提供し、Lottieファイルのいくつかの側面を制御できます。インタラクティブなエクスペリエンスには、トリガーアニメーションを使用して、要素がビューポート、ホバー、クリック、またはスクロールに入るとき、ロードなどのアニメーションをアクティブ化するタイミングを選択します。 Loop AnimationがLottieファイルで連続的な動きを許可し、アニメーション速度を調整し、方向（前方または後方）を選択し、再生モードフィールドで通常またはバウンスを選択できるようにすることができます。

JSONアニメーションのアップロード

Divi 5にLottieアニメーションを追加するには、Lottieファイルの標準形式であるJSONファイルをアップロードする必要があります。ただし、WordPressはJSONアップロードをメディアライブラリにネイティブにサポートしていないため、アップロードできるように追加の手順を実行する必要があります。

最初のオプションは、子テーマを作成し、子供のテーマのfunctions.phpファイルにPHPスニペットを追加することです。この方法は軽量であり、アニメーションファイルの安全な処理を保証します。または、ファイルアップロードタイプなどのプラグインなどのプラグインを使用して、コードに触れずにJSONアップロードを許可し、プラグアンドプレイソリューションを好むユーザーに最適です。いずれかの方法を実装するための段階的なガイドについては、サポート記事をご覧ください。これについては、プロセスをご覧ください。JSONアップロード用のDivi 5 Webサイトを設定します。

Divi 5でLottieモジュールを使用する方法

Divi 5にロットアニメーションを追加するのは簡単です。 LotTiefilesやLordiconなどのソースからLottieアニメーションを作成またはダウンロードします。 Visual BuilderのLottieモジュールを見つけてクリックして、ページに追加します。

JSONファイルをアップロードするか、WordPressメディアギャラリーに配置します。

トリガーアニメーションを選択します。ロード、表示、ホバリング、クリック、またはスクロールしてアニメーション化するためにアニメーション化するように設定できます。

Lottieアニメーションにインタラクティブな要素が必要な場合は、モジュールのスクロールを使用してトリガーをアニメーション化します。

このトリガーを使用すると、ダイナミックで魅力的なユーザーエクスペリエンスを作成する素晴らしい方法があります。ページが読み込まれるときにアニメーションを使用する代わりに、スクロールしてアニメーション化して、アニメーションの進行状況をユーザーのスクロール動作に直接結び付けます。ユーザーがページを下にスクロールすると、アニメーションはフレームごとに進行します。これにより、アニメーションは体験をよりダイナミックに感じるインタラクティブな要素になります。

アニメーションを際限なくループさせたい場合は、ループアニメーションのトグルを有効にします。また、アニメーション速度を設定し、方向（前方または後方）を制御し、再生モードの通常またはバウンスを選択することもできます。

[デザイン]タブでは、サイジング、アライメント、高さ、間隔などを制御できます。

Divi 5内のLottieファイルの色を変更することはできませんが、ほとんどのLottie Webサイトでは、ダウンロードする前に特定の色とストローク幅を選択できます。

ご覧のとおり、Divi 5 WebサイトにLottieファイルを追加するには数秒かかり、パフォーマンスを心配することなくWebページに少しFlairを追加します。

Lottieモジュールを使用した実用的な例

Divi 5のLottieモジュールは、幅広いアプリケーションを提供し、動的なアニメーションを備えたWebサイトにFlairを追加します。連絡先ページの強化から目を引くヒーローセクションまで、その柔軟性はあらゆる種類のデザインに適しています。

シームレスな統合とカスタマイズオプションにより、DIVIユーザーは、ウェブサイト全体で魅力的でパフォーマンスに優しいエクスペリエンスを作成できます。

連絡先ページ

Lottieアニメーションを追加すると、連絡先ページがより魅力的になります。たとえば、営業時間、電話番号、およびその他の連絡先情報の横にあるロッティモジュールをループして、サイトを遅くすることなくコンバージョンを高めるインタラクティブで魅力的なエクスペリエンスを作成します。

404ページ

イライラする404エラーを、遊び心のあるLottieアニメーションで記憶に残る瞬間に変えます。短いメッセージとペアになって、紡績コンパスまたはアニメーション検索アイコンを404ページに追加します。

ループアニメーション設定を使用してモーションを連続させ続け、ロード時にトリガーしてすぐに注意を引きます。これにより、404ページは行き止まりのように感じられず、創造的なタッチポイントのように感じられます。

注目製品

お気に入りのWoo製品やカテゴリをLottieアニメーションで紹介して、販売中の製品を強調してください。たとえば、販売バッジロッティアニメーションを注目製品の隣に配置して、強調表示します。

まず、ロードでトリガーするようにアニメーションを設定します。次に、ユーザーが閲覧するにつれてアクティブになり、製品に目を向け、視覚的な魅力を高めます。

サービスセクション

あなたのサービスセクションを視覚的に表現するロッティアニメーションを使用して、あなたのサービスのセクションを実現します。たとえば、マーケティング代理店のループアニメーションを使用して、トーンに合わせて速度を調整します。

さらに、ユーザーが探求するときにビュートリガーを設定してアニメーションをアクティブにし、動的でプロフェッショナルなプレゼンテーションを確保します。

ヒーローセクション

あなたのヒーローのセクションを、あなたのウェブサイトのトーンを設定する大胆なロッティアニメーションで忘れられないものにします。まず、DiviのLottieモジュールを使用してスムーズな背景アニメーションを追加します。次に、DIVIの位置設定で行とモジュールの後ろに配置します。

たとえば、流れるようなモダンなアニメーションまたは微妙な粒子効果は、ほとんど努力せずにサイトに深さを追加することができます。オンロードトリガーを使用して即時のインパクトを取り、プレイモードを調整して魅惑的な効果を得るためにバウンスします。

ファイルをダウンロードします

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

サブスクライブに成功しました。メールアドレスを確認してサブスクリプションを確認し、無料の毎週のDiviレイアウトパックにアクセスしてください！

結論

Divi 5では、Lottieモジュールは、Webサイトに軽量で動的なアニメーションを追加することを簡素化します。 Visual Builderにシームレスに統合されているため、最小限の労力でプロのアニメーションが可能になります。柔軟なコントロール、大規模なカスタマイズ、および無料のLottieファイルプラットフォームにより、サイトの強化が容易になります。

Lottieモジュールを試す準備はできましたか？コメントやソーシャルメディアであなたの考えや創造物を共有してください。