Popup Makerで、ページを開いたらバナーを表示する
バナーは、スライダーやカルーセル、サイドバーなど様々な場所に設置されます。今回は、Popup Makerで特定のページを開いたらバナーが表示する設定を紹介します。
出典 : Popup Maker
今回のDEMOは、ページを開いたら、SALEバナーが表示されます。
リンクを設定して、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に設定します。
Sizeは全て0に設定
Background>Opacityを0に設定
Font>Font Size、Line Heightを24pxに設定
Borderは、Noneに設定
Drop Shadow>Opacityを0に設定
Text Shadowは全て0に設定
Appearance
All Popupsからポップアップを選択し、Display>Appearance>Popup Themeを作成したテーマLight Box SALEにします。
以上で今回の説明は終了です。今回の設定にすれば、バナーの縦横比関係なく設置できます。また、複製してバナーを変更し、設置場所を指定しなおせば、簡単に新しいポップアップが作成できます。