Divi 5のインタラクションでポップアップを構築する方法（無料ダウンロード）

ポップアップは、あなたのウェブサイトで注目を集め、関与を推進するための素晴らしいツールです。メーリングリストを拡大したり、特別オファーを宣伝したり、訪問者を特定のアクションに導きたい場合でも、適切に設計されたポップアップがすべての違いを生むことができます。 Divi 5インタラクションのリリースにより、カスタムのダイナミックポップアップの作成はかつてないほど容易になりました。

この投稿では、Divi 5のインタラクション機能を使用してポップアップを作成します。飛び込みましょう！

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

Divi 5 Interactionsは、Visual Builderに統合された新機能であり、Webサイトをよりダイナミックで魅力的にするように設計されています。クリック、ホーバー、スクロールなどのユーザーアクションやページイベントに基づいて、カスタムアニメーションと応答を作成できます。静的設計とは異なり、インタラクションを使用すると、ポップアップ、トグル、マウスの動き、スクロール効果をすべて作成できます。

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

DIVI相互作用の重要なコンポーネント

Divi 5のすべての相互作用は、3つのコアコンポーネントで構成されています。

• トリガー：クリック、ホバリング、またはビューポートに入るまたは出る要素など、相互作用を開始するイベント。
• 効果：可視性の切り替え、プリセットスタイルの適用、属性の変更など、トリガーがアクティブになったときに発生するアクション。
• ターゲット：相互作用の影響を受ける特定の要素。これは、その管理者ラベルで識別されたページ上の別のセクション、行、列、またはモジュールである可能性があります。

これらのコンポーネントは連携して動作し、シンプルでノーコードインターフェイスとの複雑な相互作用を作成できます。

ポップアップを作成するためにインタラクションを使用する必要がある理由

Divi 5インタラクションは、ポップアップを構築するためのいくつかの利点を提供します。

• プラグインは必要ありません。従来のポップアップビルダーとは異なり、Divi 5インタラクションは視覚ビルダーに直接構築されており、サードパーティのプラグインの必要性が排除されます。
• Visual Builder内にある： Diviの馴染みのあるインターフェイス、モジュール、スタイリングオプションを使用してポップアップを構築でき、スキルレベルのユーザーが簡単にすることができます。
• 汎用性の高いオプションとエフェクト：スクロールベースのアニメーションやマウスモーブメント効果など、ポップアップを他のインタラクションと組み合わせて、ユニークで魅力的な体験を作成します。
• 完全な制御：トリガー、エフェクト、ターゲットをカスタマイズして、特定の目標のポップアップを作成します。

Divi 5でポップアップを構築するための段階的なガイド

Divi 5にポップアップを作成するのは簡単で、サイトの既存のデザインに容易に一致します。このセクションでは、事前に作られたレイアウトの1つに合わせてポップアップを作成し、スタイルをスタイリングする方法を紹介し、インタラクションを設定してポップアップを時限遅延で表示することがどれほど簡単かを示します。

1.レイアウトパックをインストールします

このチュートリアルでは、レイアウトパックデザインの1つから始めて、同じスタイルのポップアップを構築することにより、物事を簡素化します。そのために、ビジュアルビルダーの左上隅にある +アイコンをクリックします。

ダイアログボックスが表示されたら、利用可能なオプションから事前のレイアウトを選択します。

オンライン学習レイアウトパックサムネイルをクリックして、利用可能なページを強調表示します。

ランディングページの設計を選択し、 [このレイアウトを使用して[視覚的]ビルダーにロードします。

レイアウトパックをインポートする最後のステップは、プリセットをインポートするかどうかを選択することです。選択したら、[インポート]ボタンをクリックします。

2。ポップアップのセクションを作成します

レイアウトパックがインポートされたので、ページの下部にポップアップ用の新しいセクションを作成する必要があります。ページの最後までスクロールして、新しいセクションを追加します。

アイコンをクリックして新しい行を挿入します。オフセット列の下の2番目のオプションを選択します。

3.ポップアップを設計します

これで、ポップアップにコンテンツの追加を開始できます。 [モジュールまたは行の挿入]ダイアログボックスが表示されたら、クリックして見出しモジュールを追加します。

「15％オフしたいですか？」 [コンテンツ]タブの下の[見出し]フィールド。

ページ全体でデザインを一貫させるために、Divi 5の属性機能を使用して、ポップアップの別の見出しモジュールの設定をコピーできます。直接のセクションでは、見出しモジュールの上にホバリングし、右クリックして[属性のコピー]をクリックします。

次に、作成したばかりの見出しモジュールの上にホバリングし、右クリックし、貼り付け属性を選択し、 [テキストデザイン属性を貼り付け]をクリックします。これにより、他の見出しモジュールからのスタイルが貼り付けられ、設計の一貫性が可能になります。

見出しモジュールの下に、新しいテキストモジュールを追加します。

見出しモジュールと同様に、上記のセクションのテキストモジュールを見つけて、右クリックして[属性をコピー]を選択します。そこから、新しいテキストモジュールをクリックし、貼り付け属性をタップしてから、テキストデザイン属性を貼り付けます。

テキストをテキストフィールドに追加するか、Divi AIを使用して生成することができます。

次に、テキストモジュールの下にメールオプトインモジュールを追加します。

上記のセクションには電子メールオプトインモジュールがあるため、その属性をコピーして、ポップアップに追加した新しい電子メールオプトインに貼り付けることができます。

最後のステップは、ポップアップの右列に画像を追加することです。画像モジュールを見つけて、レイアウトの2番目の列に追加します。

画像をアップロードして、画像モジュールに追加します。この時点までに、あなたのセクションはこれに似ているはずです：

4.閉じるボタンを作成します

ポップアップのデザインが整ったので、その上に新しい行を追加して、閉じるボタンアイコンを追加する必要があります。これにより、訪問者は都合の良いときにポップアップを閉じることができます。緑色のアイコンをクリックして、新しい行を追加します。

[行の挿入]ダイアログボックスが表示されたら、等しい列の下の単一の列レイアウトをクリックしてセクションに追加します。

クリックして行にアイコンモジュールを追加します。

使用可能なオプションから閉じるアイコンを選択します。アイコンリストの上の検索ボックスに「閉じる」と入力することで簡単に見つけることができます。

[設計]タブに切り替えて、次の設計設定を入力します。

• アイコンカラー： ＃5344B9
• アイコンサイズ： 36px
• アライメント：右

最後のステップは、ポップアップのコンテンツを含む2列の行の上に行を移動することです。レイヤービューを使用して、行を正しい順序に再配置します。そこにいる間、セクションをポップアップに変更します。

5.セクションの設定を調整します

インタラクションを作成する前に、ブラウザの幅に合わせてポップアップが適切にサイズになっていることを確認する必要があります。私たちはそれが完全な幅のポップアップになることを望んでいないので、いくつかの調整を行うためにデザインに移動します。サイズのドロップダウンメニューを展開して、設定を表示します。

幅フィールドに、幅に80％を入力します。次に、セクションアラインメントオプションを中心に設定します。

国境の下で、10pxの境界半径を設定します。

また、ボックスシャドウを追加して、ポップアップが残りのコンテンツで際立っています。ボックスシャドウドロップダウンメニューを見つけて展開します。ボックスシャドウの下で、プリセット1を選択します。

最後に、 [コンテンツ]タブに移動して、ポップアップセクションの背景に色を追加します。

6.インタラクションを作成してポップアップを表示します

デザインを配置すると、相互作用を設定できます。ユーザーがページに着地してから5秒後に表示するようにポップアップセクションを設定します。セクションの詳細なタブに移動し、インタラクションドロップダウンメニューを見つけます。 [インタラクションを追加]をクリックして開始します。

使用可能なオプションから[ロード]を選択します。この設定により、ポップアップがページロードに表示されます。

[インタラクションの編集]ダイアログボックスが表示されたら、次の設定を入力して[保存]をクリックします。

• 管理者ラベル：ポップアップインタラクション
• トリガーイベント：ロード
• 効果アクション：要素を表示します
• ターゲットモジュール：セクション（ポップアップ）
• 時間遅延： 5秒

次に、閉じるボタンのインタラクションを追加する必要があります。ポップアップセクションの最初の行でアイコンモジュールを選択します。 [高度なタブ]に移動し、 [インタラクションを追加]をクリックし、次の設定を入力して保存します。

• 管理者ラベル：閉じるポップアップ
• トリガーイベント：クリックします
• 効果アクション：可視性を切り替えます
• ターゲットモジュール：セクション（ポップアップ）
• 時間遅延： 0

7. Divi 5のカスタマイズ可能なレスポンシブブレークポイントでポップアップをテストして改良します

最後のステップに進む前に、Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用して、ポップアップがすべての画面サイズで見栄えを良くすることをお勧めします。 Divi 5には、選択できる7つのブレークポイントがあります。

デフォルトでは、3つのみが有効になっています。 7を持つことで、より多くのブレークポイントでポップアップをテストすることができ、画面サイズのシームレスなユーザーエクスペリエンスを確保できます。 7つすべてを許可するには、管理バーの上部にあるEllipsisメニューをクリックします。そこから、それらを切り替えてすべてのブレークポイントを有効にします。

Divi 5の新しいFlexboxレイアウトシステムを使用すると、簡単に変更を加えて、ポップアップがどのデバイスでも見栄えを良くすることができます。たとえば、Divi 5の変更列構造フィールドを使用して、小さなデバイスに表示される列の数を変更できます。このオプションは、ワンクリックでモバイル上のコンテンツを積み重ねます。

8.表示オプションを設定します

ポップアップを正しく表示するには、ポップアップセクションの可視性、ポジショニング、Zインデックスを調整する必要があります。これにより、ポップアップが必要な場所に表示され、表示されるまで隠しておき、ページの残りのコンテンツの上に表示されるようにします。

ポップアップセクションの[詳細]タブに移動します。可視性のドロップダウンメニューを見つけます。クリックして、すべてのビュー（電話、タブレット、デスクトップ）でセクションを無効にします。

次に、[ドロップダウン]メニューをクリックします。位置を固定するように設定し、オフセットの原点を選択します。最後に、99999のZインデックスを追加して、ポップアップが残りのページのコンテンツより上に表示されるようにします。

すべての設定が整ったら、ページを保存して別のタブにプレビューします。ページの読み込み後5秒後にポップアップが表示されます。また、作成した緊密なインタラクションを使用してポップアップを閉じることもできます。

高度なポップアップカスタマイズオプション

Divi 5のインタラクションを使用すると、ディスプレイ条件、効果の組み合わせ、Divi AIを使用してポップアップを生成するなどの高度な機能を使用して、ポップアップを次のレベルに引き上げることができます。カスタムCSSやJavaScriptスニペットを必要とせずに、ポップアップをより高度にすることができるいくつかの方法を見てみましょう。

表示条件

Diviの状態オプションを使用して、ユーザーの役割などのユーザー動作に基づいてポップアップを表示できます。たとえば、サインアップを促進するためにログアウトしたユーザーにのみポップアップを表示できます。

また、ページの訪問に基づいてポップアップを表示できるようにすることもできます。たとえば、特定のユーザーがすでにページにアクセスしている場合は、ポップアップを無効にする必要があります。また、ユーザーがページにアクセスしていない場合にのみ表示するように設定することもできます。これは、別のページを通してサイトを見つけて、次にホームページをクリックする訪問者に役立ちます。

効果を組み合わせます

スクロールベースのアニメーションまたはマウスモーブメント効果でポップアップを強化できます。これらは、追加のトリガーと効果を選択することにより、追加の相互作用として追加できます。相互作用を組み合わせることができ、作成できる数に制限はありません。たとえば、マウスモーブメント効果を使用して、ポップアップの画像に相互作用を簡単に適用できます。

Divi AI統合

Divi AIを使用してレイアウトを生成することにより、設計プロセスをスピードアップします。 Divi AIに、ポップアップに変換できる特定のセクションを作成するように指示できます。以下の例では、Divi AIにビジネスコーチのレイアウトを作成するように依頼しました。

効果的なポップアップのベストプラクティス

ポップアップがユーザーエクスペリエンスを改善し、結果を促進するために、これらのベストプラクティスを検討してください。

1.ユーザーフレンドリーにしてください

即時のトリガーではなく、5〜10秒の時限遅延を使用して邪魔になるポップアップを避けてください。これにより、ユーザーはプロンプトを受ける前にコンテンツに関与する時間が与えられます。ポップアップを早く起動すると気が散る可能性があり、ユーザーがポップアップを閉じて、プロモーション、ニュースレターのサインアップ、またはその他の重要なアクションを逃す可能性があります。

ユーザーのエンゲージメントが失われないように、ポップアップに時限遅延を設定します。

さらに、ユーザーがポップアップを却下し、肯定的なブラウジングエクスペリエンスを維持できるように、明確で簡単に識別可能な閉じるボタンを常に含めてください。

2。パフォーマンスを最適化します

パフォーマンスの最適化は、効果的なポップアップにとって重要です。負荷時間を速く保つために、重いアニメーションまたは大規模な最適化されていない画像を最小限に抑えます。圧縮画像を選択し、複雑な効果を制限して、特により遅い接続やモバイルデバイスのユーザーにとって、きびきびとしたシームレスなエクスペリエンスを確保します。このアプローチは、ユーザーの満足度を向上させ、より良いエンゲージメントとコンバージョン率をサポートします。

3.アクセシビリティ基準を備えたデザインポップアップを念頭に置いてください

アクセシビリティは、ポップアップをすべてのユーザーに包括的にするためのもう1つの重要な考慮事項です。画面の読者を支援するために画像に記述的なALTテキストを常に追加し、読みやすさのためにテキストと背景の間の高いコントラストを確保し、視覚障害のあるユーザーに対応するために16px以上のフォントサイズを使用してください。

これらのプラクティスは、Webアクセシビリティ基準に合わせて、ポップアップが多様なオーディエンスにアクセスできるようにするのに役立ちます。

4.すべての画面サイズをテストします

最後に、すべての画面サイズでポップアップを徹底的にテストして、すべてのデバイスで一貫したエクスペリエンスを確保します。 Divi 5のカスタマイズ可能なレスポンシブブレークポイントを活用して、ポップアップが素晴らしく、デスクトップ、タブレット、スマートフォンで意図されているように機能するようにします。

近いボタンに細心の注意を払って、必要に応じて機能することを確認し、そのテキストは小さな画面で読みやすいことを確認してください。さらに、必要に応じて間隔、サイジング、レイアウトを確認して、洗練されたプロフェッショナルな外観を提供します。

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

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

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

ダウンロード

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

Divi 5インタラクションでポップアップを作成します

Divi 5のインタラクション機能により、視覚ビルダー内で直接カスタムデザインを構築できるようにすることで、ポップアップを簡単に作成できます。トリガー、エフェクト、およびターゲットを組み合わせることで、サイトのデザインをシームレスにマッチさせながら、注意をキャプチャし、コンバージョンを駆動するポップアップを構築できます。モジュールグループやネストされた行などの他の機能を調べて、さらにダイナミックなポップアップレイアウトを作成します。

Divi 5を試してみる準備はできていますか？最新のDivi 5 Public Alphaをダウンロードし、対話を試して、以下のコメントセクションで考えを共有してください。ソーシャルメディアチャンネルであなたの作品を共有し、Divi 5の革新的な機能を使用して、より多くのチュートリアルについてはブログをご覧ください。私たちはあなたが創造するものを見るのを楽しみにしています！