Elementor Pro 『ポップアップ』の作り方と基本設定

2021年7月19日
2021年3月1日
Elementorの使い方
ポップアップ

ポップアップとは、サイト上に何か目立たせたいもの（例えば広告や注意書きなど）を表示させるウィンドウです。
こちらの記事ではElementor Proのポップアップ機能を使ってポップアップを自分で作る方法、サイトにロードする方法を説明します。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

ポップアップの編集画面への行き方

画面左側のバーの中の『テンプレート』にカーソルを当て、出てきたボックスの中の『Popups』をクリックします。

すると、この様な画面表示になります。

ポップアップを作成する方法

『新規POPUPを追加』をクリックします。

すると、この様な表示画面になりますので

作業を行いたいテンプレートの種類を選択の欄で『Popup』が選択されていることを確認します。
テンプレートに名前を付けます。（任意）
後で名前を変更することは可能です。
※こちらのサンプルでは『ポップアップテスト』という名前にしました。
『テンプレートを作成』をクリックします。

するとこの様にデフォルトで既存のポップアップテンプテート一覧が表示されます。

ポップアップを自作するのでテンプレートライブラリの画面右上の×をクリックします。

すると上記のポップアップを作成する画面に切り替わります。
通常のElementorと同じ操作、編集画面でポップアップを作成することができます。

自作ポップアップ作成例

画面中央の赤い丸をクリックします。

カラム構造を選択します。
※今回はサンプルとして２分割のカラムを使用します。

この様な表示になります。

サンプルとして『見出しウィジェット』『テキストエディターウィジェット』『画像ウィジェット』をカラムに挿入しました。

この様にそれぞれのウィジェットを編集し、新しいオリジナルのポップアップを作成しました。
見出し・テキストエディター・画像それぞれのウィジェットの操作の仕方については以下の記事を参考にしてください。

また、他のウィジェットを組み合わせて自分仕様のポップアップを構築することが可能です。

ポップアップの表示設定をする

ポップアップの設定をするにはまず画面左下のギアのマークをクリックします。

すると画面左側のタブの表示がこの様に変わります。

設定タブ・レイアウトの設定

幅の設定

『幅』ではカーソルを横スライド、またはその横のボックスに数字を直接入力するか、▲▼のボタンでポップアップ全体の横幅が調整できます。
※デフォルトでは640の値に設定されています。

この様に画像の幅を縮めたり、または広げたりすることができます。

高さの設定

『高さ』は、カラムの縦の幅を編集することができます。

Fit To Content
画面幅に合わせる
カスタム

の３つのオプションが有り、デフォルトは『Fit To Content』に設定されています。

Fit To Contentとは

『Fit To Content』は、カラム内の内容物に準じた高さです。
こちらのサンプルでは、画像が一番大きいので画像にカラムの縦幅が合わさっています。

『Fit To Contents』で、テキストにボリュームをもたせたときにどうなるかのサンプル

例えば、カラム内で画像よりもテキストの方にボリュームが出れば、テキストの幅に準じて縦幅が変動します。

画面幅に合わせる

『画面幅に合わせる』は、カラムの縦幅が画面の縦幅いっぱいに広がります。

カスタム

『カスタム』では、カーソルの横移動、または横のボックスに数字を直接入力するか▲▼ボタンで縦幅を自分で決めることができます。

『コンテンツ位置』では

上
中央
下

からカラム内での内容物の位置を変更することができます。
※こちらのサンプルでは『中央』を選択しています。

カスタムでの高さの変更はオススメしない！

なぜカスタムでの高さの変更をオススメしないのかと言うと、カラムの『Editセクション』からもカラムの縦幅の変更ができるからです。

セクションの中央上部をクリックすると、『Editセクション』が表示されます。
前者と後者の両方で高さの設定をしてしまうと追々ややこしくなってしまうからです。
高さの設定をするのならば、どちらか一つのエディターでの変更するの方が良いです。
ポップアップ設定の高さは『Fit To Content』に設定し、ポップアップの縦幅を変更したいときはこちらの『Editセクション』からの変更をオススメします。

位置の設定

『位置』では、ポップアップをサイトの画面上のどこに配置するのかを設定します。

水平：左 / 中央 / 右
垂直：上 / 中央 / 下

上記の『水平』と『垂直』のそれぞれの位置の組み合わせでの設定が可能です。

位置の組み合わせ参考例

（例１）水平位置を右に、垂直位置を中央に設定した時のポップアップの表示位置です。

（例２）水平位置を左に、垂直位置を中央に設定した時のポップアップの表示位置です。

Overlayの表示設定

Overlay（オーバーレイ）を『表示』に設定すると、サイトにポップアップが表示されている間、ポップアップの背景色が変わります。
デフォルトのOverlayの色は黒っぽい色味ですが、スタイルダブでの色味の変更が可能です。

Overlayを『非表示』に設定すると、ポップアップの表示中の背景色に変化はありません。

×（閉じる）ボタンの表示設定

ボタンを閉じるを『表示』にするとポップアップの右上に×（閉じるボタン）が表示されます。

ボタンを閉じるを『非表示』に設定すると、ポップアップ上に×（閉じるボタン）は表示されなくなります。

ポップアップのアニメーション設定

開始アニメーションの設定

ポップアップのアニメーションは、デフォルトでは『なし』に設定されていますので、アニメーションをつけたい場合は、
『開始アニメーション』のテキストバーの右側の▼をクリックします。

するとこの様に、ボックスの中にたくさんのアニメーションが表示されますのでそこから好きなものを選択します。

アニメーションを視聴する方法

通常ならば、アニメーションを選択したら画面上でポップアップのアニメーションが動くはずなのですが、作動する時と作動しない時があります。

アニメーションが作動しなかった場合は、画面下の『目のボタン』をクリックし、『プレビュー』をクリックします。

こちらはプレビュー画面にてアニメーションが実際に再生された時のサンプル動画です。
※アニメーションは『Slide In Left』を選択し、アニメーションの継続時間はデフォルトの1.2秒のままです。

Exit Animationの設定

『 Exit Animation』は、ポップアップ右上の閉じるボタンをクリックした後にポップアップが非表示になる時のアニメーションです。
アニメーションの選択の仕方は、開始アニメーションを選択した時と同じ様に、テキストバー右側の▼をクリックすると、アニメーション一覧が表示されるのでそこから好きなものを選択します。