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

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

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

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

畫(huà)像[1]-WordPressでElementorを使ってポップアップを設(shè)定する方法 - Photon Flux|専門(mén)家のWordPress修理サービス、グローバルなリーチ、速いレスポンス

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

セットアップ

オープニング

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

一般設(shè)定

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

プレビュー設(shè)定

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

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

    ヘアスタイル

    畫(huà)像[2] - ElementorでWordPressサイトにポップアップを設(shè)定する方法 - Photon Flux|専門(mén)家のWordPress修理サービス、グローバルなリーチ、速いレスポンス
    1. 背景タイプ背景色、畫(huà)像、グラデーションの選択
    2. ボーダータイプボーダーなし、実線ボーダー、二重線ボーダー、點(diǎn)線ボーダー、破線ボーダー、ノッチ付きボーダーから選択できます。
    3. ボーダー半徑ポップアップ?ウィンドウの各辺の角の丸みをコントロールする境界半徑を設(shè)定します。
    4. フレームの影調(diào)整ボックスのシェーディングオプション

    オーバーライト

    背景タイプ背景色、畫(huà)像、グラデーションの選択

      クローズボタン

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

      ノーマル|ホバー

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

      アドバンス

      畫(huà)像[3] - ElementorでWordPressサイトにポップアップを設(shè)定する方法 - Photon Flux|専門(mén)家のWordPress修理サービス、グローバルなリーチ、速いレスポンス

      アドバンス

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

      カスタムCSS

      カスタムCSS獨(dú)自のCSSを入力

      公開(kāi)設(shè)定によるポップアップの制御

      設(shè)定條件

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

      畫(huà)像[4] - ElementorでWordPressサイトにポップアップを設(shè)定する方法 - Photon Flux|専門(mén)家のWordPress修理サービス、グローバルなリーチ、速いレスポンス

      ポップアップが使用される場(chǎng)所を決定する條件を設(shè)定します(手動(dòng)トリガーを除く)。例えば、包含條件を追加して
      Singular > ホーム。ポップアップ?ウィンドウがサイトのホームページにのみ表示されるようにする。

      トリガーの設(shè)定

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

      畫(huà)像[5] - ElementorでWordPressサイトにポップアップを設(shè)定する方法 - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、グローバルリーチ、迅速対応
      1. ページのロード時(shí)"Yes "に設(shè)定した場(chǎng)合、ページがロードされた後、ポップアップがトリガーされるまでの待機(jī)秒數(shù)を設(shè)定します。
      2. ローリング: Yesに設(shè)定すると、ポップアップをトリガーする前にスクロールする方向(上か下か)と量を選択します。下方向へのスクロールはページの下方向へのスクロールを基準(zhǔn)とします。パーセントスクロール?アップはスクロール?アップが基本ピクセル數(shù).
      3. 要素にスクロールする場(chǎng)合: Yesに設(shè)定されている場(chǎng)合、ユーザーが要素の上にスクロールしたときにポップアップ?ウィンドウをトリガーするセレクタ名(CSS ID)を入力します。CSS IDは要素のAdvancedタブにも追加する必要があります。
      4. をクリックする。"Yes "に設(shè)定されている場(chǎng)合は、ポップアップ?ウィンドウのトリガーとなったクリック數(shù)を入力してください。
      5. 活動(dòng)後Yes "に設(shè)定されている場(chǎng)合は、ポップアップ?ウィンドウが表示されるまでの無(wú)操作時(shí)間(秒數(shù))を入力します。
      6. ページ終了の意図: "Yes "に設(shè)定すると、ユーザーのマウス操作がページ終了の意思を示したときにポップアップウィンドウをトリガーする。

      上級(jí)ルール

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

      畫(huà)像[6] - ElementorでWordPressサイトにポップアップを設(shè)定する方法 - Photon Flux|専門(mén)家のWordPress修理サービス、グローバルなリーチ、速いレスポンス
      1. Xページ閲覧後に表示: "Yes "に設(shè)定すると、ポップアップがトリガーされるまでのページビュー數(shù)を設(shè)定します。
      2. Xセッション後に表示: "Yes "に設(shè)定すると、ポップアップ?ウィンドウがトリガーされるまでのユーザー?セッション數(shù)を設(shè)定します(セッションは、ユーザーがサイトを訪問(wèn)したときに開(kāi)始し、ユーザーがブラウザを閉じたときに終了します)。
      3. 最大X回表示ポップアップウィンドウの最大表示回?cái)?shù)。カウントがopenに設(shè)定されている場(chǎng)合、ポップアップは設(shè)定された回?cái)?shù)だけ開(kāi)くことができます。カウントがオフに設(shè)定された場(chǎng)合、ポップアップはユーザーがX回目に閉じるまでのみ開(kāi)かれ、それ以降は開(kāi)かれません。この設(shè)定はローカルストレージに設(shè)定され、削除されるまで殘ります。
      4. 特定のURLから到著した場(chǎng)合: Yesに設(shè)定すると、ユーザーが特定のURLからアクセスしたときにポップアップウィンドウを表示または非表示にします(特定のURLを入力)。Regexは、URLパターンにマッチする高度なルールを設(shè)定するための上級(jí)ユーザー向けのオプションです。
      5. 到著時(shí)の表示Yesに設(shè)定すると、検索エンジン、外部リンク(特定のリンクのURLを入力)、內(nèi)部リンク(特定のリンクのURLを入力)のいずれから來(lái)たかを表示します。
      6. ログインユーザーを隠すすべてのログインユーザーまたは選択したカスタムロールのポップアップを非表示にするには、Yesに設(shè)定します。この機(jī)能はキャッシュされたサイトでは正しく動(dòng)作しない場(chǎng)合があります。
      7. デバイスに表示デスクトップ、タブレット、モバイルデバイスで表示する場(chǎng)合は「はい」に設(shè)定します。

      注:ポップアップ?ウィンドウは、ページの再読み込みや再入力なしに複數(shù)回表示することはできません。

      手動(dòng)トリガーによるポップアップの制御

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

      • リンクされた要素からダイナミック > 操作 > ポップアップウィンドウをクリックしてください。をクリックしてください。ポップアップウィンドウ選ぶポップアップウィンドウを開(kāi)くもしかしたらポップアップ?ウィンドウを閉じる。ポップアップ?ウィンドウを閉じることを選択すると、"表示されなくなった"オプションが利用可能になる。
      • Elementorのフォームから"投稿後のアクション" > "アクションの追加" > "ポップアップを開(kāi)く" または "ポップアップを閉じる"
      • カスタムセレクタから:どの要素にも、手動(dòng)ポップアップトリガーとして使用できるセレクタを設(shè)定することができます。要素を編集して上級(jí) > CSSクラス(またはCSS ID)を選択し、要素にクラス名(先頭のドットなし)またはID名(先頭の#なし)を割り當(dāng)てます。のポップアップ?ウィンドウで前提條件で、ユニークなセレクタを持つ要素を含むページが選択されている(例えば條件 > 含む > 単數(shù) > ページ > あなたのページタイトル).ポップアップは、ユーザがページを訪問(wèn)して要素をクリックしたときにトリガされます。これは、テーマのナビゲーションメニューアイテム、テキストエディタウィジェットのコンテンツ、Elementor以外の要素やスクリプトなどからポップアップを開(kāi)くのに便利です。
      畫(huà)像[7] - ElementorでWordPressサイトにポップアップを設(shè)定する方法 - Photon Flux|専門(mén)家のWordPress修理サービス、グローバルなリーチ、速いレスポンス

      お問(wèn)い合わせ
      チュートリアルが読めない?無(wú)料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ!
      カスタマーサービス WeChat
      カスタマーサービス WeChat
      電話:020-2206-9892
      QQ咨詢:1025174874
      Eメール:info@361sale.com
      勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み
      ? 複製に関する聲明
      この記事はハリーが執(zhí)筆しました。
      終わり
      好きなら応援してください。
      クドス0 分かち合う
      おすすめ
      解説 ソファ購(gòu)入

      コメントを投稿するにはログインしてください

        コメントなし