Divi 5の相互作用について知る必要があるすべて

プラグインやカスタムCSSなしでダイナミックなポップアップ、トグル、スクロールエフェクトで訪問者を引き付けたい場合は、最新のDivi 5パブリックアルファ機能リリースの1つを気に入るはずです。 DIVI 5でのインタラクションにより、DIVIユーザーは視覚ビルダー内に魅力的でインタラクティブな要素を作成できます。この投稿では、Divi 5のインタラクションについて知る必要があるすべてのものに飛び込み、その機能、いくつかのヒント、および実際のアプリケーションを調査して、機能に精通するのに役立ちます。

重要な注意：DIVI 5は現在公開されており、新しいWebサイト用に最適化されています。継続的な開発とレガシーモジュールの潜在的な互換性の問題により、既存のDIVI 4サイトをまだ移行することはお勧めしません。 Divi 5が完全なリリースに近づいているので、最新情報をお楽しみに！

それに到達しましょう。

Divi 5の相互作用とは何ですか？

Divi 5 Interactionsは、Visual Builder内で直接Webサイトのインタラクティブな要素を作成できるすべてのビルダーです。ポップアップビルダーだけでなく、この機能を使用すると、ポップアップからスクロールトリガーされたアニメーションまで、すべてのコードに触れることなく、さまざまなカスタムインタラクションを作成できます。

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

任意のモジュール、列、行、またはセクションの高度なタブにシームレスに統合されたインタラクションは、魅力的なユーザー中心のエクスペリエンスを構築するための無限の柔軟性を提供します。

Divi 5相互作用のコアコンポーネント

Divi 5の対話の中心には、デザインを実現するために協力する3つの重要なコンポーネントがあります。

イベントをトリガーします

トリガーは、相互作用を開始するイベントです。例には、ボタンをクリックしたり、画像の上でホバリングするなどのユーザーアクション、ページ上の特定のポイントに到達するなどのスクロールベースのイベント、またはページの読み込み後の遅延のように時間ベースのトリガーが含まれます。

利用可能なトリガーは次のとおりです。

• クリック：ユーザーがボタン、画像、またはその他の要素をクリックして、インタラクションを起動します。
• Mouse Enter/Exit：ユーザーがhoversしたり、要素を離れたりします。
• ViewPort Enter/Exit：ユーザーがスクロールすると、画面の表示領域に入りまたは終了します。
• 負荷：オプションの時間遅延で、ページがロードされるとインタラクションが開始されます。

たとえば、ページがユーザーがスクロールしたときに要素をロードまたはアニメーション化してから5秒後にポップアップをトリガーできます。

効果アクション

トリガーがアクティブになったら、効果が何が起こるかを決定します。オプションには、要素の表示または隠し、フェード、スケール、回転、または一貫したスタイリングのためのプリセット遷移の適用が含まれます。

• 可視性の切り替え：目に見えるものと非表示の要素を切り替えます。
• 要素を表示/非表示：要素を表示または非表示にします。
• トグルプリセット：既存のプリセットを置き換える機能を備えたデザイン要素のプリセットのオンまたはオフを変換します。
• プリセットの追加：要素にプリセットスタイルのクラスを追加するために使用されます。既存のプリセットを交換することもできます。
• プリセットを削除：要素からプリセットスタイルを削除するために使用します。
• トグル属性： CSSクラスやCSS IDなど、要素のHTML属性を追加または削除します。
• 追加属性：これにより、現在存在しない特定のHTML属性値が追加されます。
• 属性を削除：要素に適用された属性を削除します。
• トグルクッキー： Cookie値を追加または削除します。たとえば、ポップアップが表示されたらCookieを設定し、Divi 5の条件設定を使用して1回だけ表示するように設定できます。
• Cookieの追加：ユーザーのブラウザに定義できるCookie値を追加します。
• Cookieを削除：以前に指定されたCookieを削除します。
• 要素までスクロールする：ページをスムーズにスクロールして、ターゲット要素を表示することができます。
• ミラーマウスの動き：ユーザーのマウスの動きに続く動きを設定できます。オプションには、翻訳、スケール、不透明度、傾き、または回転が含まれます。また、動きの感度を調整することもできます。

モジュールをターゲットにします

ターゲットは、モジュール、行、列、またはセクション全体など、相互作用が影響する要素です。要素自体またはページ上の別の要素をターゲットにすることができ、複雑な相互作用を作成するための柔軟性を提供できます。

Divi 5相互作用の主要な機能

Divi 5のインタラクションは、ユーザーフレンドリーで用途の広い機能セットで際立っています。

• コードインターフェイスなし： CSSまたはJavaScriptを使用せずに、任意の要素の高度なタブ内の直感的なインターフェイスを介して、トリガー、エフェクト、およびターゲットを構成します。
• 多様なインタラクションタイプ：リードキャプチャ用のポップアップを作成し、FAQのトグル、ヒーローセクションのスクロールトリガーフェード、またはポートフォリオの視差様マウス効果を作成します。
• 軽量パフォーマンス： Divi 5に直接構築され、インタラクションはサードパーティのプラグインの必要性を排除し、サイトの膨満感を削減し、負荷時間を改善します。
• ダイナミックトリガーの組み合わせ：スクロールイベントなどの複数のトリガーを時間遅延と組み合わせて、ユーザーがページの下にスクロールした後に表示されるポップアップのような洗練されたインタラクションの場合。
• レスポンシブデザイン： Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用して、デスクトップ、タブレット、およびモバイルインタラクションをカスタマイズします。

Divi 5インタラクションにアクセスして使用する方法

Visual Builder内での統合のおかげで、Divi 5で相互作用を作成することは簡単です。これらの簡単な手順に従って開始します。

Divi 5でページを開くことから始めます。インタラクションを追加するモジュール、行、列、またはセクションを選択します。たとえば、ページで画像モジュールを選択します。

[ Advanced Tab]に移動し、 [インタラクション]ドロップダウンをクリックします。そこから[インタラクションの追加]ボタンをクリックします。

画像のチルト/変換マウスオーバー効果を作成したいと考えています。これを行うには、2つの相互作用を作成する必要があります。1つは画像用、もう1つは画像を含む列用です。インタラクションに管理者ラベルに名前を付けることから始めて、次の設定を入力してください。

• トリガーイベント：マウスの入り
• 効果アクション：ミラーマウスの動き
• ターゲットモジュール：画像
• 時間遅延： 0
• 動きタイプ：翻訳
• 感度： 10

すべての設定が設定されたら、 [インタラクションの保存]ボタンをクリックして続行します。

次に、列に変換インタラクションを作成します。 +インタラクションの追加をもう一度クリックします。次の設定を入力して、相互作用を作成します。

• 管理者ラベル：ティルト列
• トリガーイベント：マウスの入り
• 効果アクション：ミラーマウスの動き
• ターゲットモジュール：列
• 時間遅延： 0
• 動きの種類：チルト
• 感度： 30

設定が入力されたら、相互作用は次のようになります。

プレビューボタンを使用して、相互作用を表示します。

ページは新しいタブに表示され、インタラクションをプレビューしてテストできます。

作成できるインタラクションの種類

トリガー、エフェクト、および実際のアプリケーションを備えたDivi 5相互作用の汎用性を紹介するためのいくつかの実用的な例を以下に示します。

新しい訪問者へのウェルカムポップアップ

ポップアップは、訪問者にニュースレター、プロモーション、またはイベントにサインアップするように促すのに最適です。 Divi 5のインタラクションを使用すると、ページが読み込まれた後に表示されるウェルカムポップアップを作成できます。

このインタラクションを作成するには、ポップアップ用のセクションを作成し、次の設定を割り当てる必要があります。

• 管理者ラベル：ポップアップ
• トリガーイベント：ロード
• 効果アクション：要素を表示します
• ターゲットモジュール：セクション（ポップアップ） - インタラクションを作成する前に、必ずセクションに名前を付けてください
• 時間遅延： 5秒

また、ポップアップを閉じるためにインタラクションを作成する必要があります。最も簡単な方法は、ポップアップセクションの右上隅にアイコンモジュールを追加し、次の設定を割り当てることです。

• 管理者ラベル：閉じるボタン
• トリガーイベント：クリックします
• 効果アクション：要素を非表示にします
• ターゲットモジュール：セクション（ポップアップ）
• 時間遅延： 0

ポップアップの配置を制御するには、Divi 5の位置設定を使用します。 [ Advanced Tab]に、 [ドロップダウン]メニューを見つけて、固定する位置を設定します。そこから、ポップアップをページに表示する場所を選択します。この例では、中央に設定しています。また、 99999のように、ページ上の他のすべての上にポップアップが表示されるように、 zインデックスを設定することも良い考えです。

最後のステップは、ポップアップの可視性をすべてのデバイスで非表示に設定することです。これを行うには、 [詳細]タブに移動し、 [可視性]ドロップダウンメニューまでスクロールし、すべてのオプションを切り替えて、すべてのデバイスのポップアップセクションを非表示にします。

要素の可視性を切り替えます

トグルは、FAQ、アコーディオンメニュー、価格設定テーブル、サービスなどの折りたたみ可能なコンテンツセクションを作成するのに最適です。ユーザーはクリックしてコンテンツを拡張または崩壊させ、ページを清潔でインタラクティブに保ちます。たとえば、ボタンがクリックされた後にのみ表示されるサービスの完全なリストを表示できます。

この効果を作成するには、セクションのトリガーとして設定するボタンに相互作用を設定します。相互作用のために次の設定を入力します。

• 管理者ラベル： Show Services
• トリガーイベント：クリックします
• 効果アクション：要素を表示します
• ターゲットモジュール：セクション（サービスの公開）
• 時間遅延： 0

次に、アンカーリンクを設定してセクションを開きます。ボタンの設定を開き、[コンテンツ]タブの[URL]フィールドのボタンリンクに#Servicesを入力します。

ボタンの下の[機能]セクションをクリックし、[詳細]タブに移動します。 CSS ID＆クラスメニューの下にあるCSS IDフィールドにサービスを追加して、アンカーを設定します。

高度なタブにいる間、ポップアップで行ったように、セクションの可視性を非表示に設定する必要があります。

マウスモーブメント効果

Divi 5のインタラクションを使用すると、ユーザーが設計要素を越えたときに動的なマウスの動き効果を作成できます。たとえば、相互作用を組み合わせて、見出しと親列に傾斜効果を作成できます。

この相互作用を達成するには、最初に見出しの相互作用を作成する必要があります。画像の詳細なタブに次の設定を入力します。

• 管理者ラベル：アニメーション見出し
• トリガーイベント：マウスの入り
• 効果アクション：ミラーマウスの動き
• ターゲットモジュール：テキスト
• 時間遅延： 0
• 動きの種類：チルト
• 感度： 30

設定が入力されたら、以下のスクリーンショットのように見えるはずです。

次に、次の設定を使用して、見出しを含む列に相互作用を設定します。

• 管理者ラベル：列の傾き
• トリガーイベント：マウスの入り
• 効果アクション：ミラーマウスの動き
• ターゲットモジュール：列
• 時間遅延： 0
• 動きの種類：チルト
• 感度： 50

完了すると、設定は以下のスクリーンショットに似ているはずです。

プリセットベースの相互作用

プリセットと並んでDivi 5の相互作用を使用して、マウスオーバーまたはビューポートEnter/Exitトリガーのいずれかで効果を作成できます。たとえば、背景の色を変更したり、ボーダーシャドウスタイルを追加してページにセクションを紹介したい場合は、インタラクションを使用して実行できます。以下の例では、ユーザーがセクションを越えたときに背景色、幅、および境界線が変化します。

この効果を作成するには、まずマウスオーバーの前後にセクションを表示するためにプリセットを作成する必要があります。この例では、2つを作成しました。1つは、固体の黄色の背景と、さまざまな効果と緑の背景を持つもう1つを作成しました。

プリセットが作成されたら、インタラクションを使用してホバーの変更を切り替えることができます。次の設定との最初の相互作用を作成することから始めます。

• 管理者ラベル：黄色の背景
• トリガーイベント：マウスの入り
• 効果アクション：プリセットを切り替えます
• ターゲットモジュール：セクション（価格設定）
• 時間遅延： 1秒
• プリセット：黄色の背景

次に、次の設定を入力して、マウスオーバーの2番目の相互作用を作成します。

• 管理者ラベル：緑の背景
• トリガーイベント：マウスの出口
• 効果アクション：プリセットを切り替えます
• ターゲットモジュール：セクション（価格設定）
• 時間遅延： 0
• プリセット：緑色のプリセット

Divi 5インタラクションを使用することの利点

Divi 5 Interactionsは、Webサイトを構築するための強力で合理化されたアプローチを提供し、Diviユーザーにとって傑出した機能となるさまざまな利点を提供します。この機能がDivi 5に非常に役立つ追加である理由を詳しく見てみましょう。

1.プラグインは不要です

Divi 5の相互作用はDiviのコアに統合されているため、サードパーティのプラグインがポップアップやその他のインタラクションを作成する必要性がなくなります。このネイティブアプローチにより、サイトで実行されているスクリプトの数が減り、負荷時間が短くなり、パフォーマンスメトリックが改善されます。

たとえば、ポップアッププラグインに依存する代わりに、Divi 5のインタラクションはビジュアルビルダー内のすべてを処理し、よりスリムなコードベースとよりスムーズなユーザーエクスペリエンスを確保します。これはまた、プラグインの競合のリスクを管理および削減するための更新が少なくなり、サイトがより信頼性を高めることを意味します。

2。ユーザーフレンドリーです

Divi 5の相互作用は直感的に設計されており、インタラクションを作成するために数回クリックするだけです。初心者は基本をすばやく把握でき、プロの開発者は単一のコードを書くことなく複雑な組み合わせに飛び込むことができます。

インタラクション設定は、任意の要素の高度なタブ内にきちんと整理されており、クリアラベルとツールチップがプロセス全体をガイドします。たとえば、ポップアップをセットアップするには、トリガーとエフェクトを選択するために数回クリックする必要があり、誰でも簡単に使用できるようになります。

3。カスタマイズする自由

Divi 5の相互作用とその膨大な設定（トリガー、エフェクト、ターゲット）の柔軟性により、サイトの訪問者にユニークな体験を作成できます。スクロールベースのビューポートEnterを時間遅延と組み合わせるなど、複数のトリガーを組み合わせて、ユーザーがページの途中でスクロールした後にフェードインするプロモーションバナーのように、洗練されたインタラクションを作成できます。

モジュール、行、列、またはセクションをターゲットにする機能は、単一のボタンをアニメーション化するか、ヒーローセクション全体を変換するかにかかわらず、必要な場合に正確に効果を適用できることを意味します。

4。ユーザーエンゲージメントの強化

インタラクティブな要素は、ウェブサイトをより没入した応答性のあるものにすることにより、ユーザーのエンゲージメントを高めます。 Divi 5のインタラクションは、トグルをクリックして代替価格設定を明らかにしたり、リードキャプチャのポップアップをトリガーしたりするなど、相互作用を奨励することにより、訪問者をサイトに維持するのに役立ちます。たとえば、レストランのWebサイトでは、スクロールトリガーアニメーションを使用してメニューセクションを表示できます。

始めるための実用的なヒント

Divi 5の相互作用を最大限に活用するには、最適な結果を確保するために戦略的にアプローチします。プロセスをガイドするためのヒントを次に示します。

• シンプルを開始：ポップアップやトグルなどの簡単なインタラクションから始めて、マウスモーブメントやマルチトリガーアニメーションなどの高度なエフェクトに取り組む前に、機能に慣れます。
• 管理ラベルフィールドを使用します。特に複数のセクションを持つ複雑なページで、相互作用と要素のラベルを付けることが重要です。各モジュールのコンテンツタブに[管理者ラベル]フィールドに名前を追加すると、物事を整理し、適切なターゲット要素を簡単に認識できます。
• プリセットの使用： Divi 5のプリセットシステムは、時間を節約し、相互作用全体で一貫性を維持するのに最適です。プリセットを使用すると、フェードインアニメーションやカラートランジションなどの再利用可能なスタイルを定義し、複数の要素に適用できます。
• 徹底的にテスト： Divi 5のプレビュー機能を使用してインタラクションを常にプレビューして、公開前に問題をキャッチしてください。 Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用して、すべてのデバイスでの相互作用の動作をテストすることもできます。

Divi 5のインタラクションでウェブサイトを高めます

Divi 5インタラクションは、ウェブサイトのユーザーエクスペリエンスを高めるための魅力的でノーコードインタラクティブな要素を作成するのに最適な機能です。キャプチャするポップアップから、デザインを実現するスクロールトリガーアニメーションにつながるため、この機能により、誰でもコードのラインに触れることなく動的でプロフェッショナルなWebサイトを構築できます。その軽量統合と多様なトリガーオプションにより、最新のWebデザインに不可欠なツールになります。

始める準備はできましたか？最新のDivi 5アルファをダウンロードして、インタラクションに飛び込み、ポップアップ、切り替え、スクロールエフェクトなどを作成します。簡単なメモ：Divi 5は新しいWebサイトの準備ができていますが、既存のサイトで使用することはまだお勧めしません。

以下にコメントするか、ソーシャルメディアチャンネルに連絡して、あなたの作品を私たちと共有してください。私たちはそれらを見たいです！