![](https://cxg-design.jp/wp-content/uploads/2024/05/popupbanner_thumb.png)
Popup Makerで、ページを開いたらバナーを表示する
バナーは、スライダーやカルーセル、サイドバーなど様々な場所に設置されます。今回は、Popup Makerで特定のページを開いたらバナーが表示する設定を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/72c86a2623d5391d15d5d276aa8a957a.png)
出典 : Popup Maker
今回のDEMOは、ページを開いたら、SALEバナーが表示されます。
リンクを設定して、SALEページに移動する想定ですが、今回はクリックしてもページは移動しません。
POP UP作成
![](https://cxg-design.jp/wp-content/uploads/2024/05/3c8399817a04c5a4177e53faea147add.png)
まず、表示するバナーの設定をします。Popup Maker>Create Popupをクリックして、新規ポップアップを作成します。タイトルは入力せず、テキスト欄にバナー画像をフルサイズ(今回は1600×900px)で挿入します。
Triggers
![](https://cxg-design.jp/wp-content/uploads/2024/05/2077798c0f626f371842034c898aa3df.png)
Add New Triggerをクリックすると、モダールウィンドウが表示されます。まず、ページを開く度、毎回表示したいので、Prevent popup~のチェックを外します。セレクトボックスからTime Delay / Auto Openを選択し、Addをクリックします。Delayはデフォルトのまま500msに設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/3b6110721ec33478c4fe8261f38f143e.png)
Delayはデフォルトのまま500msに設定
Cookie設定
DEMOでは、毎回ページを開いた人にバナーを見せたいので、Prevent popup~のチェックは外しています。実際には、ページを訪れた人に何回も表示されないようにPrevent popup~のチェックは入れておきます。
Targeting
![](https://cxg-design.jp/wp-content/uploads/2024/05/7c5a77cf2d09c42395b592eeb77ca573.png)
表示するページを指定します。Targetingのセレクトボックスから表示したいページを選びます。今回は、DEMOのPOPUP BANNERを選択します。
Popup Makerの設定が終わるまで下書き保存
Triggersを設定すると、デフォルトでは全てのページが表示されるときにポップアップが表示されます。Targetingを指定することで、表示ページが特定されます。公開中のページで表示されないように、Popup Makerの設定が終わるまで、下書き保存にしましょう。
Display Presents
![](https://cxg-design.jp/wp-content/uploads/2024/05/098e4c5cb7bc032ac23769f977429031.png)
Center Popupを選択します。
Size
![](https://cxg-design.jp/wp-content/uploads/2024/05/04966435335ce46bdffbd84fd50b3e42.png)
SizeをMedium-60%、Max Widthを90%に設定します。
Animation
![](https://cxg-design.jp/wp-content/uploads/2024/05/4737ec6a6d51987751e1107cee47a8ee.png)
Animation TypeをFade、Animation Speedを350msに設定します。
Position
![](https://cxg-design.jp/wp-content/uploads/2024/05/f259a96f9af4606d24e05441ac86f6f4.png)
Fixed Positioningにチェックを入れます。
Alternate Methods
![](https://cxg-design.jp/wp-content/uploads/2024/05/5a39b48b320169fe0f6fe92119ed39ed.png)
Close>Alternate Methods をクリックします。Click Overlay to Closeにチェックを入れて、オーバーレイをクリックしても、モダールウィンドウが閉じれるようにします。
Popup Themes
![](https://cxg-design.jp/wp-content/uploads/2024/05/8f81516931c02ea51d785ea469b973ff.png)
Popup Maker>Popup Themesをクリックします。Light Boxを複製し、Light Box SALEと名前を変更し、スタイルを変更していきます。
Overlay
![](https://cxg-design.jp/wp-content/uploads/2024/05/ccbbe8ee061abe394be6915c83b3c81b.png)
Opacityを50%に設定します。
Container
![](https://cxg-design.jp/wp-content/uploads/2024/05/14167a75326571ac164cea696d500ba8.png)
Paddingを0px、Border Radiusを0pxに設定します。Background>Opacityを0に設定します。BorderはNoneに設定します。Drop Shadow>Opacityを0に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/f72d7c8ef39a4b23ed77d9bb632f87d0.png)
Background>Opacityを0に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/cc5dc706bcc8a17bcb08079bd0bf95e0.png)
BorderはNoneに設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/d265ede834a4f1ff44b2467ce54be251.png)
Drop Shadow>Opacityを0に設定
Close
![](https://cxg-design.jp/wp-content/uploads/2024/05/0aa3af93f341c702f5af9d23702aac40.png)
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に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/ed136e1dd4a64b1cf1aace6aca530c01.png)
Sizeは全て0に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/7bdd4990f0a821807f1036717d01ace7.png)
Background>Opacityを0に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/1f27590183708d684459622b0fb7714c.png)
Font>Font Size、Line Heightを24pxに設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/379734d67422d3fb4d22c51db808d622.png)
Borderは、Noneに設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/eb5fe0276ddbebdc4aeb054a08187960.png)
Drop Shadow>Opacityを0に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/eeb34c70efdfcdec4503877c0c57d435.png)
Text Shadowは全て0に設定
Appearance
![](https://cxg-design.jp/wp-content/uploads/2024/05/bb10aae672fc10c2c8aab756a4c1b8a8.png)
All Popupsからポップアップを選択し、Display>Appearance>Popup Themeを作成したテーマLight Box SALEにします。
以上で今回の説明は終了です。今回の設定にすれば、バナーの縦横比関係なく設置できます。また、複製してバナーを変更し、設置場所を指定しなおせば、簡単に新しいポップアップが作成できます。