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 popup. This tutorial will walk you through each step to create a subscription popup that only appears when users click a specific link or button.

簡介

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.

Step 1: Create the Subscription Popup Template

1. Access Element or Popup Templates
   • Log in to your WordPress dashboard and navigate to Templates > Popups.
   • 按一下 Add New Popup to create a new popup template.

1. Name and Create Your Popup Template
   • Give your popup a relevant name, such as “Subscription Popup” then click 建立範本.

2. Choose or Design Your Popup Layout
   • Elementor will show you a variety of pre-designed popup templates. Select one that suits your needs, or start with a blank template.
   • 按一下 插入 to open the selected template in the Elementor editor. Clicking on the “x” takes you to the blank template page.

3. Add a Subscription Form
   • Drag the Form widget into the popup to add a subscription form.
   • Configure the form fields to capture necessary information, typically:
     • Name (optional) – for a more personalized experience.
     • Email (required) – as the primary information for a subscription.
   • Keep it simple with just an email field to increase sign-up likelihood.

4. Configure Form Submission Actions
   • Update the form’s submit button text to something engaging, like “Subscribe Now” or “Get Updates.”
   • 在 Actions After Submit section, select Email 或 MailChimp (if you’re using MailChimp for email marketing).
   • Customize the post-submission actions, such as sending a thank-you message or adding a success notification.

5. Style Your Popup
   • Use Elementor’s styling options to customize the form’s colors, fonts以及 spacing to match your website’s branding.
   • To draw attention, add a headline such as “Stay Updated!” or “Subscribe for the Latest News. “

6. Save and Publish the Popup
   • Once you’re happy with the design, click 發表. You’ll now be prompted to configure the popup’s display settings.

Step 2: Configure Display and Trigger Settings for the Popup

1. Set Display Conditions
   • 按一下 Add Condition and choose 整個網站 or a specific page where you want the popup to be accessible.

2. Configure Triggers
   • 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. Save Display Settings
   • Confirm your settings by clicking 儲存與關閉.

Step 3: Create the Link or Button to Trigger the Popup

1. Edit the Page or Post Where You Want the Link
   • Open the page or post where you want to add the trigger link or button in Elementor.
2. Add a Link or Button for the Popup Trigger
   • Insert a 按鈕 or a text link widget to serve as the popup trigger. Use engaging text like “Sign Up Now” or “Subscribe for Updates.”
   • You can attach the popup trigger to an image, icon, or other clickable element for a customized look.

3. Set the Trigger Action to Open the Popup
   • Select the link or button, and go to Link Settings in the Elementor editor.
   • Set the link type to 動態標籤, 然後選擇 Actions > Popup from the dropdown list.

4. Choose the Popup Action and Name
   • 選擇 Open Popup as the action and select the name of the subscription popup you created earlier.
   • You can also set a close popup action if you want users to be able to close the popup manually.

5. 儲存您的變更
   • 按一下 更新 to save your changes to the page.

Step 4: Test the Popup

1. Preview the Page
   • Visit the page where you added the popup trigger, click the link or button, and ensure the subscription popup displays correctly.

2. Check Form Submission
   • Submit a test entry to make sure the form works as expected. If you configured the form to send an email notification, check that the email is received.
   • If connected to a tool like MailChimp, verify that the test subscription was added to the correct list.

Additional Tips and Recommendations

• Add Animation: 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.

• Optimize for Mobile: 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.
• Frequency Control: If you plan to have multiple popups, limit their frequency to avoid overwhelming users.

• Privacy Statement: Use the 正文 widget to add a short privacy disclaimer at the bottom of the form to assure users that their email information will be kept secure.

總結

Creating a click-triggered subscription popup in Elementor effectively increases your website’s email sign-up rate while ensuring a positive user experience. Unlike auto-triggered popups, this approach only displays the popup when the user is ready to engage, making it less intrusive and more likely to convert. Following these steps, you can easily design, customize, and configure a subscription popup that aligns with your brand and encourages user interaction. A well-crafted, strategically placed popup can be valuable for building your email list and staying connected with your audience.