PopupモーダルをElementorで作る!

アドオンは必要ありません
elementor popup

PopupモーダルをElementorで作る!

Popupモーダル?

 ポップアップとは飛び出してくるなにかで、モーダルとはモードが変わってユーザーがアクションをしないと次に行かない感じというのが筆者の解釈です。

 つまり、今見ているページでなにかクリックしたら、ぴょんと何かが表示されて、なにかボタンを押さないと元に戻らない、もしくは次のアクションにつながらない状況がPopupモーダルということだと思います。

ポップアップのサンプル

 下のボタンをクリックするとモーダルウインドウがポップアップ表示します。

 今回はこのポップアップをElementorで作ってみるというのが趣旨です。

 ワークフローとしては、まずポップアップする内容をElementorのPopupで作成して、ボタンクリックで作成したPopup要素を表示するようなイメージです。

 ポップアップをトリガーするにはurlのダイナミックタグから指定するので、ハイパーリンクのurlを入力する欄を持っているものであれば画像ウィジェット、見出しウィジェットなどなんでも使えます。

 上はボタンウィジェットで作成したものです。

ElementorでのPopupでポップアップの中身を作成

 ElementorにPopupというポップアップ専用の編集画面が用意されています。

 テーマビルダーの編集画面に似ていますが、テーマビルダーには含まれていないというナゾの存在ですが、ポップアップされる中身を専用に編集できる専用の編集画面です。

 編集画面はElementorのページ編集画面やテーマビルダーと同様に操作が可能で、まずはポップアップの大枠になるコンテナから作業を開始することができます。

 コンテナの中は通常のページ編集と同じように好きなウィジェットを配置することが可能で、編集画面の左下の歯車アイコンをクリックするとポップアップの挙動を指定することが可能です。

 ポップアップの位置や出方などもここで指定します。

ポップアップをページに配置する

 このポップの配置がElementorには珍しく視覚的にわかりにく操作です。

 必要なのはurlを入力する部分があるウィジェット、ここではボタンウィジェットを使います。

elementor button dynamic

 ボタンウィジェットにはリンクの欄があり、その部分のダイナミックタグアイコンをクリックします。

 クリックして表示されるプルダウンの中のアクション>Popupを選択します。

popup select

 次にPopupの左横にあるスパナなアイコンをクリック、Allと表示されている部分はプルダウンになっています。

 クリックして、予め作成したElementor Popupの名前の一部を入力します。

popup select2

 名前の一部を入力すると、該当のPopupが表示されるのでポップアップ表示したいポップアップテンプレートを選択します。

Elementorの底力

 あまりに視覚的に使いやすいElementorですが、その視覚的な編集能力がかえってこのような便利機能を相対的にわかりにくくしているかもしれません。

 すこし掘り下げるだけで、可能性しか感じないページビルダー、それがElementorです!

Picture of Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加
勝手マニュアル進捗 39%
tomoro small

Popupのサンプルです。