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.

Introduction

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.
   • Click on 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 Create Template.

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.
   • Click Insert 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.”
   • In the Actions After Submit section, select Email or 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, and 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 Publish. 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
   • Click on Add Condition and choose Entire Site 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 Save & Close.

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 Button 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 Dynamic Tags, then select Actions > Popup from the dropdown list.

4. Choose the Popup Action and Name
   • Choose 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. Save Your Changes
   • Click Update 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 Text widget to add a short privacy disclaimer at the bottom of the form to assure users that their email information will be kept secure.

Conclusion

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.