読了目安時間は約 3 分です。
クリックしたとき、またはページ遷移したときなど、オーバーレイで画像やテキストなどのコンテンツをポップアップ表示(モーダルウィンドウ)させたいときにおすすめなのがプラグイン「Popup Builder」です。
モーダルウィンドウはコードを書いて実装しようとするとなかなか面倒ですが、このプラグイン+ブロックエディタで手早く実装できますよ。
目次
便利なところ
- コードを殆んど書かずにポップアップ表示できる
- 画像、動画、テキストなど大抵のコンテンツに対応
- コンテンツの配色、背景色なども自由に変更可能
- ポップアップアニメーションも15種類あり時間なども調整可能
- 基本無料で十分だが、課金すればより多くのコンテンツに対応できる
用途
- 写真やイラストなど画像の拡大表示
- アラートや警告メッセージなど
- 資料請求やお問い合わせフォームなどCTA
- 広告
など
使い方
プラグインをインストールして有効化します。
その後ポップアップさせるコンテンツを作成して実装します。
作成方法
管理画面の左メニューから Popup Builder > Add New と進むと
「image」「HTML」「Facebook」「Subscription」
のいずれかを選択します。
画像だけポップアップさせる場合は「image」コンテンツは「HTML」を選びます。
「HTML」でブロックエディタが使えますので、殆どの内容はここで作成できます。
※SVGは「HTML」じゃないと読み込めないようです。
詳細は後ほど。
まとめ
ポップアップさせる内容や配色は自由ですし、背景やポップアップアニメーションもバリエーション豊富です。無料でここまでできるのは素晴らしいですね。