Hello Bar(ハローバー)は人気のあるポップアップで、主に販売促進のアナウンスに使用されます。この例では、Hello BarはShopページにのみ表示され、オーバーレイはなく、シンプルな閉じるボタンが付いていることを想定しています。さらに、ユーザーがページの60%をスクロールするまで待ってからポップアップを表示したいと思います。その時には、ユーザーは十分に興味を持っており、当社のオファーを検討する準備ができていると思われます。
ポップアップを作成する
- 「ダッシュボード」 > 「テンプレート」 > 「Popups」 > 「新規追加」と進みます。
- テンプレートに名前を付け、「テンプレートを作成」をクリックします。
- ライブラリでは、カテゴリのドロップダウンを開いてHello Barを選択するか、独自のデザインを作成します。
![Elementor - ポップアップ:ハローバー1](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ハローバー1.jpg)
ポップアップの設定
設定
- 水平方向の位置を「センター」、垂直方向の位置を「トップ」に設定します。
- Overlay(オーバーレイ): 非表示
- ボタンを閉じる : 表示
![Elementor - ポップアップ:ハローバー2](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ハローバー2.jpg)
スタイル
テキスト、背景画像、ボタン、スタイリングを必要に応じて変更します。
公開設定
Conditions(条件): Include(含める):WooCommerce > Shop Page(ショップページ)
![Elementor - ポップアップ:ハローバー3](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ハローバー3.jpg)
Triggers(トリガー): On Scroll(スクロール時): はい 、 向き : Down 、 within(%): 60%
![Elementor - ポップアップ:ハローバー4](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ハローバー4.jpg)
公式ページ:Popups: Hello Bar