Elementorを使用してボタンクリックでポップアップを開く方法は？ [2022]
公開: 2022-05-13ボタンをクリックするとポップアップが開くと、訪問者にどのように魅力的なWebサイトが表示されるのでしょうか。 ポップアップを開くようなインタラクティブなボタンが必要な場合は、最も人気のあるWebサイトビルダーであるElementorにさまざまな方法があります。 今日は、コーディングせずにボタンをクリックするだけで見事なポップアップを簡単に作成する方法を紹介します。
Elementorモーダルポップアップを備えたボタンの5つのベストユースケース
チュートリアルを開始する前に、ボタンをクリックするとElementorモーダルポップアップを開くことで、どのようなメリットが得られるかを見てみましょう。 基本的に、この種のインタラクティブなモーダルポップアップは、 Webサイトのマーケティングキャンペーンに使用されます。 これらとは別に、ボタンクリックでポップアップを開くという非常に多くの用途の広いユースケースもあります。 モーダルポップアップの上位5つのユースケースは次のとおりです。
1.ビジネスのリードを獲得するため
あなたのビジネスを円滑に運営し、会社の成長を拡大するには、リードが必要です。 リードを育成することで、あなたはそれらをあなたの常連客に変えることができます。 そして、ウェブサイトはリードを獲得するための最良の媒体です。 ボタンをクリックするだけでポップアップが開くと、リードの名前、電話番号、電子メール、その他の詳細を簡単に収集できます。
2.電子メールサブスクリプションの収集
通常、電子メールサブスクリプションを収集するための基本的なボタンを追加すると、ユーザーは新しいWebページに移動します。 これを行う代わりに、ボタンをクリックするだけでポップアップを開くことができます。そうすれば、ユーザーは現在のWebページを離れる必要がなくなります。 この方法により、驚くほど電子メールのサブスクリプションが増加します スムーズに数えます。
3.マーケティングプロモーションと販売
あなたがあなたのウェブサイトを通してマーケティングプロモーションを実行しているとき、ボタンクリックでポップアップが開き、あなたのサイトにインタラクティブな外観を与え、売り上げを増やすことができます。 Elementorの1つのポップアップに画像、フォーム、特別割引クーポンなどを追加できます。 プロモーションセクションと一緒にあなたのウェブサイトを不要にすることなく、これをボタンクリックで開くポップアップに置き換えることができます。
4.エキサイティングなアナウンスを共有する
グランドリリースやその他のエキサイティングな発表やプロモーションを発表する予定の場合は、ボタンをクリックするとポップアップが開くのが最善の方法です。 それはあなたのウェブサイトに見事な外観を与え、あなたは仮想の紙吹雪や他のお祝いの装飾でウェブサイトを飾ることができます。 さらに、「近日公開」の大きなニュースを発表する予定の場合は、ボタンをクリックするとポップアップが開き、話題を作成するのに役立ちます。
5.コンテンツロックとして使用
多目的Webサイトを使用している場合、年齢、メンバーシップ、サブスクリプションなどに基づいてコンテンツに制限を設ける必要がある場合があります。 制限されたコンテンツをWebサイトのセクションに直接提供すると、アクションあたりのクリック数が確実に減少します。 これの代わりに、ボタンをクリックするだけですぐに開く魅力的なポップアップを作成できます。
Elementorがボタンにポップアップを作成するのに最適なプラットフォームである理由
Webサイトでは、WordPressのボタンクリックでポップアップを開く方法は複数あります。 そのための1つの方法は、カスタムコーディングまたは専門家の採用です。 あなたが技術に精通していない場合は、コードを実行したり、専門家を雇ったりすると、大金がかかる可能性があります。 しかし、最も人気のあるWordPress WebサイトビルダーであるElementorを使用すると、コーディングせずにそれを行うことができます。
ボタンをクリックするとポップアップが開くポップアップを作成するには、ドラッグアンドドロップするだけで作成できます。コーディングは必要ありません。 さらに、 Elementor Popup Builderの助けを借りて、ボタンをクリックするとポップアップが開くのを作成するのはとても簡単なので、すべて自分で作成できます。 Elementorは、無制限のカスタマイズとパーソナライズオプションを提供します。 したがって、それをWebサイトのブランド価値に合わせて、ボタンをクリックするとすぐに開く任意のタイプのポップアップを作成できます。
コードなしのチュートリアル：ボタンクリックでElementorモーダルポップアップを開く方法は？
それでは、チュートリアルに入り、ボタンをクリックするとポップアップが開くようになります。 Elementorポップアップの作成を開始する前に、必要なのは5分間の集中力であり、この簡単なチュートリアルをステップバイステップで実行します。
ステップ1：ElementorPROを使い始める
Elementorを使用してボタンクリックで開くモーダルポップアップを作成することを計画している場合は、 ElementorPROを入手する必要があります。 ElementorPROの独自機能であるElementorPopupBuilderを使用すると、ボタンをクリックするだけで開くポップアップを即座に作成できます。 Elementorには、 49ドルからの多目的な料金プランが付属しています。 Elementor PROプラグインを入手したら、WordPressWebサイトにインストールしてアクティブ化します。
ステップ2：ElementorPopupBuilderを使用してテンプレートを作成する
次に、ポップアップ用のテンプレートを作成するときは、ボタンをクリックすると開きます。 これを行うには、WordPressダッシュボードに移動し、 [テンプレート]→[ポップアップ]に移動します。 タブをクリックすると、すぐにElementorポップアップビルダーに移動します。 次に、[新しいポップアップの追加]ボタンをクリックします。 ポップアップが表示されます。 テンプレートタイプがポップアップとして自動選択されます。 必要に応じてテンプレート名を付けて、[テンプレートの作成]ボタンをクリックできます。
次に、 ElementorTemplateLibraryにリダイレクトされます。 さまざまなカテゴリで利用できる100以上のポップアップコレクションがあります。 WordPress Webサイトの要件に基づいて、適切なElementorポップアップテンプレートを選択します。 テンプレートをクリックして、簡単なプレビューを取得します。 次に、[挿入]ボタンをクリックして、ボタンをクリックするとモーダルポップアップが開きます。
ステップ3：ポップアップテンプレートを構成およびパーソナライズする
その後、Elementorエディターパネルが開き、左側にすべての構成オプションが表示されます。 そこから、ボタンをクリックするだけで開くポップアップを簡単にカスタマイズできます。 BoxedまたはFullWidthを使用してモーダルポップアップを保持できます。 同様に、モーダルポップアップの高さ、列のギャップ、列の位置、垂直方向の配置、オーバーフロー、HTMLタグなどを構成できます。 幅の種類が異なれば、構成の種類も異なります。
モーダルポップアップコンテンツをカスタマイズするには、テキスト、画像、またはボタンをクリックするだけです。 すぐに左側の編集パネルが開きます。 ポップアップコンテンツ、フォントファミリなどを簡単に変更できます。また、複数の電子メール出力セクション、ボタンの高さ、幅、色、テキストなどを追加できます。 送信後のアクションの設定、送信の管理、カスタム電子メールコンテンツの追加、受信者の電子メール、送信者の電子メールIDなどに使用できるオプションがあります。すべての変更を行ったら、[公開]ボタンをクリックします。
ステップ4：条件とトリガーを設定する
WordPressWebサイト全体または選択したページのボタンクリックでポップアップが開くのを利用できます。 選択したページからElementorポップアップを含めたり除外したりすることもできます。 これらの構成はすべて、 [条件]タブで利用できます。
[トリガー]タブから、ボタンをクリックしたときにポップアップを開くタイミングを設定する必要があります。 ボタンクリックを使用してポップアップをプレビューしたいので、切り替えて「クリック時」を有効にします。 「高度なルール」から、ポップアップを表示する相手、フォームに到着したときに表示する相手などの条件を構成できます。 次に、[保存して閉じる]ボタンをクリックします。 これは、Elementorポップアップテンプレートを簡単に作成できる方法です。 次に、WordPressダッシュボードに戻ります。
ステップ4：必要な場所にElementorボタンを追加する
次に、ポップアップを設定するページを開き、ボタンをクリックすると開きます。 新しいページを作成する場合は、 [ページ]→[新規追加]に移動します。 このチュートリアルでは、ポップアップモーダルをElementorボタンに接続します。 Elementorボタンをページにドラッグアンドドロップします。
ボタンの外観やテキストなどをパーソナライズして、Webサイトのブランドカラーに合わせて調整します。 次のステップは、ボタンをポップアップモーダルにリンクすることです。 これを行うには、 「リンク」フィールドから「動的タイプ」をクリックし、「アクションからポップアップ」を選択します。 次に、ポップアップの横にある[設定]アイコンをクリックして、以前に作成したポップアップテンプレートを選択します。 それでおしまい！
Elementorボタンをクリックするとポップアップの最後の一瞥が開きます
これは、ボタンをクリックするだけで開くポップアップを簡単に作成できる方法です。 他のカスタマイズを行った後、ページを公開します。 次にプレビューに移動して、ボタンをクリックするとポップアップがどのように開くかを確認します。
異なるページに同じボタンを使用する場合は、ボタンをコピーして新しいWebページに貼り付けます。 また、 Elementorポップアップテンプレートのショートコードをコピーして、ボタンをクリックするだけでポップアップを追加したい場所で使用できます。
Elementorユーザーの必須アドオンのボーナス
Essential Addons For Elementorは、 100万人以上のアクティブユーザーと85人以上のユニークなウィジェットを備えた最も強力なElementorライブラリです。 また、クリエイティブボタンウィジェットには、より用途の広いデザインと顧客向けの多目的な使いやすさが備わっています。 Essential Addonsボタンウィジェットを使用している場合は、Elementorボタンと同様に、ボタンをクリックするとポップアップが開くように簡単に作成できます。
Elementorはウェブサイトの開発を容易にしました。 ボタンをクリックするとポップアップが開くように、WordPressWebサイトにさらに魅力的で用途の広い機能を作成できます。 これでこのチュートリアルは終了です。 このチュートリアルが役に立った場合は、他の人と共有することを忘れないでください。
FacebookコミュニティのElementorを使用して、ボタンをクリックするとポップアップが開く方法を教えてください。 また、購読する これらの種類のチュートリアル、ヒント、コツについて最新情報を入手するためのブログ。