A subscription popup triggered by a click can effectively increase your website’s email sign-up rate while enhancing user experience. Elementor offers powerful tools for creating and customizing popups, making it easy to set up a “click-to-open” 購読ポップアップ.このチュートリアルでは、ユーザーが特定のリンクやボタンをクリックしたときにのみ表示される購読ポップアップを作成するための各ステップを説明します。
はじめに
Subscription popups can be a great way to engage visitors and encourage them to sign up for your newsletter, promotions, or updates. Unlike auto-triggered popups, which may interrupt the user experience, a click-triggered popup opens only when the user is ready to see it, making it more user-friendly and likely to convert. Let’s explore how you can create a subscription popup in Elementor that opens upon clicking a link or button.
ステップ 1: 購読ポップアップテンプレートの作成
- アクセス・エレメントまたはポップアップ・テンプレート
- WordPressのダッシュボードにログインし、次の場所に移動します。 Templates > Popups.
- をクリックしてください。 新しいポップアップを追加 をクリックして新しいポップアップテンプレートを作成します。
- ポップアップテンプレートの名前と作成
- Give your popup a relevant name, such as “購読ポップアップ” then click テンプレートの作成.
- ポップアップレイアウトの選択とデザイン
- Elementorは、あらかじめデザインされた様々なポップアップテンプレートを表示します。あなたのニーズに合ったものを選択するか、または ブランクテンプレート.
- クリック 挿入 をクリックして、選択したテンプレートをElementorエディタで開きます。をクリックします。x「をクリックすると、空白のテンプレートページに移動します。
- 購読フォームの追加
- をドラッグします。 フォーム ウィジェット をポップアップに追加して、購読フォームを追加します。
- 必要な情報を取得するためにフォームフィールドを設定します：
- 名称 (オプション） - よりパーソナライズされた体験のために。
- 電子メール (必須) - サブスクリプションの主要情報として。
- 登録の可能性を高めるために、Eメール欄はシンプルにしましょう。
- フォーム送信アクションの設定
- Update the form’s submit button text to something engaging, like “Subscribe Now” or “Get Updates.”
- での 送信後のアクション セクションで 電子メール または メールチンプ (if you’re using MailChimp for email marketing).
- 投稿後のアクションをカスタマイズできます。 成功通知.
- ポップアップのスタイル
- Use Elementor’s styling options to customize the form’s colors, フォントそして スペーシング to match your website’s branding.
- To draw attention, add a headline such as “Stay Updated!” or “最新ニュースを購読. “
- ポップアップの保存と公開
- Once you’re happy with the design, click 出版. You’ll now be prompted to configure the popup’s display settings.
ステップ 2: ポップアップの表示とトリガーの設定
- 表示条件の設定
- をクリックしてください。 条件追加 を選択します。 サイト全体 またはポップアップにアクセスさせたい特定のページを指定します。
- トリガーの設定
- Turn off any automatic triggers (like “On Page Load” or “On Scroll”). This step ensures that the popup only appears when the user clicks a designated link or button.
- ディスプレイ設定の保存
- をクリックして設定を確認します。 保存して閉じる.
ステップ 3: ポップアップをトリガーするリンクまたはボタンの作成
- リンクを貼りたいページや投稿を編集します。
- トリガーリンクまたはボタンを追加したいページまたは投稿をElementorで開きます。
- ポップアップトリガー用のリンクまたはボタンの追加
- を挿入します。 ボタン or a text link widget to serve as the popup trigger. Use engaging text like “Sign Up Now” or “Subscribe for Updates.”
- ポップアップトリガーを画像、アイコン、その他のクリック可能な要素に添付して、見た目をカスタマイズすることができます。
- ポップアップを開くトリガーアクションの設定
- リンクまたはボタンを選択し リンク設定 を追加します。
- リンクタイプを ダイナミックタグを選択します。 Actions > Popup をドロップダウンリストから選択します。
- ポップアップのアクションと名前を選択します。
- 選択 ポップアップを開く をアクションとして選択し、先ほど作成した購読ポップアップの名前を選択します。
- ユーザーが手動でポップアップを閉じることができるようにしたい場合は、ポップアップを閉じるアクションを設定することもできます。
- 変更を保存
- クリック 更新 をクリックして変更を保存してください。
ステップ 4: ポップアップのテスト
- ページのプレビュー
- ポップアップトリガーを追加したページにアクセスし、リンクまたはボタンをクリックして、購読ポップアップが正しく表示されることを確認します。
- チェックフォームの提出
- テストエントリーを送信し、フォームが期待通りに動作することを確認します。電子メール通知を送信するようにフォームを設定した場合は、電子メールが受信されていることを確認します。
- MailChimpのようなツールに接続している場合、テスト購読が正しいリストに追加されたことを確認します。
その他のヒントと推奨事項
- アニメーションの追加: In the popup’s advanced settings, you can add entrance and exit animations (such as fade-in or slide-in) to make the popup appear smoother and more engaging.
- モバイルに最適化: Switch to mobile view in the Elementor editor and adjust the popup’s design for mobile screens to ensure a seamless experience for mobile users.
- 周波数制御:複数のポップアップを表示する場合は、ユーザーに負担をかけないように頻度を制限してください。
- プライバシーステートメント：をご利用ください。 テキスト フォームの一番下に短いプライバシーに関する免責事項を追加し、ユーザーのEメール情報が安全に保管されることを保証します。
結論
Elementorでクリックトリガーの購読ポップアップを作成すると、ポジティブなユーザーエクスペリエンスを確保しながら、ウェブサイトのメール登録率を効果的に高めることができます。自動トリガーポップアップとは異なり、このアプローチではユーザーが参加する準備ができたときにのみポップアップを表示するため、押し付けがましくなく、コンバージョンにつながる可能性が高くなります。これらのステップに従うことで、ブランドと一致し、ユーザーとのインタラクションを促進する購読ポップアップを簡単にデザイン、カスタマイズ、設定することができます。よく練られ、戦略的に配置されたポップアップは、メールリストを構築し、オーディエンスとのつながりを維持するのに役立ちます。