フライインポップアップが効果的なのは、ユーザーの注意を引きながらも、比較的控えめに表示されるからです。ユーザーの体験を完全には妨げず、しかもユーザーは興味を引きそうなものが用意されていることを知ることができます。今回の例では、ユーザーが記事の最後に到達するのを待って、右下に別の記事を読むよう促すアラートをポップアップ表示します。このポップアップはデスクトップとタブレットでは表示しますが、モバイルデバイスでは表示しません。
ポップアップの作成
- 「ダッシュボード」>「テンプレート」>「Popups」>「新規追加」と進みます。
- テンプレートに名前を付け、「テンプレートを作成」をクリックします。
- ライブラリからテンプレートを選ぶか、自分でデザインを作成します。
![Elementor - ポップアップ:フライイン1](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:フライイン1.jpg)
ポップアップの設定
設定
- カスタムの幅と高さを設定。
- 水平を「センター」、垂直を「センター」に設定。
- Overlay : 非表示
- ボタンを表示 : 表示
- 開始アニメーションを「Slide in Up」に設定。
![Elementor - ポップアップ:フライイン2](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:フライイン2.jpg)
スタイル
必要に応じて、テキスト、背景画像、ボーダー、スタイリングなどを変更します。
セクションコンテンツの調整
必要に応じてコンテンツを変更する。見出しウィジェットとポストウィジェットを使って、任意のカテゴリから1つの記事を表示しました。
![Elementor - ポップアップ:フライイン3](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:フライイン3.jpg)
公開設定
Conditions(条件): ADD CONDITION(条件を追加): Include(含める): Singular > All Singular
![Elementor - ポップアップ:フライイン4](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:フライイン4.jpg)
Triggers(トリガー): On Scroll :「はい」、向き :「Down」、Within(%): 80%
![Elementor - ポップアップ:フライイン5](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:フライイン5.jpg)
Advanced Rules(高度なルール):Show on device : 「はい」:「デスクトップ」と「タブレット」を選択すると、デスクトップおよびタブレット端末でのみ表示されます。
![Elementor - ポップアップ:フライイン6.](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:フライイン6..jpg)
公式ページ:Popups: Fly-Ins