Popup Makerで、ページを開いたらバナーを表示する

2024.05.07

Plugin

バナーは、スライダーやカルーセル、サイドバーなど様々な場所に設置されます。今回は、Popup Makerで特定のページを開いたらバナーが表示する設定を紹介します。

出典 : Popup Maker

今回のDEMOは、ページを開いたら、SALEバナーが表示されます。

POPUP BANNER

POPUP

リンクを設定して、SALEページに移動する想定ですが、今回はクリックしてもページは移動しません。

POP UP作成

まず、表示するバナーの設定をします。Popup Maker＞Create Popupをクリックして、新規ポップアップを作成します。タイトルは入力せず、テキスト欄にバナー画像をフルサイズ（今回は1600×900px）で挿入します。

Triggers

Add New Triggerをクリックすると、モダールウィンドウが表示されます。まず、ページを開く度、毎回表示したいので、Prevent popup~のチェックを外します。セレクトボックスからTime Delay / Auto Openを選択し、Addをクリックします。Delayはデフォルトのまま500msに設定します。

Delayはデフォルトのまま500msに設定

Cookie設定

DEMOでは、毎回ページを開いた人にバナーを見せたいので、Prevent popup~のチェックは外しています。実際には、ページを訪れた人に何回も表示されないようにPrevent popup~のチェックは入れておきます。

Targeting

表示するページを指定します。Targetingのセレクトボックスから表示したいページを選びます。今回は、DEMOのPOPUP BANNERを選択します。

Popup Makerの設定が終わるまで下書き保存

Triggersを設定すると、デフォルトでは全てのページが表示されるときにポップアップが表示されます。Targetingを指定することで、表示ページが特定されます。公開中のページで表示されないように、Popup Makerの設定が終わるまで、下書き保存にしましょう。

Display Presents

Center Popupを選択します。

Size

SizeをMedium-60%、Max Widthを90%に設定します。

Animation

Animation TypeをFade、Animation Speedを350msに設定します。

Position

Fixed Positioningにチェックを入れます。

Alternate Methods

Close＞Alternate Methods をクリックします。Click Overlay to Closeにチェックを入れて、オーバーレイをクリックしても、モダールウィンドウが閉じれるようにします。

Popup Themes

Popup Maker＞Popup Themesをクリックします。Light Boxを複製し、Light Box SALEと名前を変更し、スタイルを変更していきます。

Overlay

Opacityを50%に設定します。

Container

Paddingを0px、Border Radiusを0pxに設定します。Background＞Opacityを0に設定します。BorderはNoneに設定します。Drop Shadow＞Opacityを0に設定します。

Background＞Opacityを0に設定

BorderはNoneに設定

Drop Shadow＞Opacityを0に設定

Close

Close Button TextをCLOSEにします。LocationをTop Rightに設定し、Top-31px、Right0pxに設定します。Sizeは全て0に設定します。Background＞Opacityを0に設定します。Font＞Font Size、Line Heightを24pxに設定します。Borderは、Noneに設定します。Drop Shadow＞Opacityを0に設定します。Text Shadowは全て0に設定します。