WordPressWebサイトにポップアップを自由かつ迅速に追加する方法

ウェブサイトにアクセスしたときに、突然画面に画像やメッセージが表示されたことがありますか？これが、Webサイトのポップアップまたは通知ウィンドウです。

ポップアップは人気があり効果的なマーケティング戦略であり、多くのビジネスランナーやウェブサイトの所有者によって使用されています。そのようなポップアップをWordPressに追加するには、無料のプラグインを使用してすばやく簡単に作成できます。あなたが専門家でなくても、私たちの指示に従うのにたった10分しかかかりません。

なぜあなたはビジネスウェブサイトでポップアップを使うべきですか？

下の画像は、ビジネスWebサイトのポップアップの例です。見栄えがいいですね。

ポップアップは見事なだけでなく（うまくマッチして魅力的なものをデザインすることができれば）、次のような他の多くの利点もあります。

• 重要な情報、販売およびマーケティングキャンペーンを宣伝する…
• 行動を呼びかけ、コンバージョン率を上げる
• リードを生成する

PopupBuilderプラグインを使用してWordPressにポップアップを追加する

WordPress Webサイトにポップアップを追加するには、信頼できるWebデザイン会社またはコーダーを雇うことができます。ただし、時間とお金を節約するには、プラグインが最適なオプションです。そこにあるたくさんのポップアッププラグインの中で、ポップアップビルダーは最も使いやすく効果的かもしれません。

これは無料のプラグインであり、wordpress.orgで入手できるため、ダッシュボードでプラグインをインストールしてアクティブ化するだけです。

終了したら、以下の手順に従ってください。

ステップ1：ポップアップのタイプを選択します

これで、ポップアップビルダーのサブメニューがダッシュボードに表示されます。そこに移動し、[ニュースの追加]をクリックして、提供されている4つのポップアップタイプのいずれかを選択します。

より良い説明のために、以下の画像は、このプラグインによって提供される4種類のポップアップがフロントエンドにどのように表示されるかを示しています。

必要なタイプを選択したら、次の手順に進みます。

ステップ2：ポップアップにコンテンツを追加する

まず、ポップアップに名前を付けて、管理しやすくします。

ポップアップの種類が異なれば、必要なコンテンツも異なります。それぞれのタイプを掘り下げてみましょう。

Facebookポップアップにコンテンツを追加する

Facebookポップアップを作成するためのインターフェースで、次の情報を入力する必要があります。

1. ポップアップに表示されるメッセージ。読者が対話するように促すために、行動を促す文を使用する必要があります。また、画像やバナーを追加して、より魅力的にする必要があります。
2. FacebookのURLを挿入します。
3. 気まぐれなポップアップのレイアウトを選択します。基本的に、これらのレイアウトはそれほど違いはありません。したがって、それらを試して、お気に入りのものを選択することができます。
4. 必要に応じて、ここをクリックして共有ボタンを非表示にします。

そして、これは私が持っているものです：

画像ポップアップにコンテンツを追加する

ここでは、画像をアップロードするか、画像のリンクを挿入する必要があります。このプラグインはJPG、PNG、GIFをサポートしています。

これは、私のWebサイトのブラックフライデーキャンペーンのために自分で作成した美しいバナーです。

HTMLポップアップにコンテンツを追加する

HTMLポップアップにコンテンツを追加することは、WordPressGutenbergエディターで投稿を書くのと同じです。画像、ビデオ、表、ボタン、引用符など、WordPressエディターがサポートするその他のコンテンツを挿入できます。インターフェースはグーテンベルクエディタに少し似ているので、とてもフレンドリーでネイティブです。

そしてこれはフロントエンドの私のHTMLポップアップです：

サブスクリプションポップアップにコンテンツを追加する

ここには、サブスクリプションフォームに入力してカスタマイズするコンテンツがたくさんあります。ただし、最も注意する必要があるのは、名、姓、電子メールなどのフォームのフィールドであり、それらのプレースホルダーと必須フィールドをカスタマイズします。

その後、下にスクロールして、フォームの背景オプション、入力のスタイル、送信ボタンのスタイルの観点からフォームの表示をカスタマイズし、より魅力的でWebサイトに一致するようにします。

特に、[サブスクリプションが成功した後]セクションで、適切なメッセージ、またはユーザーがサブスクライブした後にユーザーに表示する情報を慎重に選択します。たとえば、これらのサブスクライバーに対して、お礼状、クーポン、ギフト、ギフトカードなどを表示できます。そうすることで、ユーザーの印象を引きずり、エクスペリエンスを向上させることができます。

たとえば、これは私のサブスクリプションメールポップアップです。彼らが提出したら、私はブラックフライデーのセールキャンペーンについての通知を表示し、顧客に買い物に行くように促します。

ポップアップビルダー> [すべてのサブスクライバー]に移動して、サブスクライバーを管理します。

[ニュースレター]タブで購読者にメールを送信することもできます。

コンテンツを追加したら、下にスクロールします。他の多くの設定オプションが表示されます。手順4、5、6の各オプションを掘り下げてみましょう。

ステップ3：ポップアップの表示場所と状態を設定する

表示場所を設定する

[ポップアップ表示ルール]セクションで、ポップアップが表示される場所と表示されない場所を調整する必要があります。

Everywhereを選択して、すべてのページに表示したり、投稿、タグ付け、カスタマイズしたり、特定の場所に表示したりできます。 （？）ツールチップをクリックして詳細を取得することもできます。

たとえば、場所を特定のページとして選択し、 「is」を選択して表示し、表示ページを「Home」として選択します。さらに、[追加]を選択して他の場所を追加できます。

表示条件を設定する

[ポップアップイベント]セクションで、ポップアップが表示される時間を選択します（Webサイトが数秒間読み込まれたとき、ユーザーがどこかをクリックしたときなど）。このプラグインは、次の表示条件をサポートしています。

• 読み込み時：サイトの読み込みが完了してから数秒後にポップアップが自動的に表示されます（[遅延]タブで秒数を追加できます）。

• CCクラスによって設定：ユーザーがポップアップを有効にするためにいくつかのコンポーネントをクリックできるようにします。このコンポーネントは、そのIDに基づいています。この部分は少し複雑なので、ドキュメントを注意深く読んだ方がよいでしょう。

• クリック時： [ CSSクラスで設定]セクションに似ていますが、ポップアップのIDを使用して「ボタン」をインストールして有効にする必要はありません。

代わりに、[オプション]セクションで[デフォルト]を選択すると、プラグインは以下のように[デフォルトクラス]セクションのポップアップのデフォルトクラスを作成します。

カスタムCSSを選択した場合は、自分で作成したクラスを[カスタムクラス]セクションに入力します。

その後、ポップアップのクラスを必要なコンポーネントのCSSに追加します。

たとえば、この投稿では、[追加のCSSクラス]セクションにボタンと必要なクラスを追加しました。

これはフロントエンドでの結果です。

• ホバークリック：コンポーネントにホバーすると、ポップアップが表示されます。 [クリック時]セクションと同じように実行できます。

ステップ4：ポップアップの表示をカスタマイズする

手順3の後、基本的なポップアップが表示されます。ただし、もっと見栄えを良くしたい場合は、[デザイン]セクションまでスクロールしてください。ここでは、インターフェイス、オーバーレイ、背景などのコンポーネントをカスタマイズして、お気に入りとして完璧にすることができます。

それ以上に、寸法セクションで、カスタムモードを選択するか、そのサイズは自動的にその内容を一致させるために応答モードを選択することで、その幅や長さを調整します。

ステップ5：その他の詳細設定をカスタマイズする

これらの詳細設定を使用すると、ポップアップの表示と操作をより詳細に構成できます。

たとえば、 [設定を閉じる]セクションでポップアップウィンドウを閉じる方法を選択できます。 Escキーを押す、閉じるボタンを追加するなど、閉じる方法はたくさんあります。…1つ以上選択してください。

ポップアップを閉じたり開いたりする効果を追加したり、1人のユーザーに表示される時間を調整したりする場合は、…[ポップアップオプション]セクションまでスクロールします。必要なオプションをクリックするだけで、完了です。

無料のPopupBuilderプラグインを使用する場合、下の画像のように黄色で色付けされたUnlockOptionという名前のセクションがプロバージョンの機能であることに注意してください。それらを使用するには、このプラグインの拡張機能をさらに購入する必要があります。

最後に、サイドバーには非常に興味深いオプションがあります。Webサイトに固定ボタンを追加して、クリックしたときにポップアップを表示します。このフローティングボタンは本当に便利で、いつでもどこでも見ることができます。そのデザインも快適で迷惑ではありません。

これは、Webサイトのフローティングボタンです。

または、[無効にする]をクリックして無効にすることもできます。

最後に、[公開]をクリックして完了します。

これで、基本設定から詳細設定までの6つのステップでポップアップが完成しました。あなたは良い仕事をしました！

最後の言葉

ご覧のとおり、WordPressにポップアップを追加することはそれほど複雑ではありません。ディスプレイをカスタマイズするときは、少し我慢する必要があります。これは大変な作業です。

さらに、ウェブサイトのコンバージョン率を上げるために多くのことがあります。効果的なランディングページを作成したい場合は、コンバージョン率の高いランディングページを作成する方法、または製品ページを作成する方法について、さらにいくつかの記事を読むことをお勧めします。

幸運を！