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を使うと簡単にポップアップを作ることができます。
もっと細かい設定が可能ですが、それはまた別の記事で。
何か質問がありましたらコメントください。

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

「Elementor Proでポップアップ(モーダル)を作る方法」への12件のフィードバック

  1. いつも記事を拝見させていただいています。
    ありがとうございます!
    ひとつ質問があるのですがよろしいでしょうか?
    このポップアップですが、デフォルトにある「✖」の閉じるボタンと、こちらの記事にある「閉じるボタン」を作成しました。
    二つとも実際にはクリックしても反応しません。
    添付したサイトのスマホ用のハンバーガーメニューで使用しました。
    どんな原因が考えられるでしょうか?
    教えていただけると助かります!

    1. コメントありがとうございます!
      正直なところちょっと見てみないことにはわかりませんね。
      特に最初からついてくるXを押しても閉じないのは不思議です。
      もしかしたら記事だと分かりづらい部分があるかもしれないので、この動画の通りにしてみてください。
      https://www.youtube.com/watch?v=bx9HkgTC-gE
      それでもうまくいかなければまたコメントください。

  2. お世話になります。
    フリーデザイナーの小島と申します。

    いつもエレメンターの記事、動画など
    参考にさせていただき、ありがとうございます。

    今回ポップアップで質問がございます。
    途中からポップアップを画面下に固定して
    フッター付近で止めたいのですが、
    どうしても上手くいかないのです。

    どうすれば良いのかご指示いただければ幸いです。
    どうぞよろしくお願いいたします。

    小島

    1. 小島さん、こんにちは!

      もう少し詳しくこのポップアップの情報を教えて頂けると助かります。
      『途中から』とありますがポップアップが出てる状態で、ユーザーがスクロールして画面の途中まで行くということですか?
      それとも画面の途中までスクロールしてからポップアップを開くと固定されるということですか?

  3. ご連絡ありがとうございます。

    すいません、情報不足でした。

    はい、購入ボタンをポップアップで表示して
    そのまま下にスクロールしてフッター付近で
    止めたいのです。

    こちらのサイトです。
    https://fmi-wu.com/top/

    エレメンターのポップアップ機能で
    出来るのでしょうか?

    お手数をおかけしますが
    お伺いさせていただけますと幸いです。

    どうぞよろしくお願いいたします。

    1. 何をトリガーでポップアップが表示されるのか、そしてどのように表示させるのか、それらで色々と変わってくると思います。
      ですが、Elementorのポップアップ機能で途中からポップアップのスタイルを変えることは出来ないと思います。
      多分CSSとJavaScriptが必要だと思います。

  4. コメントありがとうございます。

    すいません、そうですよね、しかしエレメンター機能で
    ここまで出来れば問題ないですので、了解しました。

    また、色々と参考にさせていただきます。
    どうぞよろしくお願いいたします。

  5. コメント失礼いたします。
    営業兼HPの担当をしています、引間と申します。

    こちらでお伺いしていいのか、場違いでしたらごめんなさい。
    どこからでも任意のURLにアクセスできるようなポップを作ろうとこのページを拝見いたしました。
    どちらかというとこちらのサイト左部にある「目次」のような仕様(一定箇所までスクロールするとスライドイン・アウトする、ホバーでメニューが出現する)に強く惹かれてしまいました…。
    こちらはElementorの機能で作れるものなのでしょうか?
    ご教示いただけますと幸いです。

    1. こんにちは!
      >どこからでも任意のURLにアクセスできるようなポップ
      これはどういうことでしょうか?
      ポップアップ内にあるリンクがいつも同じURLだということですか?

      この左の目次は自分が作ったカスタムの機能ですで。残念ですがElementorだけでは作れないと思いますね。

      1. 返信いただきありがとうございます。
        おっしゃる通りです。
        ページをスクロールしていくとスライドイン、アウトができるようなポップ(あるいはメニューバーのようなもの)を作りたく、調べていましたが、技術的な知見に疎いため、ノンコーディングで作れる方法を探していた次第です。
        Elemenorだけでは難しい仕組みなのですね…わかりました。
        なにかしら代替案を引き続き調べたいと思います。
        ご連絡ありがとうございました。

        1. スクロールの途中でスライドインするポップアップは作れますよ。でも自分が入れた機能は、画面の左に目次ボタンがスクロールの位置によって出てきたり引っ込んだりしますよね。それはElementorではやり方はわからないですね。
          Elementorはポップアップを開くオプションは多いのですが、閉じるオプションが少ないんですよね。
          もしかしたら他のプラグインを組み合わせればできるかもですが。
          今度自分が運営するサロンで聞いてみますよ!

          1. ご返答ありがとうございます。
            仰る通りで、どの仕様にもインの仕様は多く見受けられるのですが、アウト関係がないために困っていました。
            誤クリック等で消えない様、いつでもスライドインアウトできたらいいな、と試行錯誤していた次第です。

            ありがとうございます。吉報をお待ち申し上げます。

コメントする

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

Scroll to Top