ElementorでWordPressサイトにポップアップを設定する方法

ポップアップは、特定の瞬間、または特定のトリガーや条件下でポップアップし、ページをカバーするコールトゥアクションモードのウィンドウです。ポップアップは主に、ユーザーがアクションを起こした後にユーザーの注意を引きます。

まずテンプレート > ポップアップウィンドウ.ポップアップのレイアウト、条件、ルール、スタイルをコントロールし、ポップアップのコンテンツをデザインします。

銘記パネル下部のツールバーのEjectをクリックします。ギアのセットアップアイコンをクリックしてポップアップ設定を編集します。

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

セットアップ

オープニング

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

一般設定

1. キャプション: ポップアップウィンドウのタイトルを入力します。このタイトルはバックエンドにのみ表示され、ユーザーには表示されません。
2. 情勢: ドラフト、審査待ち、非公開、投稿

プレビュー設定

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

銘記ダイナミックコンテンツを選択した後、ページをリロードする必要があります。

ヘアスタイル

ポップアップウィンドウ

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

オーバーライト

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

クローズボタン

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

ノーマル｜ホバー

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

アドバンス

アドバンス

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

カスタムCSS

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

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

設定条件

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

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

トリガーの設定

フリップフロップはキャンペーンをポップアップさせるユーザーアクションです。ポップアップの原因となる各オプションについて、" を選択します。で御座います「または詰り".

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

上級ルール

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

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

注：ポップアップ・ウィンドウは、ページの再読み込みや再入力なしに複数回表示することはできません。

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

ポップアップは手動でトリガーできます。動的リンクはポップアップウィンドウを開いたり閉じたりするためにポップアップアクションを使うことができます。フォームはポストサブミットのアクションオプションを使ってポップアップウィンドウを開いたり閉じたりできます。一意のセレクタ（クラス、ID、またはデータ要素）を使用して、クリックされたときに任意の要素が手動でポップアップをトリガできます。

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

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み