代表的なテーマであるDivi は、ネイティブ モジュールのライブラリに豊富なスタイル オプションを提供し、ユーザーが Web サイトの視覚的な側面を広範囲に制御できるようにします。さらに、Divi は、さまざまなアニメーション効果を通じて Web ページに動きを組み込む機能を提供します。
この投稿では、 Diviのネイティブ Call to Action モジュール内のアニメーション設定の利用について詳しく説明し、ホバー効果、スクロール効果、アニメーション効果、スティッキー機能について説明します。
このチュートリアルでは、Divi マーケティング エージェンシー レイアウト パックのセクションを再作成すること、具体的にはランディング ページ レイアウトを操作することに重点を置いています。
レイアウトのインストール
まず、WordPress で新しいページを作成します。「ページ」に移動し、「新規追加」をクリックします。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始める
エディターで、ページにタイトルを付けます。「Divi Builder の使用」をクリックします。
「レイアウトの参照」を選択します。マーケティング エージェンシー レイアウト パックを選択します。
ランディング ページ レイアウトを選択します。[このレイアウトを使用する] をクリックします。
変更を保存します。
それでは、最初の行動喚起を追加しましょう。
CTAモジュールの追加
このチュートリアルでは、このセクションのテキスト モジュールとボタン モジュールを Call to Action モジュールに置き換えます。
まず、各モジュールにマウスを移動し、灰色のポップアウト メニューのゴミ箱アイコンをクリックして、既存のモジュールを削除します。「Introduction」というラベルの付いたテキスト モジュールはそのままにしておきます。
次に、テキスト モジュールの上にマウスを移動し、灰色のプラス アイコンをクリックして、行に Call to Action モジュールを追加します。モジュールのポップアップから Call to Action モジュール アイコンを選択します。
追加したら、レイアウトに合わせて Call to Action モジュールをカスタマイズします。
CTA モジュールのスタイル設定
元のモジュールの既存のコンテンツは、新しく統合された Call to Action モジュールに複製されます。このコンテンツは、タイトル、ボタン、本文の指定されたフィールドに挿入されます。
モジュールの外観をカスタマイズするには、Call to Action モジュールの [デザイン] タブに移動します。まず、テキストの配置と色を設定します。テキストを中央に配置し、色を [ライト] に設定します。
タイトルテキストのカスタマイズには、次の設定を使用することをお勧めします。
- タイトルフォント: Poppins
- タイトルのフォントの太さ:太字
- タイトルテキストサイズ: 55px
- タイトル行の高さ: 1.2em
以前使用したテキストとの類似性が顕著です。スタイル ガイダンスは、Divi マーケティング エージェンシー レイアウト パックから取得されます。
さらに、モジュールに指定された設定を使用して本文テキストのスタイルを設定することにも注意が払われます。
本文設定 -
- 本文フォント: Raleway
- 本文フォントの太さ:標準
- 本文テキストサイズ: 16px
- 本文の高さ: 1.8em
次に、規定の設定を適用して、Call to Action モジュール ボタンをカスタマイズします。
ボタン設定:
- ボタンにカスタムスタイルを使用する:はい
- ボタンのテキストサイズ: 14px
- ボタンのテキストの色: #000000
- ボタンの背景: #ffffff
- ボタンの境界線の幅: 0px
- ボタンの境界線の半径: 10px
- ボタンフォント: Poppins
- ボタンのフォントの太さ:太字
- ボタンのパディング: 上下 - 20 ピクセル、左右 - 30 ピクセル
「デザイン」タブから先に進む前に、Call to Action モジュール内のパディングを調整することをお勧めします。これは、「間隔」タブに移動し、左パディングと右パディングの両方を 10% に設定することで実行できます。
モジュールのスタイルを設定したら、[コンテンツ] タブに進みます。ここで、[背景] タブにアクセスし、[背景色を使用] トグルの選択を解除して、デフォルトの背景色を削除します。
最後に、緑色のチェックマークをクリックして Call to Action モジュールを閉じ、変更を保存することを忘れないでください。
モジュール上のホバー効果アニメーション
最初の Call to Action モジュールに、小さなホバー アニメーションを追加します。作業の結果を以下に示します。
ホバー設定
まず、最近スタイル設定された Call to Action モジュールのモジュール設定に移動します。
その後、[デザイン] タブを選択します。最後に、[変換] タブに移動します。ここで、このモジュールのホバー効果をオンにします。[変換] セクションの [変換] にマウスを移動すると、フライアウト メニューが表示されます。
メニューからポインター アイコンをクリックします。このシンボルを使用すると、マウスを移動したときにアクティブになるいくつかの変換オプションを調整できます。
Divi には、多数のアイテムやオプションで同じホバー効果をアクティブにできるという素晴らしい機能があります。この例では、モジュールの上にマウスを置いたときに、モジュールのサイズが 5% 大きくなるようにしたいと思います。
まず、ホバー タブを選択します。これにより、モジュールを変更するために使用できる選択肢が提供されます。次に、スケール アイコンを選択します。目標は、モジュール全体を大きくすることです。
次に、モジュールを上昇させたい量を入力します。現在のサイズより 5% 大きくしたいので、サイズ オプションで 105% を選択しました。次に、変更を保存します。
CTA モジュールにスクロール効果を追加する
スクロール効果を利用して、Call to Action モジュールを微妙にアニメーション化する方法を見てみましょう。このプロセスでは、シームレスな統合のために Divi のネイティブ機能を活用します。
モジュールの「詳細」タブでは、スクロール効果が有効化されます。このタブは、さまざまな設定を調整して目的のアニメーション効果を実現するためのコントロール センターとして機能します。
スクロール効果タブにアクセスすると、アニメーションをカスタマイズするために特定のパラメータが変更されます。これらの調整には、固定位置やフェードイン/フェードアウトスクロール効果などの設定が含まれます。
アニメーションのさまざまな段階での不透明度レベルは、望ましい視覚効果を実現するために重要です。
フェードインとフェードアウトの設定:
- 開始不透明度: 10%
- 中不透明度: 99%
- 終了時の不透明度: 20%
これらの細心の注意を払って構成された設定により、Call to Action モジュール内で洗練されたスクロール効果が実現されます。この微妙なアニメーションにより、ユーザー エクスペリエンスが向上し、インターフェイスに洗練された雰囲気が加わります。
次に、アニメーション タブを使用して、別の CTA モジュールの入り口をアニメーション化する手順について説明します。このタブには、モジュールの視覚的なプレゼンテーションを洗練し、一貫性のあるユーザー エクスペリエンスを作成するためのカスタマイズ オプションがさらに用意されています。
オープニングアニメーション
モジュールの入口アニメーションは、モジュールが画面ビューポートに入るときに発生しますが、スクロール効果により、スクロール時にモジュールとの継続的なインタラクションが可能になります。スクロール効果とは異なり、入口アニメーションは 1 回だけアクティブになり、スクロールやホバーなどの後続のインタラクションでも繰り返されません。
ズーム効果を使用してエントランスアニメーションを作成するには:
- Call to Action モジュールの設定ウィンドウに移動します。
- [デザイン] タブをクリックし、[アニメーション] に移動します。
- ズームアニメーションスタイルを選択します。
- アニメーションの方向を中央 (デフォルト) のままにして、他の設定は変更しないでください。
CTA の粘着効果
このデモンストレーションでは、Divi のネイティブ Sticky Effects の利用方法について説明します。
まず、新しい行とセクションを作成する必要があります。
- 新しいセクションを開始するには、青いプラスアイコンをクリックします。
- 1列の行レイアウトを選択します。
あらかじめ作成された Call to Action モジュールを利用し、[新しいモジュールの追加] ウィンドウを閉じます。まず、歯車アイコンをクリックしてセクション設定にアクセスします。
次に、「背景」タブに移動し、背景色を #f1ede1 に設定します。
スティッキーな Call to Action モジュールが適切に機能するには、間隔設定を追加することが不可欠です。[デザイン] タブをクリックし、[間隔] セクションまでスクロールします。この手順は、スティッキー アニメーションを観察するのに十分なスペースを確保するために重要です。
セクション間隔設定:
- 上余白: 0px
- 上部のパディング: 0px
- 下部パディング: 300px
これらのパラメータを入力したら、緑色のチェックマークをクリックして作業内容を保存します。ここで、セクションの行内でスティッキー効果をオンにします。最初に、歯車ボタンをクリックして行設定にアクセスします。
これらのパラメータを入力したら、緑色のチェックマークをクリックして作業内容を保存します。次に、セクションの行内でスティッキー効果を有効にします。行オプションにアクセスするには、まず歯車ボタンを選択します。
[詳細設定] タブにアクセスする前に、行の背景色を調整しましょう。[背景] タブに移動し、セクションの場合と同じように、背景色として #000000 を選択します。
その結果、この行は、コースの最初に作成した Call to Action モジュールに似たものになります。ただし、この行を端まで拡張するには、余白とパディングを使用します。これにより、スティッキー効果が目立たなくなり、Web サイトの訪問者にとって視覚的に魅力的になります。
次に、[デザイン] タブの [サイズ設定] タブを選択します。幅と最大幅は両方とも 100% に設定されます。
次に、「間隔」タブまで下にスワイプして、上部と下部のパディング値として 20 ピクセルを追加します。これにより、CTA がより合理的に表示されます。
見た目を整えたら、スクロール効果を適用できます。次に、[詳細設定] メニューに移動して [スクロール効果] タブを選択します。[上部に固定] を選択すると、固定位置が有効になります。[固定上部オフセット] を 0 ピクセルに設定したのは、CTA を画面の上部と同じ高さに維持するためです。[下部固定制限] は、現在 [セクション] に設定されており、変更する他の唯一のオプションです。
まとめ
結論として、 Divi は、ページにアニメーションと動きを組み込むための多数のデフォルト機能と方法を提供します。ページの紹介を強化することを目的としている場合でも、コンテンツでユーザーを引き付けることを目的としている場合でも、 Divi は必要なツールを備えています。Call to Action モジュールをアニメーション化する 4 つの方法を検討しましたが、これらの設定は Divi のモジュール ライブラリ全体に適用できます。さらに、セクション、列、行に拡張できるため、視聴者向けに動的で独特なページ レイアウトを作成できます。
