デザインと機能をしっかり決めて…設定は多少は手間だけど、しっかり使えるElementorのアドオンです！
JetPopupは単体で利用できるは有料のアドオンなので、なんとも購入の判断がしにくい。機能的にはElementor Proとほどんど同じなのだが、アドバンテージとしては、実用的なデザインがそろっていてそれがすぐに利用できる。
デザインは全部で123種。機能としては下記の11カテゴリーに分かれている。
- Contact Form
- Content Locker
- Cookie Policy
- Countdown
- Discount
- Holiday
- Info Card
- Join Us
- Privacy Policy
- Subscribe
- Yes/No
Elementor Pro本体に比較するとデザインのバリエーションでは多少劣るが、利用する場面によってデザインが探せる。英語ユーザーであれば、そのまま利用できるの。すごくいいんではと思う…まあ、こちとらゴリゴリの日本語ユーザーなので、あまりメリットはない。
1.とりあえずは、インストール
うーん。購入しないと利用できません。あたりまえ。
2.デザインを選ぶ
まずは、デザインを作っておく必要がある。問い合わせフォーム（Contact Form）、割引セール（Discount）、登録（Join Us／Subscribe）などいろんな事例に合わせてデザインが用意されているので適切と思われるものを選ぶ。
3.ポップアップモーダルの表示トリガーを設定する
ここでは編集・デザインには触れない。あしからず。
ポップアップモーダルをどんな場合に表示させるかは、左下の歯車をクリックして「Settings」を編集をする。
4.設定部分は多いけど、機能的全方位カバーのポップアップモーダルオプション
左のElementorメニューの「Settings」でポップアップモーダルの表示トリガーを設定する。
どのような設定ができるかは下記にまとめる。
Animation
ポップアップモーダル表示時のアニメーションの設定。見慣れた単語の羅列…詳細に関しては公式を見てください。
- Fade
- ZoomIn
- ZoomOut
- Rotate
- MoveUp
- Horizontal Flip
- Vertical Flip
- BounceIn
- BounceOut
- SlideInUp
- SlideInRight
- SlideInDown
- SlideInLeft
Open event
ポップアップモーダル表示のキモ。どのタイミングでポップアップモーダルを表示するかを設定する。
- Not Selected
特に何も設定しない。クリックで表示する場合はこれを選択。 - On page load(s)
ページが表示された段階でポップアップモーダルを表示したい場合はコレ。表示遅延の設定が可能。 - Inactivity time after(s)
ブラウザの操作がされていない状態で一定時間が経過したら表示する。 - Page Scrolled(%)
ページがスクロールされたら表示する。単位はパーセントで入力する。 - Try exit
タブの切り替え時、ページを閉じようとしたときに表示する。 - On Date
特定日を設定して表示する。 - On Time
表示の開始時刻、終了時刻を設定する。 - Custom Selector Click
特定のセレクターがクリックされたら表示する。
Disable Page Scrolling
ポップアップモーダル表示中に、ページをスクロールをさせるかさせないかを設定。
Show once
ポップアップモーダルの表示回数をコントロール。再表示する場合は下記のオプションを選択する。
None／Minute／10 Minutes／30 Minutes／1 Hour／3 Hours／6 Hours／12 Hours／Day／3 Days／Week／Month／
他のポップアップモーダルと競合すると、ブラウザがクラッシュしたりポップアップモーダルが表示されなくなる場合がある。そういった場合に調整するためのオプションらしい…あまり詳しくなくてスミマセン。
Display Conditions
ちなみに新規でポップアップモーダルを作成すると下記のような選択画面が表示され、どの場所にポップアップモーダルを設定するかを選択する。
