Elementor Pro 『ポップアップ』の作り方と基本設定
- 2022年4月23日
- 2021年3月1日
- Elementorの使い方
- ポップアップ
ポップアップとは、サイト上に何か目立たせたいもの（例えば広告や注意書きなど）を表示させるウィンドウです。
こちらの記事ではElementor Proのポップアップ機能を使ってポップアップを自分で作る方法、サイトにロードする方法を説明します。
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
『ポップアップ』の作り方と基本設定を動画でご覧になりたい方はこちらからどうぞ！
ポップアップの編集画面への行き方
画面左側のバーの中の『テンプレート』にカーソルを当て、出てきたボックスの中の『Popups』をクリックします。
すると、この様な画面表示になります。
ポップアップを作成する方法
『新規POPUPを追加』をクリックします。
すると、この様な表示画面になりますので
- 作業を行いたいテンプレートの種類を選択の欄で『Popup』が選択されていることを確認します。
- テンプレートに名前を付けます。（任意）
後で名前を変更することは可能です。
※こちらのサンプルでは『ポップアップテスト』という名前にしました。 - 『テンプレートを作成』をクリックします。
するとこの様にデフォルトで既存のポップアップテンプテート一覧が表示されます。
ポップアップを自作するのでテンプレートライブラリの画面右上の×をクリックします。
すると上記のポップアップを作成する画面に切り替わります。
通常のElementorと同じ操作、編集画面でポップアップを作成することができます。
自作ポップアップ作成例
画面中央の赤い丸をクリックします。
カラム構造を選択します。
※今回はサンプルとして２分割のカラムを使用します。
この様な表示になります。
サンプルとして『見出しウィジェット』『テキストエディターウィジェット』『画像ウィジェット』をカラムに挿入しました。
この様にそれぞれのウィジェットを編集し、新しいオリジナルのポップアップを作成しました。
見出し・テキストエディター・画像それぞれのウィジェットの操作の仕方については以下の記事を参考にしてください。
また、他のウィジェットを組み合わせて自分仕様のポップアップを構築することが可能です。
さらに丸いポップアップを作成することも可能です。
TOFUラボのメンバーの藤原さんが実際に作成されたサイトで使用している丸形のポップアップの作り方を説明した実演動画もありますのでぜひ参考にしてください！
ポップアップの表示設定をする
ポップアップの設定をするにはまず画面左下のギアのマークをクリックします。
すると画面左側のタブの表示がこの様に変わります。
設定タブ・レイアウトの設定
幅の設定
『幅』ではカーソルを横スライド、またはその横のボックスに数字を直接入力するか、▲▼のボタンでポップアップ全体の横幅が調整できます。
※デフォルトでは640の値に設定されています。
この様に画像の幅を縮めたり、または広げたりすることができます。
高さの設定
『高さ』は、カラムの縦の幅を編集することができます。
- Fit To Content
- 画面幅に合わせる
- カスタム
の３つのオプションが有り、デフォルトは『Fit To Content』に設定されています。
Fit To Contentとは
『Fit To Content』は、カラム内の内容物に準じた高さです。
こちらのサンプルでは、画像が一番大きいので画像にカラムの縦幅が合わさっています。
例えば、カラム内で画像よりもテキストの方にボリュームが出れば、テキストの幅に準じて縦幅が変動します。
画面幅に合わせる
『画面幅に合わせる』は、カラムの縦幅が画面の縦幅いっぱいに広がります。
カスタム
『カスタム』では、カーソルの横移動、または横のボックスに数字を直接入力するか▲▼ボタンで縦幅を自分で決めることができます。
『コンテンツ位置』では
- 上
- 中央
- 下
からカラム内での内容物の位置を変更することができます。
※こちらのサンプルでは『中央』を選択しています。
カスタムでの高さの変更はオススメしない！
なぜカスタムでの高さの変更をオススメしないのかと言うと、カラムの『Editセクション』からもカラムの縦幅の変更ができるからです。
セクションの中央上部をクリックすると、『Editセクション』が表示されます。
前者と後者の両方で高さの設定をしてしまうと追々ややこしくなってしまうからです。
高さの設定をするのならば、どちらか一つのエディターでの変更するの方が良いです。
ポップアップ設定の高さは『Fit To Content』に設定し、ポップアップの縦幅を変更したいときはこちらの『Editセクション』からの変更をオススメします。
位置の設定
『位置』では、ポップアップをサイトの画面上のどこに配置するのかを設定します。
- 水平：左 / 中央 / 右
- 垂直：上 / 中央 / 下
上記の『水平』と『垂直』のそれぞれの位置の組み合わせでの設定が可能です。
位置の組み合わせ参考例
（例１）水平位置を右に、垂直位置を中央に設定した時のポップアップの表示位置です。
（例２）水平位置を左に、垂直位置を中央に設定した時のポップアップの表示位置です。
Overlayの表示設定
Overlay（オーバーレイ）を『表示』に設定すると、サイトにポップアップが表示されている間、ポップアップの背景色が変わります。
デフォルトのOverlayの色は黒っぽい色味ですが、スタイルダブでの色味の変更が可能です。
Overlayを『非表示』に設定すると、ポップアップの表示中の背景色に変化はありません。
×（閉じる）ボタンの表示設定
ボタンを閉じるを『表示』にするとポップアップの右上に×（閉じるボタン）が表示されます。
ボタンを閉じるを『非表示』に設定すると、ポップアップ上に×（閉じるボタン）は表示されなくなります。
ポップアップのアニメーション設定
開始アニメーションの設定
ポップアップのアニメーションは、デフォルトでは『なし』に設定されていますので、アニメーションをつけたい場合は、
『開始アニメーション』のテキストバーの右側の▼をクリックします。
するとこの様に、ボックスの中にたくさんのアニメーションが表示されますのでそこから好きなものを選択します。
アニメーションを視聴する方法
通常ならば、アニメーションを選択したら画面上でポップアップのアニメーションが動くはずなのですが、作動する時と作動しない時があります。
アニメーションが作動しなかった場合は、画面下の『目のボタン』をクリックし、『プレビュー』をクリックします。
こちらはプレビュー画面にてアニメーションが実際に再生された時のサンプル動画です。
※アニメーションは『Slide In Left』を選択し、アニメーションの継続時間はデフォルトの1.2秒のままです。
Exit Animationの設定
『Exit Animation』は、ポップアップ右上の閉じるボタンをクリックした後にポップアップが非表示になる時のアニメーションです。
アニメーションの選択の仕方は、開始アニメーションを選択した時と同じ様に、テキストバー右側の▼をクリックすると、アニメーション一覧が表示されるのでそこから好きなものを選択します。
アニメーションの継続時間(Sec)の設定
『アニメーションの継続時間(Sec)』はアニメーションが表示される長さ（秒）です。
デフォルトでは1.2秒に設定されていますが、表示速度をカーソルの横移動で速めたり遅めたりすることができます。
または、秒数を右のボックスに接入力するか、▲▼ボタンでの変更も可能です。
※こちらは、先ほどと同じ
- 開始アニメーション『Slide In Left』
- Exit Animation『Roll Out』
- アニメーションの継続時間『0.7秒』
に設定し、一連を表示させたサンプル動画です。
設定タブ・一般設定
タイトルの変更
こちらのタイトルは、この記事の『ポップアップを作成する方法』のセクションで、ポップアップを新規追加する時に付けたテンプレート名が一般設定のタイトルとして反映されています。
もし変更したい場合はテキストバーに直接入力し、こちらで変更することが可能です。
ステータスの変更
ステータスは
- 下書き
- レビュー待ち
- 非公開
- 公開済み
から選択することができます。
デフォルトでは、『下書き』に設定されています。
HTMLタグの選択
HTMLタグは
- div
- main
- article
- header
- footer
- section
- aside
- nav
から選択することが可能です。
デフォルトは『div』に設定されています。
そしてHTMLタグがわからない、という方は特にdivに設定しておくのが無難です。
Preview Settingsは気にする必要なし
『Preview Settings』で、上記画像に表示されている通り沢山の選択枠がありますが、こちらは特に気にする必要はありません。
ポップアップの公開設定(自動表示）
まず、ポップアップをサイトに公開するには、編集タブの一番下の『公開』または『PUBLISH』と書かれた緑のボタンをクリックします。
するとこの様に『PUBLISH SETTINGS』（公開設定）の画面が表示されます。
Display Conditionについて
『ADD CONDITION』をクリックします。
この様に、『INCLUDE』『Entire Site』と表示されます。
これは、『サイト全体でこのポップアップは表示される。』という意味です。
『Display Conditions』を詳しく説明した記事で【Elementor Pro 『Display Condition』の設定の仕方】がありますので、そちらを参考にしてください。
Triggersの設定
『Triggers』は、何を拍子にポップアップを表示させるのかを設定するタブになります。
『On Page Load』の設定を『はい』にします。
『Within(sec)』は、ポップアップをサイトが表示された何秒後に表示するかを設定します。
直ぐに表示をさせたい場合は０のままにします。
その他のTriggers設定については【Elementor Pro ポップアップ『Triggers』の設定の仕方】の記事で詳しく説明しています。
Advanced Rulesの設定
こちらの『Advanced Rules』でさらに細かい設定が可能です。
Advanced Ruleceの設定の仕方は【Elementor Pro ポップアップ『Advanced Rules』の使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。
ポップアップをサイトにロードする
全ての公開設定が完了したら、画面右下の『SAVE&CLOSE』をクリックします。
すると、ポップアップの編集画面に戻り、画面左下に『おめでとうございます。Popupが公開されました。』と表示が出れば公開は完了しています。
これでサイトにアクセスをすると、自動でポップアップが表示されるようになります。
背景をクリックしたらポップアップが閉じてしまうのを防ぐ方法
サイトでポップアップを確認した際
×ボタンをクリックしても、それ以外の場所をクリックしてもポップアップが閉じてしまう！！！
そしてどうしたらいいかわからないという人もいるのではないでしょうか。
これは、ポップアップの編集画面の高度な設定が必要になります。
こちらはポップアップの編集画面です。
『高度な設定』タブの『Prevent Closing on Overlay』を『はい』にします。
これで、背景画面をクリックしてもポップアップが閉じてしまうのを防ぐことができます。
ポップアップは何か特別に目立たせたい事柄を閲覧者に読ませることができる便利なツールです。
また、ポップアップがあるとサイトに動きが出ていいですね。
この記事ではポップアップの基本的な作り方と設定を紹介しましたが、更にポップアップを掘り下げた、
【Elementor Pro 『ポップアップ』をクリックで表示させる方法】を紹介した記事、
そしてポップアップのPUBLISH SETTINGS（公開設定）である『Display Condition』『Triggers』『Advanced rules』を詳しく解説した
- 【Elementor Pro 『Display Condition』の設定の仕方】
- 【Elementor Pro ポップアップ『Triggers』の設定の仕方】
- 【Elementor Pro ポップアップ『Advanced Rules』の使い方】
の記事も合わせてお読みください！
ポップアップはElementor Proだけにしかないツールです。
既存のテンプレートもたくさんあるので、是非ポップアップを活用してみてくださいね！
