Elementorのポップアップウィンドウ機能は、Elementorエディタを使ってウェブページを構築する際にも便利です。この機能は、ユーザーの注目を集めたり、重要な情報や特別オファーなどを提供したりするのに役立ちます。Elementorがどのようにポップアップウィンドウを作成し、ポップアップウィンドウを設定するか見てみましょう。

ポップアップ・ウィンドウの作成

まず、ポップアップを作成する必要があります。以下の手順に従って、最初のポップアップを設定することができます。このガイドに従って押しボタン式マニュアルポップアップ・ウィンドウを表示する。

1. ダッシュボード > テンプレート > ポップアップ > 新規追加
2. テンプレートに名前を付け、"テンプレートの作成"
3. ライブラリからテンプレートを選ぶか、独自のデザインを作成してください！
4. をクリックしてください。ポスト「をクリックします。保存して閉じる"
5. Elementorで新規ページを開く (CTRL / CMD + E, 新規ページ)
6. ボタンウィジェットをドラッグする
7. レイアウト」で「リンク" > "ダイナミック" > "アクション" > "ポップアップ"
8. クリックポップアップウィンドウ>ポップアップウィンドウを開く> 作成したポップアップウィンドウを選択する
9. ライブページに移動し、ボタンをクリックすると、ポップアップウィンドウが表示されます。

ボタンをクリックしたときに表示されるこのタイプの基本的なポップアップには、条件やトリガー、高度なルールは必要ありません。

これは基本的な設定です。Elementorポップアップの使い方を知るために試してみてください。

ポップアップウィンドウの設定

ポップアップウィンドウは、特定の瞬間、または特定のトリガーや条件下でポップアップし、ページをカバーするコールトゥアクションのモーダルウィンドウです。ポップアップは、ユーザーがアクションを起こした後、ユーザーの注意を集中させるように設計されています。

まずテンプレート > ポップアップウィンドウ.ポップアップウィンドウのレイアウト、条件、ルール、スタイルをコントロールし、ポップアップウィンドウのコンテンツをデザインします。銘記ポップアップの設定を編集するには、パネル下部のツールバーにあるポップアップ設定の歯車アイコンをクリックします。

ポップアップ・ウィンドウのデザイン

セットアップ

オープニング

1. 幅ポップアップ・ウィンドウの正確な幅を設定するには、pxまたはvhを使用します。
2. 高さポップアップ・ウィンドウの正確な高さを設定するには、pxまたはvhを使用してください。フルスクリーンのポップアップウィンドウを作成するには、幅と高さを100vhにします。
3. くらいポップアップ・ウィンドウの水平位置を左、中央、右から選択します。
4. 垂直ポップアップ・ウィンドウの縦方向の位置を、上部、中央、下部から選択します。
5. オーバーレイ背景オーバーレイの表示／非表示
6. クローズボタン閉じるボタンの表示・非表示を選択
7. ボタンが表示されるまで何秒かかりますか？(表示オフボタンが選択されている場合）：オフボタンを表示するまでの待機秒数を選択します。
8. エントランス・アニメーションポップアップ・ウィンドウの入力アニメーションをドロップダウン・オプションから選択します。任意のアニメーション効果を選択して、効果をプレビューします。
9. 終了アニメーションポップアップ・ウィンドウの終了アニメーションをドロップダウンから選択します。任意のアニメーション効果を選択して、効果をプレビューします。
10. アニメーション上映時間アニメーションの時間をミリ秒単位で設定します。

一般設定

1. キャプション: ポップアップウィンドウのタイトルを入力します。このタイトルはバックエンドにのみ表示され、ユーザーには表示されません。
2. 情勢草案、保留、非公開、発行

プレビュー設定

ダイナミックコンテンツのプレビューアーカイブ、ページ、投稿、メディア、404ページから選択できます。

注：選択内容を表示するには、動的コンテンツを選択した後、ページをリロードする必要があります。

ヘアスタイル

ポップアップウィンドウ

1. 背景タイプ背景色、画像、グラデーションの選択
2. ボーダータイプボーダーの種類を、なし、実線、二重、点線、破線、ノッチから選択します。
3. ボーダー半径ポップアップ・ウィンドウの各辺の角の丸みをコントロールする境界半径を設定します。
4. フレームの影調整ボックスのシェーディングオプション

オーバーライト

背景タイプ背景色、画像、グラデーションの選択

クローズボタン

1. プレースメント閉じるボタンをポップアップ・ウィンドウの内側に表示するか外側に表示するかを選択します。
2. 垂直位置スライダーで閉じるボタンの垂直位置を選択します。
3. 水平位置スライダーで閉じるボタンの水平位置を選択します。

ノーマル｜ホバー

1. カラー閉じる」ボタンの色の選択。
2. 背景色閉じる "ボタンの背景色を、"通常 "と "ホバー "の状態で選択します。
3. サイズ 閉じるボタンのサイズを設定する

高い

高い

1. 閉じるボタンを表示する時間間隔（秒）秒数を入力します。閉じるボタンはこの時間が経過した後にのみ表示されます。
2. オートオフ時間（ms）ポップアップ・ウィンドウを自動的に閉じるまでの待機時間（ミリ秒）を入力します。自動クローズを無効にするには空白のままにします。
3. オーバーレイの閉鎖を防ぐYesを選択すると、オーバーレイをクリックしてポップアップ・ウィンドウを閉じることができなくなります。
4. ESCキーを押して閉じるのを防ぐはい」を選択すると、ESCキーを押してポップアップ・ウィンドウを閉じることができなくなります。
5. ページスクロールを無効にするポップアップウィンドウの後ろに表示されるページをスクロールできないようにするには、「はい」を選択します。
6. 複数のポップアップを避けるユーザーが訪問しているページに別のポップアップが表示されている場合は、Yesを選択してこのポップアップを非表示にします。
7. セレクターで開く手動でポップアップをトリガーするセレクタ（CSS ID、クラス、またはデータ要素）のリストを入力します。
8. マージンマージンの調整
9. パディングポップアップウィンドウのパディングを調整します。
10. CSSクラスカスタムクラスをドットなしで追加する。

カスタムCSS

カスタムCSS独自のCSSを入力

公開設定によるポップアップの制御

設定条件

前提条件サイトのどのページにポップアップを表示するかを設定できます。

ポップアップが使用される場所を決定するための条件を設定します（手動トリガーを除く）。例えば、"Contains" 条件を追加して"Singular">"Home"をクリックすると、ポップアップ・ウィンドウがサイトのトップページにのみ表示されます。

トリガーの設定

フリップフロップはキャンペーンをポップアップ表示させるユーザーアクションです。ポップアップを表示させる各オプションの「はい」または「いいえ」を選択します。

1. ページのロード時"Yes "に設定した場合、ページがロードされたときにポップアップが表示されるまでの待機秒数を設定します。
2. ローリング"Yes "に設定されている場合、ポップアップをトリガーする前にスクロールの方向（上または下）と量を選択します。下方向へのスクロールは、ページがパーセント上方向へのスクロールは、上方向へのスクロールに基づいている。ピクセル数.
3. 要素へのスクロール: Yesに設定されている場合、ユーザーがスクロールしたときにポップアップ・ウィンドウを表示するセレクタの名前（CSS ID）を入力します。CSS IDは要素のAdvancedタブにも追加する必要があります。
4. をクリックする。"Yes "に設定されている場合は、ポップアップ・ウィンドウのトリガーとなるクリック数を入力してください。
5. 活動後"Yes "に設定した場合、ポップアップ・ウィンドウが表示されるまでの無操作時間（秒数）を入力します。
6. ページ終了の意図: "Yes "に設定すると、ユーザーのマウス操作がページ終了の意思を示したときにポップアップ・ウィンドウを表示する。

上級ルール

上級ルールポップアップを生成するために満たさなければならない追加の要件を指定します。

1. ページビュー数後に表示Yesに設定した場合、ポップアップウィンドウを表示するまでのページビュー数を設定します。
2. 何セッション後に表示: "Yes "に設定すると、ポップアップ・ウィンドウがトリガーされるまでのユーザー・セッション数を設定します（セッションは、ユーザーがサイトを訪問したときに開始し、ユーザーがブラウザを閉じたときに終了します）。
3. 何回までポップアップ・ウィンドウの最大表示回数。Count "が "On Open "に設定されている場合、ポップアップは設定された回数だけ開くことができます。Count "が "Closed "に設定されている場合、ポップアップはユーザがX回目に閉じるまで開き、それ以降は開きません。この設定はローカルストレージに設定され、削除されるまで残ります。
4. 特定のURLから到着した場合Yesに設定すると、ユーザーが特定のURLからアクセスしたときにポップアップ・ウィンドウを表示または非表示にします（特定のURLを入力してください）。 Regexは、URLパターンにマッチするための高度なルールを設定する上級ユーザー向けのオプションです。
5. 到着時の表示Yesに設定すると、ユーザーが検索エンジン、外部リンク（特定のリンクのURLを入力）、内部リンク（特定のリンクのURLを入力）のいずれからアクセスしたかを表示します。
6. ログインユーザーから隠すすべてのログイン・ユーザーまたは選択したカスタム・ロールのポップアップを非表示にするには、Yesに設定してください。この機能はキャッシュされたサイトでは正しく動作しない場合があります！
7. デバイスに表示デスクトップ、タブレット、モバイルデバイスで表示する場合は「はい」に設定します。

注目してください：ページが再読み込みまたは再入力されない場合、ポップアップ・ウィンドウは2回以上表示されない。

手動トリガーによるポップアップの制御

ポップアップは手動でトリガーできます。動的リンクはポップアップアクションを使用してポップアップのオン/オフを切り替えることができ、フォームは送信時アクションオプションを使用してポップアップのオン/オフを切り替えることができます。どの要素も、その要素がクリックされたときに手動でポップアップをトリガーする一意のセレクタ（クラス、ID、またはデータ要素）を持つことができます。

• リンクされた要素からダイナミック > アクション > ポップアップをクリックしてください。をクリックしてください。"ポップアップウィンドウ"選ぶ「ポップアップウィンドウを開くもしかしたら「ポップアップを閉じる.ポップアップウィンドウを閉じる場合は、".表示されなくなった"オプションが利用可能になる。
• Elementorのフォームから投稿後のアクション > アクションの追加 > ポップアップウィンドウを開く、またはポップアップウィンドウを閉じる
• カスタムセレクタから：どの要素にも、手動ポップアップトリガーとして使用できるセレクタを設定することができます。要素を編集して上級 > CSSクラス(またはCSS ID)、要素のクラス名(先頭のドットを除く)またはID名(先頭の#を除く)を指定します。のポップアップ・ウィンドウで条件要素を含むページが一意のセレクタ（例えば条件 > インクルード > 単数 > ページ > あなたのページタイトル).ポップアップは、ユーザがページを訪問し、要素をクリックしたときにトリガされます。これは、テーマのナビゲーションメニューアイテム、テキストエディタウィジェットのコンテンツ、Elementor以外の要素やスクリプトなどからポップアップを開くのに便利です。

カスタムセレクタからポップアップをトリガーする場合、要素は「リンク」である必要はないことに注意してください。通常はクリックできない要素（プレーンテキストなど）をクリックしてポップアップを生成することもできます。また、このオプションを使用する場合、トリガーと高度なルールは無視されることに注意してください。