GIF は、WodPess を含むあらゆる Web サイト作成プラットフォームでアニメーション画像を挿入するための標準的な方法です。そして現在の最新トレンドは、ロッティーアニメーションを挿入して、魅力的なインタラクティブ要素を画像として表示することです。スケーラビリティのために SVG を使用することもできますが、Lottie を使用するとアニメーションをより細かく制御できます。この記事では、WodPess に Lottie アニメーションを挿入するための具体的なチュートリアルを紹介します。 Lottie は、iOS、Android、およびあらゆる Web プラットフォームにアニメーションを挿入するために使用できる JSON ベースのテキスト ファイル形式です。これは、Adobe After Effects アニメーション ファイルを JSON 形式にエクスポートし、ネイティブにレンダリングするために Aibnb のエンジニアによって開発されました。 Lottie アニメーションを使用する利点は次のとおりです。
ほとんどの無料ブロック プラグインは、WodPess にアニメーション ファイルを挿入するための Lottie アニメーション ブロックを提供します。たとえば、Ultimte Addons fo Gutenbeg (現在は Spect に名前が変更されています) または Kdence ブロック プラグインを使用できます。ここでは、WodPess ウェブサイトに Lottie アニメーションを挿入するための 2 つのプラグインについて説明します。 WoDPeSS リポジトリから「Kdence Blocks – Gutenbeg Blocks for Pge Builde Fetues」アドオンをインストールして有効化します。これは、Gutenbeg エディターにカスタム コントロールを備えた追加のブロックを追加するための無料プラグインです。 このプラグインは、サイトに挿入するアニメーションごとにカスタム投稿タイプとして再利用可能なブロックを作成するため、Lottie アニメーションよりもお勧めです。さらに、Kdence ブロックでは、WodPess ではデフォルトではサポートされていない Lottie アニメーション用の JSON ファイルのアップロードが可能になります。
プラグインはサンプルのアニメーション ファイルを挿入し、ブロックのサイドバーに多数のコントロールが表示されます。 ブロック設定は次のセクションで利用できます。 ソース ファイル – リモート ファイルから URL を貼り付けるか、カスタム JSON ファイルをアップロードするかの 2 つのオプションがあります。独自のファイルがない場合は、この記事の最後のセクションを参照して、無料の Lottie アニメーション ファイルを入手する方法を確認してください。ファイル ソースとしてローカル ファイルを選択すると、サイト内で以前に作成されたすべてのアニメーションを表示するドロップダウン リストが表示されます。これらのいずれかを選択するか、挿入する新しいアイテムをアップロードすることができます。ここで入力したタイトルは、再利用可能な Lottie アニメーション ブロックの名前として使用されます。 再生設定 – このセクションでは、アニメーションの動作を制御し、Web サイトでの再生方法を設定できます。再生/一時停止ボタンを表示したり、自動再生を有効にしたり、ホバー時またはページスクロール時にのみアニメーションを再生できるようにしたりできます。アニメーションをループするように設定し、ループ間の遅延を調整することも可能です。 サイズコントロール – この設定では、パディング、余白、幅を設定して全体のサイズを変更できます。これらのオプションを使用して、コンテンツ領域にアニメーションを合わせて配置することができます。 詳細 – これは、要素にカスタム CSS クラスを割り当てるための Gutenbeg のデフォルト オプションです。 完了したら、ページに他のコンテンツを追加し、「公開」ボタンを押して、Lottie アニメーションの動作を確認します。 [設定] > [コンセプト ブロック] メニューに移動し、[Lottie アニメーション] ボックスの下にある [Lottie アニメーションの管理] をクリックします。すると、すべての Lottie アニメーションを 1 か所で表示できるページに移動します。ご覧のとおり、Gutenbeg エディターに挿入したすべてのアニメーションは、実際には「kdence_lottie」という名前のカスタム記事タイプとして保存されます。ここから「新規追加」ボタンをクリックして新しいアニメーションを作成することもできます。これらは再利用可能なブロックであり、名前を検索することで Web サイトの任意の場所に挿入できます。 Ast テーマを使用している場合、または何らかの理由で Kdence ブロックが正しく動作しない場合は、代替オプションとして Ultimte Addon fo Gutenbeg プラグイン (Spect と呼ばれます) を使用します。同様の Lottie Animation ブロックを提供しますが、機能は制限されています。プラグインを有効にした後、「設定∓>UAG」セクションに移動し、「Lottie」オプションを有効にします。変更を有効にするには、必ず「アセットの再生成」ボタンをクリックしてキャッシュをクリアしてください。 新しい投稿を作成するか、既存の投稿を編集して、Gutenberg エディターに移動します。エディターに /lottie と入力して、Lottie ブロックを挿入します。 Kdence ボックスとは異なり、UAG プラグインは JSON ファイルのアップロードをサポートしていません。したがって、「URL から挿入」オプションのみを使用して、サードパーティのサイトからの Lottie ファイル URL を使用できます。それ以外の場合は、追加のプラグインを使用して JSON アップロード サポートを有効にする必要があります。 UAG プラグインは、Lottie アニメーション ブロックの「コントロール」と「スタイル」設定を提供します。 [コントロール] セクションでは、ホバー時、クリック時、またはビューポートに基づいてアニメーションを再生するように設定できます。定義された速度でループしたり、アニメーションの順序を逆にしたりすることも可能です。 スタイル セクションでは、Lottie ブロックの幅、高さ、配置、背景色を調整できます。 Lottie アニメーション ファイルはどこで入手できますか? これで、WodPess Web サイトに Lottie アニメーションを挿入する方法がわかりました。しかし、問題は無料の Lottie JSON ファイルを入手することにあります。デザイナーは Adobe After Effects を使用してアニメーションを作成し、それを Lottie ファイルに変換できます。 さらに、SVG ファイルを Lottie 形式に変換するオプションもあります。ただし、平均的な WodPess コンテンツ作成者やブロガーにとって簡単な選択肢は、Lottiefiles などのサイトで入手できる無料ファイルを再利用することです。 前述のように、Kdence は JSON ファイルのアップロードをサポートしていますが、UAG プラグインはサポートしていません。したがって、アップロードには Kdence ブロックを使用し、Lottiefiles サイトからの埋め込みには UAG プラグインを使用するようにしてください。
Lottiefiles では、簡単に統合できるように WodPess プラグインと Elemento Po ウィジェットも提供されていることに注意してください。 |
<<: SSL 証明書が有効期限後に時間内に更新されない場合、どのような結果になりますか?
>>: Kubernetes はどのようなリソースをサポートしていますか? Kubernetes リソースタイプの紹介
韓国のトップ10化粧品ブランドが発表されました。あなたの化粧品がどのレベルに属するか見てみましょう。...
ウーコマースおよび BigCommece は現在人気の電子商取引プラットフォームです。越境電子商取引...
2023年、外食産業における驚異的な越境マーケティング事例8選2023年の飲食業界は回復環境の中活...
データウェアハウスは、企業の分析と意思決定に不可欠であり、企業のデータ分析や運用などの問題を解決しま...
福建セメントは5.18%上昇し、1株当たり3.25元となった。 4月17日、福建セメントは取引セッシ...
保険販売における3つの主要スキル、そのうちの1つをうまく使えば成功できる「保険販売にはスキルが必要だ...
ウェブサイトを運営するには?これら4つの部分から、研究は半分の労力で2倍の結果を得ることができます。...
数百万ドルの化粧品をどうやって作るのか?オンラインの有名人とオフラインの視聴者が新たな広告モデルにな...
「Eコマースの知識」Eコマース業務でよく使われるデータ分析用語、初心者必読!データ分析は、すべての...
福建省福州で最も優れた専門ブランド企画会社はどれですか?ブランド戦略コンサルティング会社企業の戦略計...
8 月のマーケティング カレンダーの推奨事項 (完全なイベント計画テンプレート付き)暑い7月は、本...
デジタル政府:現在、Qijiの無人インテリジェントグリッド車両は主に都市のビッグデータ統合運用サービ...
「ホテルカテゴリー運営要員の専門能力要件」グループ標準セミナーをオンラインで開催しました2020年...
無料だからといって非効率的というわけではない: Facebook によるビジネス プロモーションの ...
2024年南陽鎮平県国有資産保有運営グループ株式会社22名募集のお知らせ当社グループの中核競争力を...