WordPressのテーマビルダープラグイン「Elementor」のファンブログ

ElementorProのポップアップ機能 【完全ガイド】ポップアップ作成編

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
popup-thumbnail-min

ElementorProのポップアップ機能 とは?

目玉機能の1つに ElementorProのポップアップ機能 があります。一言で言えば、簡単にポップアップが作れるものです。ですがっ!これだけじゃないんです。ポップアップの出し方や出現設定など細かく設定出来ます!今回は、ポップアップ機能の使い方を解説して行きたいと思います。

YouTubeで簡単に機能紹介しておりますので、どんな機能か知りたい!という方は是非ご覧下さい。

https://youtu.be/39JHQgMiU1w


ポップアップデモページ
もあります!(ずいぶん前に作ったやつ)
https://elefantastic.tokyo/popup_demo/

 

ElementorProのポップアップ機能 で出来ること

①ポップアップをElementorで自由にデザイン出来る。
 ・フォームウィジェットを入れて、メルマガ登録画面!
 ・お勧め記事(ポストウィジェットを使って)へ誘導!
 ・ナビウィジェットと組み合わせて全画面メニューなどなど。
②ポップアップの登場アニメーションが設定出来る。
 ・ぼやっとフェードイン
 ・回転しながら可愛く登場
 ・右からスライドイン!
③作ったポップアップを好きなタイミングで出す事が出来る。
 ・ユーザーがボタンをクリックしたら出す!
 ・ユーザーが3ページ見たらポップアップを出す!
 ・ユーザーがページを開いて10秒たった出す!

ざっと思いつくだけでも、こんなけの事が出来ちゃいます!

おじさん
おじさん
面白そうだね。
でも、ウザいのよね。ポップアップって・・・
おばさん
おばさん

おっと、いきなりご意見が分かれましたね・・・(ぼそっ)

全3編の超大作記事!

ざっくり書くと意外とシンプルな手順なのですが、細かく解説するとかなり長くなるので、以下の構成で記事を出して行きます。

おばさん
おばさん
ちょっと大袈裟じゃない?ハリーポッターじゃあるまいし・・・

す、すみません・・・っていうか、例えがハリーポッターですか・・・

で、今回は「ポップアップ設定編」とさせて頂きます。ポップアップを作るところですね。そして次回は「ポップアップ中身編」と題し、ウィジェットとか入れてポップアップを完成させます。、そして最終回は「ポップアップ活用編」と題し、表示タイミングの設定からポップアップの活用アイデアを解説して参ります。(※管理者の意向により、予定と内容が異なる場合がございます)

ポップアップ作成手順(ざっくり)

手順①:ポップアップを作る

なにはともあれ、ポップアップをざっくりで良いので、作っておきます!

手順②:どんな風に表示させるか決める

ElementorProのテーマビルダーでテンプレートを作成した時と同じ様に、表示させる条件設定(パブリッシュセッティング)をする画面があります。そこで、ポップアップを表示させる条件を設定します。

手順③:ポップアップを表示させるページを作ります。

ここからは、ポップアップの出し方によって、手順③が必要な人と不要な人に分かれます。手順②で設定せず、任意のボタンをクリックしてポップアップさせる場合は、この手順③を行います。

ポップアップを表示させるきっかけとなるボタンにポップアップを設置します!

手順④:ポップアップテスト!

実際、設定した条件でポップアップが表示させるかチェックしましょう!この時、モバイルビューもチェックするのを忘れずに。

意外と簡単ね。
おばさん
おばさん

ですよね?!簡単なんですよー。

では実際に作り方を見て行きましょー。

ポップアップを作ろう!

それではポップアップを作って行きましょう!まずは、ワードプレスのメニューにある「テンプレート>Popups」を選択し、ポップアップの管理画面を開きます!

popup-01-23

画面上部の「新規追加」、タイトルを決めます。

popup-01-22

なにわともあれ「設定」から

popup-01-20

ポップアップはサイトの一部に表示される場合が多いと思います。その為、どの位の大きさで表示させるか、画面のどの辺に出すのか?など、ある程度イメージする為、最初に設定しておくと作りやすいと思います。

「設定」で出来る内容としては・・・
①ポップアップのサイズ(幅や高さ)
②出現させる位置
③閉じるボタンの表示有無
④表示開始時と閉じる時のアニメーション

です。

おじさん
おじさん
そんな最初から決めないといけないのかい?

いえいえ、ここで重要なのはサイズと位置くらいかと思います。とは言え、あとからいくらでも変更できますので、ざっくりとしたイメージを持つレベルでOKですよ。

ポップアップのサイズ

どの位の大きさでポップアップを出すかをイメージする為、「幅」と「高さ」を設定して行きます。

 

「幅」

popup-01-19

 

「高さ」

popup-01-18

popup-01-17

popup-01-16

ポップアップの表示位置

popup-01-15 popup-01-14 popup-01-13