Elementor ProのPopupの使い方

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

ポップアップとは、サイト上に何か目立たせたいもの(例えば広告や注意書きなど)を表示させるウィンドウです。

こちらの記事ではElementor Proのポップアップ機能を使ってポップアップを自分で作る方法、サイトにロードする方法を説明します。

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

『ポップアップ』の作り方と基本設定を動画でご覧になりたい方はこちらからどうぞ!

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

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

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

「最初のポップアップを作成」の表示画面

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

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

新規ポップアップを追加をクリック

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

ポップアップを新規追加すろ時の手順

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

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

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

ライブラリを削除

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

自作ポップアップの編集画面

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

自作ポップアップ作成例

ウィジェットの追加

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

カラムの選択

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

選択したカラムが表示された画面

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

(サンプル)見出し・テキストエディター・画像ウィジェットを挿入

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

各ウィジェットを編集後の画面

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

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

さらに丸いポップアップを作成することも可能です。

TOFUラボのメンバーの藤原さんが実際に作成されたサイトで使用している丸形のポップアップの作り方を説明した実演動画もありますのでぜひ参考にしてください!

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

ポップアップの表示設定

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

設定の編集タブ

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

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

レイアウトセクションの編集

幅の設定

幅の設定

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

幅を変更した後のサンプル

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

高さの設定

高さの設定

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

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

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

Fit To Contentとは

『Fit To Contents』の説明

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

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

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

画面幅に合わせる

『画像幅に合わせる』の説明

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

カスタム

高さを『カスタム』にした時の説明

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

カスタム・コンテンツ位置の説明

『コンテンツ位置』では

  • 中央

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

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

カスタムでの高さの設定はオススメしない

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

カラムのエディットセクションから高さの設定の仕方

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

ポップアップ設定の高さは『Fit To Content』に設定し、ポップアップの縦幅を変更したいときはこちらの『Editセクション』からの変更をオススメします。

位置の設定

ポップアップをサイト上で表示させる位置の設定

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

  • 水平:左 / 中央 / 右
  • 垂直:上 / 中央 / 下

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

位置の組み合わせ参考例

水平位置・右と垂直位置・中央の組み合わせ例

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

水平位置・左と垂直位置・下の組み合わせ例

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

Overlayの表示設定

オーバーレイの表示設定

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

オーバーレイを非表示に設定した時

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

×(閉じる)ボタンの表示設定

閉じるボタンの表示設定

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

閉じるボタンを非表示にした時

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

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

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

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

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

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

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

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

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

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

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

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

Exit Animationの設定

Exit Animationの設定

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

アニメーションの継続時間(Sec)の設定

アニメーションの継続時間の設定

『アニメーションの継続時間(Sec)』はアニメーションが表示される長さ(秒)です。
デフォルトでは1.2秒に設定されていますが、表示速度をカーソルの横移動で速めたり遅めたりすることができます。
または、秒数を右のボックスに接入力するか、▲▼ボタンでの変更も可能です。

※こちらは、先ほどと同じ

  • 開始アニメーション『Slide In Left』
  • Exit Animation『Roll Out』
  • アニメーションの継続時間『0.7秒』

に設定し、一連を表示させたサンプル動画です。

設定タブ・一般設定

設定タブの一般設定

タイトルの変更

タイトルの変更

こちらのタイトルは、この記事の『ポップアップを作成する方法』のセクションで、ポップアップを新規追加する時に付けたテンプレート名が一般設定のタイトルとして反映されています。

もし変更したい場合はテキストバーに直接入力し、こちらで変更することが可能です。

ステータスの変更

ステータスの変更

ステータスは

  • 下書き
  • レビュー待ち
  • 非公開
  • 公開済み

から選択することができます。
デフォルトでは、『下書き』に設定されています。

HTMLタグの選択

HTMLタグの設定

HTMLタグは

  • div
  • main
  • article
  • header
  • footer
  • section
  • aside
  • nav

から選択することが可能です。
デフォルトは『div』に設定されています。
そしてHTMLタグがわからない、という方は特にdivに設定しておくのが無難です。

Preview Settingsは気にする必要なし

プレビューセッティングについて

『Preview Settings』で、上記画像に表示されている通り沢山の選択枠がありますが、こちらは特に気にする必要はありません。

ポップアップの公開設定(自動表示)

ポップアップの公開

まず、ポップアップをサイトに公開するには、編集タブの一番下の『公開』または『PUBLISH』と書かれた緑のボタンをクリックします。

公開設定画面

するとこの様に『PUBLISH SETTINGS』(公開設定)の画面が表示されます。

Display Conditionについて

ディスプレイコンディションについて

『ADD CONDITION』をクリックします。

ConditionsのINCLUDE/Entire Siteが追加された表示画面

この様に、『INCLUDE』『Entire Site』と表示されます。
これは、『サイト全体でこのポップアップは表示される。』という意味です。

『Display Conditions』を詳しく説明した記事で【Elementor Pro 『Display Condition』の設定の仕方】がありますので、そちらを参考にしてください。

Triggersの設定

トリガーの設定につて

『Triggers』は、何を拍子にポップアップを表示させるのかを設定するタブになります。

『On Page Load』を『はい』に設定

『On Page Load』の設定を『はい』にします。
『Within(sec)』は、ポップアップをサイトが表示された何秒後に表示するかを設定します。
直ぐに表示をさせたい場合は0のままにします。

その他のTriggers設定については【Elementor Pro ポップアップ『Triggers』の設定の仕方】の記事で詳しく説明しています。

Advanced Rulesの設定

Advanced Rulesについて

こちらの『Advanced Rules』でさらに細かい設定が可能です。

Advanced Ruleceの設定の仕方は【​​Elementor Pro ポップアップ『Advanced Rules』の使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。

ポップアップをサイトにロードする

ポップアップをサイトにロード・SAVE&CLOSEをクリック

全ての公開設定が完了したら、画面右下の『SAVE&CLOSE』をクリックします。

ポップアップのロード完了画面

すると、ポップアップの編集画面に戻り、画面左下に『おめでとうございます。Popupが公開されました。』と表示が出れば公開は完了しています。

これでサイトにアクセスをすると、自動でポップアップが表示されるようになります。

背景をクリックしたらポップアップが閉じてしまうのを防ぐ方法

サイトでポップアップを確認した際

×ボタンをクリックしても、それ以外の場所をクリックしてもポップアップが閉じてしまう!!!

そしてどうしたらいいかわからないという人もいるのではないでしょうか。
これは、ポップアップの編集画面の高度な設定が必要になります。

ポップアップの高度な設定・Prevenyt Closing on Overlayの設定

こちらはポップアップの編集画面です。
『高度な設定』タブの『Prevent Closing on Overlay』を『はい』にします。

これで、背景画面をクリックしてもポップアップが閉じてしまうのを防ぐことができます。


ポップアップは何か特別に目立たせたい事柄を閲覧者に読ませることができる便利なツールです。
また、ポップアップがあるとサイトに動きが出ていいですね。

この記事ではポップアップの基本的な作り方と設定を紹介しましたが、更にポップアップを掘り下げた、

Elementor Pro 『ポップアップ』をクリックで表示させる方法】を紹介した記事、

そしてポップアップのPUBLISH SETTINGS(公開設定)である『Display Condition』『Triggers』『Advanced rules』を詳しく解説した

の記事も合わせてお読みください!

ポップアップはElementor Proだけにしかないツールです。
既存のテンプレートもたくさんあるので、是非ポップアップを活用してみてくださいね!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

「Elementor Pro 『ポップアップ』の作り方と基本設定」への1件のフィードバック

  1. 会員サイトを作成していて、ポップアップの丁寧なご説明の動画があってとても勉強になりました!トライ&エラーしながら作成していきます!本当に貴重な情報を共有いただき感謝いたします。
    *以前エレメンターの英語のサイトでも学習したことがありましたが、日本語の動画の方がやっぱりわかりやすです。

    全ての画面でポップアップさせるのではなく、いくつかサイトのセレクトしてセットする方法があれば更にHPが整うだろうなぁと思いました。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通