Gutenberg を使用して WordPress でポップアップを作成する方法

インターネットを閲覧中に突然ポップアップが表示されたことはありませんか? ウェブページを閲覧中にオーバーレイで表示されるポップアップ ウィンドウです。 

こうしたポップアップは、役に立つ情報やお得な情報を提供してくれるなど、非常に役立つこともあります。しかし、少々煩わしく、邪魔に感じることもあります。

But from a website owner’s point of view, popups have turned out as a powerful way to capture attention, promote offers, and generate leads.

したがって、ユーザーを煩わせることなく、同時にユーザーの関心を引く適切なポップアップを作成することが重要です。

To help you with this, we will walk you through each step of setting up effective popups tailored to your website’s goals. By the end of this guide, you’ll have the easiest way to create popups that not only attract attention but also enhance user experience.

ウェブサイト上のポップアップとは何ですか?

ポップアップは、ユーザーの注意を引くために、通常はオーバーレイとして Web ページ上に表示される小さなウィンドウです。これらのウィンドウには、プロモーション広告、サブスクリプションのオファー、通知、CTA などのさまざまな形式のコンテンツを含めることができます。 

ポップアップでは、ページに入ったりページから出たり、ボタンをクリックして閉じたり、フォームに入力したりするなどの操作が必要になることがよくあります。ポップアップは、ページの他の部分よりも目立つように設計されており、すぐに操作を促します。

人々は通常、ウェブサイトでポップアップをいつ使用するのでしょうか?

ポップアップは、ユーザーエンゲージメントとコンバージョンに関連する特定の目標を達成するために最もよく使用されます。Web サイトでポップアップが使用される一般的なシナリオは次のとおりです。

• に リードを獲得する または メールリストを作成する サブスクリプションで。
• 限定セールを宣伝する、割引、または期間限定オファー。
• 新製品を発表する、機能、またはメジャーアップデート。
• 提供する 重要なお知らせ 訪問者に警告するため。 
• 訪問者にお願いする アカウントを登録する ウェブサイトで。
• に フィードバックを収集する または 調査を実施する 観客の間で。
• 見せる クッキーの同意 または プライバシーポリシー 通知。
• ユーザーを イベントに登録する、ウェビナー、またはワークショップ。

These strategic uses of popups help enhance user engagement and conversion, but it’s essential to implement them thoughtfully to avoid disrupting the user experience.

Gutenberg で WordPress ポップアップを作成する方法

Gutenberg ブロック エディターを使用して WordPress にポップアップを追加する方法に関するこのチュートリアル ガイドの核心部分に進みましょう。

デフォルトの Gutenberg エディターにはポップアップ ビルダーが付属していません。そのため、ブロック エディター用の WordPress ポップアップ プラグインを選択する必要があります。このチュートリアルでは、GutenKit プラグインを使用しました。

GutenKitはブロックエディタープラグインです Gutenberg 専用に設計されたポップアップ ビルダーが付属しています。このポップアップ ビルダーを使用すると、Gutenberg でのポップアップの作成がこれまで以上に簡単になります。

WordPress エディターで Gutenberg ポップアップを作成する手順を次に示します。

Gutenberg用のWordPressポップアッププラグインをインストールして有効化する

GutenKit ポップアップ ビルダーをインストールするには、Web サイトに GutenKit ブロック エディター プラグインがインストールされている必要があります。Web サイトでポップアップ ビルダーをシームレスに使用するために必要なプラグインとテーマは次のとおりです。

☑️前提条件となるプラグイン:

• GutenKit 無料版
• または、 GutenKitプロ版

☑️ テーマ: Hello Blocksテーマ または任意の WordPress ブロック テーマ。

GutenKitプラグインをインストールしたら、 GutenKit > モジュール. 見つける ポップアップビルダー をクリックして、 インストール button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

任意のGutenbergブロックを使用してWordPressのポップアップをデザインする

次に、次の場所に移動します GutenKit > ポップアップ そしてクリックしてください 新しいポップアップを作成 ポップアップを作成するエディターを開きます。

次に、ブロックを使用してエディターでポップアップを構築できます。

GutenKit ポップアップ ビルダーを使用すると、任意の Gutenberg ブロックを使用してポップアップをデザインできます。 

65 以上の GutenKit ブロックと 18 以上のモジュールを使用して、サイト用のモダンで洗練されたポップアップをデザインできます。

これには、見出し、段落、ボタン、画像、さらにはビデオなどのブロックがポップアップに含まれており、高度なカスタマイズが可能になります。 

あらかじめデザインされたテンプレートを使用して Gutenberg ポップアップを作成する

On the other hand, instead of starting from scratch, you can save time and effort by using the ready designs.  With over 500+ patterns and templates available in GutenKit’s Template Library, you can quickly create professional-looking popups in just minutes.

既製のデザインをインポートするには

1. Gutenberg 用のポップアップ ビルダー エディター。
2. クリックしてください テンプレートライブラリ ボタン。
3. パターンを選択 図書館から。

After that, you can change the content and customize styles to align with your campaign. It’s a fast and hassle-free way to get stunning popups up and running!

スマート条件を使用して、ウェブサイトに Gutenberg ポップアップを表示します

You have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

そこから、  + 条件を追加 button and set the rules for where you want your popup to be displayed. It’s that easy!

GutenKit ポップアップ ビルダーを使用すると、含める条件と除外条件を設定できます。

• 条件を含める: 含める条件を使用すると、Web サイト全体、特定のページ、またはアーカイブ ページにポップアップを追加できます。
• 除外条件: 除外条件を使用して、サイト上のどこにポップアップを表示しないかを決定できます。

スマート条件を使用して Web サイトにポップアップを表示する方法は次のとおりです。

ウェブサイト全体にGutenbergポップアップを表示する

ウェブサイトのすべてのページにポップアップを表示するには、 

👉 ステップ1： ポップアップに新しい条件を追加します。

👉 ステップ2： 「含める」条件を選択します。

👉 ステップ 3: すべてのページにポップアップを表示するには、「サイト全体」を選択します。

特定のページでポップアップを表示しないようにする

There might be times when you don’t want popups to appear on certain pages. You can do it with 除外 条件。 

👉 ステップ 1: ポップアップに新しい条件を追加します。

👉 ステップ 2: 「除外」条件を選択します。

👉 ステップ 3: 「単数形」を選択します。

👉 ステップ 4: ポップアップが表示されないようにするページを選択します。

特定のページにのみポップアップを表示する

If you’re aiming for more focused campaigns, you might want to display popups on certain pages of your website.

👉 ステップ 1: ポップアップに新しい条件を追加します。

👉 ステップ 2: 「含める」条件を選択します。

👉 ステップ 3: 「単数形」を選択します。

👉 ステップ 4: ポップアップを表示するページを選択します。

また、ポップアップが他のページに表示されないようにするには、 除外条件をクリックし、サイト全体を選択して、ウェブサイト全体でポップアップが表示されないように制限します。

アーカイブページ上のWordPressポップアップ

条件を設定することで、WordPressのアーカイブページにポップアップを表示することもできます。そのためには、 条件を追加 > 含める > アーカイブ > アーカイブを選択 ページ。

一方、特定のアーカイブページでポップアップが表示されないようにしたい場合は、除外条件を設定できます。同じ手順に従ってください。 条件を追加 > 除外 > アーカイブ > アーカイブを選択 ページ。

Gutenbergポップアップをいつどのように起動するかを決定します

ウェブサイトのページにポップアップを表示する方法を完全に制御できます。ポップアップをページの読み込み時、終了意図時、またはインタラクション後に表示するかを決定できます。

GutenKitポップアップビルダーでは、ウェブサイト上でポップアップをトリガーする方法を選択できます。 コンテンツ > オープンイベント ブロックエディターで..

これは、Gutenbergでさまざまな種類のポップアップを開発するのに役立ちます。 WordPressポップアップの種類 Gutenberg では、GutenKit Popup Builder を使用してデザインできます。

1. エントリーポップアップ

• 引き金： ページがユーザーのブラウザに読み込まれるとすぐにトリガーされます。
• 目的： ユーザーがウェブサイトにアクセスするとすぐに関心を引きます。
• 使用事例： 割引やイベントの告知でユーザーを歓迎したり、すぐにサブスクリプションを依頼したりします。

💡 どのようにトリガーしますか？「ページ読み込み時」

2. 終了意図ポップアップ

• 引き金： ユーザーがタブまたはブラウザを閉じるときにアクティブになります。
• 目的： サイトを離れる前にユーザーを捕捉します。
• 使用事例： 割引、ニュースレターの購読、特別オファーなどを提供します。

💡 どのようにトリガーしますか？「ページ終了意図」

3. スクロールトリガーポップアップ

• 引き金： ユーザーがページを下にスクロールするとトリガーされます。
• 目的： ユーザーがページの特定の部分を閲覧した後に、プロモーション特典を提供したり、フィードバックを求めたりします。
• 使用事例： 追加コンテンツ、サインアップフォーム、または期間限定オファーを宣伝します。

💡 どのようにトリガーしますか？「ページをスクロールしました”。

その後、「ページスクロールの進行状況 ユーザーがページを下にスクロールしたときにポップアップが表示されるポイントを決定します。

4. ユーザーの非アクティブポップアップ

• 引き金： ユーザーが一定時間非アクティブになったとき。
• 目的： サイト上で一定期間アイドル状態だったユーザーを再び引き付けます。
• 使用事例： ユーザーに特別オファーを思い出させ、行動を促す、またはカートに残っている可能性のあるアイテムを提案します。

💡 どのようにトリガーしますか？「非アクティブ後”。

次に、 ユーザーの非アクティブ時間 ユーザーが非アクティブになった後にポップアップがいつ表示されるかを決定する秒数。

5. クリック時のポップアップ

• 引き金： ページのセクションに対するユーザーの操作によってアクティブ化されます。
• 目的： ユーザーが特定のページ要素 (ボタンや画像など) をクリックしたときにコンテンツが表示されます。
• 使用事例： 製品の詳細、追加のフォームの送信、ビデオの再生などによく使用されます。

💡 どのようにトリガーしますか？「カスタムセレクタークリック”。

今追加 セレクタクラス セクションについて。 

Gutenberg で利用できるこれらのさまざまな種類の WordPress ポップアップを使用すると、目標に合わせてユーザー エクスペリエンスを向上させる最適な形式を柔軟に選択できるため、Web サイトがより魅力的になり、注目を集めてコンバージョンを促進する効果が得られます。

キャンペーンのポップアップの有効化をスケジュールする

場合によっては、ポップアップを使用して Web サイトでキャンペーンを宣伝することがあります。これらのキャンペーンには開始日時が決まっています。そのため、ポップアップをアクティブにするには、その正確なタイミングに合わせる必要があります。

それは、 高度なルール. 

➡️ ステップ1： ボタンをオンに切り替えて「スケジュールの日付と時刻”。

➡️ ステップ 2: をセットする 時間 ポップアップをアクティブにしたいとき。

➡️ ステップ3: を選択してください 日付 ポップアップキャンペーン開始のお知らせです。

WordPress 用の GutenKit ポップアップ ビルダーを選択する理由

の GutenKit ポップアップビルダー は、Gutenberg ブロック エディターとシームレスに統合され、ユーザーに直感的で高度にカスタマイズ可能なエクスペリエンスを提供することから、WordPress でポップアップを作成するための最有力候補として際立っています。WordPress サイトに最適なソリューションである理由は次のとおりです。

✅ シームレスな Gutenberg 統合:

GutenKit is built specifically for Gutenberg, meaning you can design and manage popups using the same block-based interface you’re already familiar with. This eliminates the need for external popup builders or coding, streamlining the entire process and allowing for a cohesive experience.

✅ 素早いセットアップのための事前にデザインされたテンプレート:  

   GutenKit には、プロがデザインしたさまざまなポップアップ テンプレートが付属しており、ブランドのスタイルに合わせて簡単にカスタマイズできます。これらのテンプレートは時間と労力を節約し、ポップアップを一から作成したくないが、洗練されたモダンなデザインを求める人のための出発点となります。

✅ 高度な表示ルール: 

GutenKit を使用すると、ポップアップが表示されるタイミングと場所を完全に制御できます。ポップアップを表示するページに基づいて、正確な表示条件を設定できます。 

これにより、ポップアップが最適なタイミングで表示されるようになり、邪魔にならずにエンゲージメントが向上します。

✅ 複数のトリガー オプション:

GutenKit は、ページの読み込み時、一定時間後の遅延、スクロール時、ユーザーがページを終了しようとしているときなど、ポップアップを表示するための複数のトリガー オプションを提供します。 

また、ユーザーが特定の要素を操作したときにポップアップをトリガーして、ユーザー ジャーニーを完全に制御することもできます。

✅ 柔軟なカスタマイズ

GutenKit ポップアップ ビルダーを使用すると、アニメーションやスタイルからタイポグラフィや色まで、ポップアップを幅広くカスタマイズできます。 

さらに高度なスタイル設定のためにカスタム CSS を追加して、ポップアップが Web サイトの独自のデザインやブランドと一致するようにすることもできます。

✅ レスポンシブでモバイルに最適化 

GutenKit で作成されたポップアップは完全にレスポンシブでモバイル フレンドリーなので、どのデバイスでもポップアップが美しく表示されます。入口と出口のアニメーション、背景スタイル、オーバーレイの色などを使用して外観をカスタマイズできます。

✅ 軽量でパフォーマンス重視 

他の多くのポップアップ プラグインとは異なり、GutenKit は軽量でパフォーマンスが最適化されるように設計されています。 

つまり、ポップアップによってサイトの速度が低下することを心配する必要がなく、これはユーザー エクスペリエンスと SEO の両方にとって重要です。

まとめ

これらの手順に従うことで、WordPress サイトにポップアップを簡単に作成して表示できるようになります。GutenKit ポップアップ ビルダーを使用すると、動的なポップアップを WordPress サイトに簡単に統合して、視聴者と効果的にコミュニケーションをとることができます。 

このガイドから得た洞察を活用して、さまざまなポップアップ戦略を試し、サイトの可能性を最大限に引き出しましょう。

Popup Builder と同様に、GutenKit には 65 以上のブロック、18 以上のモジュール、500 以上のデザインが用意されており、Gutenberg ブロック エディターで高度なページ ビルダー エクスペリエンスを実現できます。今すぐ GutenKit をインストールして、WordPress で夢の Web サイトを構築しましょう。