ボトムバーは、お知らせやオプションなど、さまざまな理由で使用することができます。ポップアップボトムバーのもう一つの一般的な使い方は、EUのCookie Consent法に準拠することです。この例では、すぐにCookie Consentバナーを作成します。このバーはいくつかの要件を満たします。
- サイト内の任意のページに表示する。(公開設定 > 条件)
- ページが読み込まれたときにすぐに表示します。(公開設定 > トリガー)
- Overlayを表示して、下にあるサイトを隠します。(Popup設定 > 設定)
- 下にあるサイトのスクロールを防止する。(Popup設定 > 高度な設定)
- ユーザーがOKボタンをクリックしたときにのみ閉じ、OverlayをクリックしたりESCを押したりしても閉じないようにします。(Popup設定 > 高度な設定)
- ポップアップを一度だけ表示することで、その後のページビューでユーザーが継続的に対処する必要がありません。(公開設定 > 高度なルール)
ヒント
Popup設定を調整するには、パネル下部のツールバーにあるPopup設定の歯車アイコンをクリックします。公開設定を調整するには、「公開/更新」ボタンの横にある矢印をクリックし、「Conditions(条件設定)」、「Triggers(トリガー)」、「Advanced Rules(高度なルール)」のいずれかを選択します。
ポップアップを作成する
- 「ダッシュボード」 > 「テンプレート」 > 「Popups」 > 「新規追加」と進みます。
- テンプレートに名前を付け、「テンプレートを作成」をクリックします。
- ライブラリからテンプレートを選ぶか、自分でデザインを作成する。
![Elementor _ ポップアップ:ボトムバー1](https://estival.jp/wp-content/uploads/Elementor-_-ポップアップ:ボトムバー1.jpg)
ポップアップの設定
設定
- 水平方向の位置を「センター」、垂直方向の位置を「ボトム」に設定します。
- Overlay(オーバーレイ): 表示
- ボタンを閉じる : 非表示
![Elementor - ポップアップ:ボトムバー2](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ボトムバー2-1.jpg)
スタイル
自由にスタイルを設定。
高度な設定
- Prevent Closing on Overlay(オーバーレイで閉じないようにする): はい
- Prevent Closing on ESC Key(ESCキーで閉じないようにする): はい
- Disable Page Scrolling(ページのスクロールを無効にする): はい
![Elementor - ポップアップ:ボトムバー3](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ボトムバー3.jpg)
公開設定
Conditions(条件): Include(含める):Entire Site(サイト全体)
![Elementor - ポップアップ:ボトムバー4](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ボトムバー4.jpg)
Triggers(トリガー): On Page Load(ページの読み込み時):はい : within(sec)0(0秒以内)
![Elementor - ポップアップ:ボトムバー5](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ボトムバー5.jpg)
Advanced Rules(高度なルール): はい : Show Up To X Times(X回まで表示):1
![Elementor - ポップアップ:ボトムバー6](https://estival.jp/wp-content/uploads/Elementor-ポップアップ:ボトムバー6.jpg)
公式ページ:Popups: Bottom Bar