Elementor Proでポップアップ(モーダル)を作る方法

Elementor Proでポップアップを作る

「Elementor Proで何ができるの?通常版で十分なんじゃないの?」

確かにある程度は通常版のElementor(エレメンター)で十分だと思います。
でもElementor Proにしか出来ない事もあるんです。
そのうちの一つがポップアップを作る事です。
Elementor Proを持っていない人はこちらからどうぞ。

>>Elementor Pro購入
>>Elementor Pro購入完全ガイド

ポップアップとは、ウェブサイトのボタンをクリックしたらウィンドウが画面に出てきて

Elementor Proでポップアップを作る

まずは『Templates』 → 『Popups』に行きます。
そして上の画像が表示されるので、『新規作成』または『POPUPの新規追加』をクリックします。

テンプレートの選択で、Popupを選択

このフォームが表示されます。
まず『Popup』を選び、下のフィールドにPopupの名前を入れます。これはなんでも大丈夫です。
そうしたら『テンプレートを作成』をクリックします。

テンプレートを選ぶ

このようにPopupのテンプレートが沢山出てきます。
自分で1から作ることも可能ですが、最初から出来てるものを改良した方が早いです。
自分の作りたいPopupに近いものを見つけたら、画像をクリックします。

するとこのように大きく表示されるので、右上の『挿入する』をクリックします。

PopupテンプレートをElementorで編集

このようにElementorの編集画面が起動し、このテンプレートを編集できます。

このテンプレートも、見た通り普通のElementorで作ってあるので、是非そのまま編集してみましょう。

ElementorのPopupテンプレートを公開
こんな感じに編集しました

完了したら『公開』ボタンを押し、公開しましょう。

ポップアップの設定

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

『INCLUDE』、『Entire Site』と表示されます。
サイト全体で使うという意味でうす。
次に『NEXT』ボタンを押します。

ポップアップを表示させる条件

ここでは、どういう時にこのポップアップを表示させるのかを決めます。
条件は以下です。

  • On Page Load – ページロード
  • On Scroll – スクロール
  • On Scroll To Element – 特定のエレメントまでスクロール
  • On Click – クリック
  • After Inactivity – しばらくサイトで何も操作しない時
  • On Page Exit Intent – ページを閉じようとする時

クリックでポップアップを表示させたいので、『On Click』を選択します。
そして下の『Save & Close』ボタンをクリックします。『Next』じゃないですよ。

ElementorポップアップSave&close

まあもし、『Next』をクリックしてしまっても次のページの『SAVE & CLOSE』をクリックしましょう。
そうしましたらダッシュボードに戻ります。

Elementor Proで作ったポップアップを使う

それでは今作ったポップアップを実際のページで使ってみます。
まず新しいページを作成します。

ボタンモジュールを挿入

そうしたらボタンモジュールを挿入します。

ボタンとポップアップを繋げる

Elementor Proでポップアップを表示させる

ボタンを挿入したら、ボタンの編集画面で、『リンク』を探します。
そしてその項目の右側にある、『ダイナミック』と書いてあるところクリックします。
すると画像のようなウィンドウが表示されます。

Popupを選択します

popupを選択

このように表示されますので、次にPopupと書いてある部分をクリックします。

Popupの種類を選択

するとこのように表示されます。
次に『すべて』と書いてある所をクリックし、先ほど作ったテンプレートを名前で検索します。

先ほど作ったテンプレートを選択

先ほど作ったテンプレートを見つけたらそれを選択します。
これで完了です!

ボタンクリックでポップアップが表示されるか確認する

それでは今作ったページを保存し、ちゃんとポップアップが表示されるか試してみます。

ちゃんとポップアップが表示されるかテスト

こんな感じでポップアップが表示されたら成功です。
Xを押せばちゃんとポップアップが閉じるか確認しましょう。


こんな感じでElementor Proを使うと簡単にポップアップを作ることができます。
もっと細かい設定が可能ですが、それはまた別の記事で。
何か質問がありましたらコメントください。

コメントする

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