WordPress ウェブサイトにモーダルポップアップを簡単に追加する方法 : 3 ステップ チュートリアル

についての最近の研究をご存知ですか？ 20 億のモーダル ポップアップには、 上位10%の中で9.28%の変換率ですか?(1)

はい。 ポップアップにより、Web サイトへのアクセスがユーザーフレンドリーになり、より多くのニュースレターへの登録を迅速に獲得できるようになります。 ポップアップの外観と機能は大幅に変わりました。その結果、現代のウェブサイトではこれまで以上に人気が高まっています。

あなたも、WP モーダルをウェブサイトに追加して、そのメリットを活用したいと思いませんか?

それなら、このブログはまさにあなたが必要とするものです。これは、ポップアップ モーダルと WordPress ウェブサイトに簡単に追加する方法。 

出典: (1) ポップアップ統計: 20億のポップアップ例の分析から得られた知見

モーダルポップアップとは何ですか?

モーダル ポップアップは非常に一般的であり、遭遇したことがない可能性はほとんどありません。しかし、モーダルポップアップの定義をご存知ですか?みてみましょう。

モーダル (モーダル ウィンドウまたはライトボックスとも呼ばれる) は、他のすべてのページ コンテンツの前に表示され、非アクティブ化される Web ページ要素です。メイン コンテンツに戻るには、ユーザーはアクションを完了するかモーダルを閉じることによってモーダルを操作する必要があります。

– ハブスポット

モーダルウィンドウは旧モデルのダイアログボックスとは異なります。モードレス ポップアップでは、ポップアップがオンになっている場合でも、ユーザーはウィンドウ全体にアクセスできます。したがって、ポップアップを無視して作業を続行できます。

一方、新しいモーダル ポップアップは、子ウィンドウの形式で新しい「モード」を作成し、親ウィンドウを無効にします。その結果、ユーザーは何らかのアクションを実行するかモーダル ポップアップを閉じるまで、元のウィンドウで作業することはできません。 

メリットは何ですか?利点は、たとえ 1 ～ 2 秒であっても、Web サイトの訪問者の注意を引くことができることです。ユーザーの注目をメッセージに集中させることが必要ですよね? 

なぜなら、彼らがあなたが提供すべきものを見た場合、彼らは1秒以上そこに留まり、あなたが確実にリードできるからです。

WordPress ウェブサイトでポップアップモーダルを使用する理由

ほとんどの人はポップアップが迷惑だと考えています。もちろん、ポップアップを非難しているわけではありません。仕事をするためにサイトにアクセスしたときに突然ポップアップが表示されて邪魔されたら、確かに迷惑です。 

しかし、ビジネスオーナーはポップアップを別の見方で見る必要があります。信じられないかもしれませんが、これらの煩わしいポップアップは驚異のように機能するからです。ポップアップ モーダルは、特にリード収集において非常に成功することが証明されています。

相撲によればでは、ポップアップ モーダルを使用して 2 年以内に約 2,3645,948 個の電子メール アドレスを収集しました。多くの場合、コンバージョン率は 50.2% にも達しました。 

したがって、メールリストを増やしてコンバージョン率を加速したい場合は、リードマグネットであることが証明されているモーダルポップが最適です。

さらに、モーダルはシンプルかつ柔軟であり、アクションを完了するためにユーザーを別のページに送る必要はありません。より良いユーザーエクスペリエンスでより多くの見込み客を獲得します。したがって、モーダルが役に立たない、または死んだと考えずに、今日から使い始めてください。

最新の Web デザインにおけるモーダル ウィンドウの一般的な使用法

モーダルは、Web サイト訪問者に何らかのアクションを起こしたり、重要なメッセージに気づいてもらったりする必要がある場合に非常に効果的です。 Web デザインにおけるモーダル ウィンドウの一般的な用途には次のようなものがあります。

• ウェルカムメッセージを表示
• 電子メールを収集し、ニュースレター購読の見込み客を獲得する
• ログインフォーム
• アクションを実行する前に警告メッセージを表示する
• Cookieポリシーを表示する
• 画像ギャラリー（商品）や動画などのメディアを表示します。  
• より良いユーザーエクスペリエンスを実現する複数ステップのフォーム用。

Web デザインでモーダルを使用する多くの方法のうちのほんの一部をリストしました。 WordPress でカスタム ポップアップを作成する方法を理解すると、最適な結果を得るために Web サイトでカスタム ポップアップを使用するさまざまな方法がわかります。 

それでは、始めましょう。

始めるために必要なセットアップ

Web サイトに WordPress がインストールされていると仮定します。それに加えて、Web サイトにモーダルを作成するには、ページ ビルダーと WordPress ポップアップ プラグインが必要になります。

1. エレメンター (無料版)
2. ElementsKit (無料版とプロ版の両方)

Elementor は無料のページビルダーであり、ElementsKit は最高の WordPress モーダル ポップアップ プラグインの 1 つです。

インストールは完了しましたか?これで、WordPress のクリック時に WordPress カスタム ポップアップを作成する準備が整いました。メインプロセスを開始しましょう。

ElementsKitを使用してElementorの3ステップでWordPressにモーダルポップアップを追加する方法

WordPress サイトにポップアップを追加するのが難しいと思っているなら、驚くかもしれません。以下の手順に従って、WP で Elementor モーダル ポップアップを簡単に作成します。これは、WordPress にポップアップを追加する方法に関する最も簡単なチュートリアルです。

ステップ 1: モーダル ポップアップ ウィジェットを有効にする

ElementsKitプラグインをインストールしたら、 Elementor モーダルポップアップウィジェット WordPressダッシュボードから

• に行く  ElementsKit  > ウィジェット > オンにする ポップアップモーダl > クリック 変更内容を保存

ステップ2: WPモーダルポップアップウィジェットを追加する 

• ポップアップモーダルを検索し、 ドラッグアンドドロップ ウィジェット モーダルを表示したいセクションをクリックします。

ステップ 3: 設定を完了する

ポップアップ セクションの [編集] アイコンをクリックして、編集オプションに移動します。

• ボタンのテキストを変更するには、次の場所に移動します。 コンテンツ > トグルボタン > ラベル そして 編集

• 変更するには タイトル そして 字幕 に行く コンテンツ > ヘッダ カスタム テキストでオプションを変更します。

• 変更するには コンテンツ 本文のコンテンツセクションを展開し、 編集 WordPress ポップアップ メッセージを作成するためのテキスト。

• に行く コンテンツ > フッター > ボタン > CTA カスタムポップアップビルダーである ElementsKit を使用して、CTA ラベルと URL を変更します。

• 最後に、をクリックします アップデート 保存する。

完了です。プレビュー ボタンをクリックして結果を確認し、WordPress ポップアップ ウィンドウの外観を確認します。

よくやった！ Elementor モーダル ポップアップが作成されました。

モーダルの追加設定

次に、カスタマイズできる追加のモーダル設定を見てみましょう。

レイアウト：

レイアウト オプションを展開して、トグラー タイプ、ポップアップ位置、ポップアップ表示オプションを変更します。

トグラーのタイプ:

誰かがボタンをクリックしたときにトリガーされるモーダルを必ずしも用意する必要はありません。 ElementsKit では、ボタン以外にさらに 2 つのオプションから選択できます

画像： モーダルのトグルとしてボタンの代わりに、任意のサイズのカスタム画像を選択できます。カスタム イメージを選択するには 

• コンテンツに移動 > トグラータイプ > 画像を選択
• [トグラー画像] に移動し、画像を選択します。 画像、画像サイズ、配置

時間： ユーザーによるアクションなしで特定の時間が経過した後にモーダルがトリガーされるように設定することもできます。たとえば、モーダルが 3 秒後に表示されるように設定するには

• コンテンツに移動 > トグラータイプ > 時間
• 時間を追加してください 後に切り替え （すぐに）

ポップアップ表示タイプ:

ポップアップ表示タイプには、モーダルとスライドの 2 つのオプションがあります。

ポップアップ位置: 

ポップアップをウィンドウ内の任意の場所に配置することを選択できます。選択できる位置オプションは次のとおりです。

• 左上
• 中央上部
• 右上
• 中央左
• 中心
• 中央右
• 左下
• 中央下
• 右下

ポップアップ： 

ポップアップ オプションを展開して、 幅と最小の高さ。 ここでは、次のオプションも得られます 表示または非表示 の アイコン、ヘッダー、フッターを閉じます。 あなたもすることができます 水平位置と垂直位置を調整する そして追加します アニメーション あなたの希望に応じて。

かぶせる： 

ユーザーにモーダルをクリックして閉じることを強制したくない場合は、 ポップアップを閉じる OnClick オーバーレイ オプション。こうすることで、ユーザーはウィンドウ上の任意の場所をクリックしてモーダルを閉じることができます。

閉じるアイコン: 

ここで閉じるアイコンの位置を変更できます。ポップアップ右上、ポップアップ左上、ウィンドウ右上、ウィンドウ左上を設定できます。縦横の位置を変更することもできます。さらに、ライブラリから任意のアイコンを選択したり、SVG 画像をアイコンとして使用したりできます。

ヘッダ：

タイトルとサブタイトルを変更する以外に、ここから区切り線を表示または非表示にすることもできます。

フッター:

フッター オプションを展開して、フッター ボタンのラベル、バリアント、配置を変更します。必要に応じて、ここから非表示にすることもできます。 

これで完了です。これで、Web サイトでモダンで魅力的なポップアップを使用できるようになりました。

詳細については、 ElementsKit Elementor 用ポップアップモーダルウィジェット.

ElementsKit ポップアップ ビルダーを使用して Elementor モーダルにカスタム デザインを追加する方法

これで、WordPress でテキストの変更、位置の変更、アニメーション化など、モーダル ウィンドウをカスタマイズする方法がわかりました。しかし、見た目はまだ少し退屈ですよね? 他の WordPress Elementor モーダル ポップアップと同じです。

ページと同じようにモーダル ウィンドウにカスタム画像、ビデオ、その他のウィジェットを追加できれば、とても素晴らしいでしょう。 ElementsKit を使用して、任意のカスタム デザインをモデルに追加できます。

次の手順に従って、モーダルで目的のカスタム デザインを簡単に作成します。

• コンテンツ > コンテンツ > に移動します。 オンにする テンプレートを有効にする
• モーダルボタンをクリックし、モーダルが開いたら、 編集オプション を開くには ウィジェットエリア

• ウィジェットエリアが開いたら、次のことができます。 検索 あらゆるウィジェットの場合 > ドラッグアンドドロップ > アップデート に 保存。

たとえば、ビデオを追加する場合は、ウィジェット領域でビデオを検索し、ドラッグ アンド ドロップしてモデルに追加して更新します。これで、ビデオがモーダル ウィンドウに表示されるはずです。

あらかじめ作成された ElementsKit セクションを使用して美しいモーダルを作成する

モーダル ポップアップのデザインを一から作成する時間がありませんか? 心配はいりません。ElementsKit ポップアップ ビルダーには、視聴者にメッセージを強調する魅力的なモーダルを作成するために選択できる多くの組み込みセクションが用意されています。

ElementsKit の組み込みウィジェットを使用するには、以下の手順に従います。

• クリックしてください 編集オプション モーダル上で  を開くには ウィジェットエリア
• EK ボタンをクリックして、事前に作成されたセクションを含む別のウィジェット ウィンドウを開きます。

• > セクション > に移動します。 選ぶ 好きなセクション > 入れる

• 挿入後にできることは、 変化 好みに応じて画像、テキスト、または背景色を選択し、 アップデート.

そして最終結果がこちらです！

ElementsKit は 60 個以上のウィジェットと 500 個以上の Ready セクションを提供します。 ElementsKit について詳しく見る そしてそれらを使用してウェブサイトを強化する方法。

ElementsKit を使用してモーダルに Contact Form 7 を追加する

前にも述べたように、モーダルはニュースレターの購読を増やし、ユーザー データを収集するのに効果的です。しかしそのためには、モーダルに問い合わせフォームを追加する必要がありますよね? 

パニックにならないでください。ポップ ウィンドウに問い合わせフォームを追加するために別の WordPress ポップアップ プラグインは必要ありません。 ElementsKit WordPress プラグインは、オールインワンのポップアップ メーカー プラグインです。

以下の手順に従って、ElementsKit ポップアップ メーカー プラグインを使用して人気のある Contact Form 7 をモーダルに追加します。

これらの手順を実行する前に、以下のものが作成されていることを確認してください。 Contact Form 7 を使用した Web サイト上の問い合わせフォーム、Elementor Page Builder、および ElementsKit。

お問い合わせフォームを作成するには、以下のビデオチュートリアルもご覧ください。

始めましょう。

• に行く コンテンツ > コンテンツ > オンにする テンプレートを有効にする
• クリックしてください 編集オプション を開くには ウィジェットエリア
• 検索 お問い合わせフォーム、 ドラッグアンドドロップ 追加したいセクションに移動します。
• 拡大する お問い合わせフォーム7のスタイルオプション
• から選択してください 既成の 形と アップデート.

ここには、メール リストを強化するための問い合わせフォームを備えたモーダル ポップアップがあります。

深いコーディング知識がなくてもカスタム ウィジェットを作成できることをご存知ですか?構築方法を確認する ElementsKit を使用するとコードなしで簡単にカスタム ウィジェットを作成できます.

WordPress Elementor モーダルポップアップを追加するための効果的なヒント

WordPress モーダルポップアップは、ユーザーエンゲージメントを大幅に強化し、重要なメッセージを伝え、訪問者からの特定のアクションを促すことができます。ここにあります WordPress サイトにインパクトのあるモーダル ポップアップを実装するための 7 つの効果的なヒント。

1️⃣ 信頼できるプラグインを選択する

Elementor や ElementsKit など、適切に管理されている WordPress モーダル プラグインを選択して、Web サイトにモーダル ウィンドウを作成します。

2️⃣ 明確な目標を定義する

メールの収集、オファーの宣伝、重要な情報の伝達など、WordPress モーダル ポップアップの目的を明確に説明します。

3️⃣ タイミングが重要

時間遅延、スクロールの深さ、または終了インテントなどのトリガーを使用して、適切な瞬間にポップアップを表示します。これは、ページ読み込みの即時の中断を回避するのに役立ちます。

4️⃣ モバイルの応答性

さまざまなデバイスでポジティブなエクスペリエンスを提供できるように、WordPress モーダル ポップアップがモバイル フレンドリーであることを確認してください。

5️⃣ユーザーエクスペリエンスを考慮したデザイン

高品質のコンテンツを使用して、簡潔で視覚的に魅力的な WordPress モーダル ポップアップをデザインします。コンテンツに興味のないユーザーのために、ポップアップを閉じるための簡単にアクセスできるオプションを含めます。

6️⃣ 最適化のための A/B テスト

A/B テストを実装して、バリエーションを作成し、視聴者にとって最も効果的な要素を特定することで、WordPress のモーダルを改良します。

7️⃣ プライバシー規制の遵守

WordPress モーダル ポップアップが、プライバシー ポリシーの透過的なコミュニケーションやデータ収集に対する明示的な同意の取得などのプライバシー規制に準拠していることを確認します。

よくある質問

まとめ

おめでとうございます！これで、WordPressでElementorポップアップモーダルを作成する方法がわかりました。 エレメンターアドオン簡単なポップアップ作成プラグイン、ElementsKit Pro、Elementor ページ ビルダーを使用して、お問い合わせフォームのポップアップを作成し、WordPress サイトで簡単にカスタマイズできます。

ここで止まらないでください。WordPress ポップアップ モーダルを Web サイトでどのように使用できるか、実験を続けてください。ElementsKit を使用して WordPress ポップアップを作成する際にサポートが必要な場合は、以下にコメントを残してください。