Elementor Popup Builder Review & Tutorial: Opt-In Forms Made Easy

Create High Converting Opt In Forms With Elementor Pro

If you want to get people to join your email list, you need to ask them. Makes sense, right? I’m not exactly dropping knowledge bombs on you.

However, what’s not-quite-so-obvious is that how you ask is as important as asking in the first place.

If you ask in an optimal way, you’ll get a higher percentage of people to sign up your list, which means a better ROI for your efforts.

This post is about how you can do that with a WordPress plugin called Elementor. While I will touch on some theory points, this is more about the actual step-by-step process of using Elementor to create various types of popup opt-in forms on your site.

Then, at the end, I’ll share some thoughts on whether Elementor is the best tool for your site, or if you might be better off with an alternative option.

How Elementor helps you create high-converting opt-in forms

If you’re familiar with Elementor, you might be saying, “hey Colin, Elementor is a page builder, I thought we were creating email opt-in form popups?”.

And you would’ve been right until a few months ago, which is when Elementor launched its new Popup Builder feature as part of Elementor Pro.

So now, with the premium version, you can use Elementor Pro’s powerful visual, drag-and-drop editor to create all kinds of popups, including:

  • Lightbox/modal popups
  • Notification bars
  • Slide-ins
  • Screen fillers
  • …a lot more because you have full control over where the popup canvas appears

What’s more, you’ll be able to connect these popups to a number of popular email marketing services. Or, if Elementor doesn’t have a direct integration for your email marketing service of choice, you can hook things up to Zapier and connect that way.

To get access to this functionality, you’ll need the $49 Elementor Pro add-on, as well as the free core version of Elementor at WordPress.org. This add-on includes not only the Popup Builder functionality, but also theme building, more widgets, and lots of other helpful features.

Get Elementor Pro

How to create high-converting email opt-in popups with Elementor

Once you have both Elementor and Elementor Pro installed at your site, here’s how to create your own high-converting email opt-in forms.

Step 1: Connect to your email marketing service of choice

If you use one of the email marketing services that Elementor Pro offers direct integrations for, the first thing that you’ll want to do is connect Elementor to that service.

This ensures that, when you create your email opt-in form in the next step, you can sync it right up to your email lists.

Currently, Elementor Pro has direct integrations for:

  1. Mailchimp
  2. GetResponse
  3. ConvertKit
  4. ActiveCampaign
  5. MailerLite
  6. Drip
  7. MailPoet
  8. HubSpot

Use a different email marketing service? No problem! You can still connect everything via Zapier.

To connect to one of the direct integrations, go to Elementor → Settings → Integrations.

For example, if you use Mailchimp, you can connect by pasting in your Mailchimp API key:

Integrations API

Step 2: Create a new popup and choose your template

With that bit of housekeeping out of the way, you’re ready to create your actual email opt-in popup.

To get started, go to Templates → Popups → Add new:

Add New Popup

Give it a memorable name (this is purely internal). Then, click Create Template:

Name Your Template

Next, you can choose whether to start from one of the 100+ premade popup templates that Elementor Pro offers. Or, you can close the template library to start from a blank slate – either is fine.

Now, I’m personally not a great designer, so I’m going to pick this nice-looking popup for this example. If you’d prefer a blank slate, though, you can click the X in the top-right corner:

Select A Popup Template

Step 3: Configure basic popup settings

At this point, you should see a preview of your popup – either a blank slate or the template that you selected.

To configure how the popup canvas itself works, you can use the Popup Settings, which are open by default:

Configure The Popup Template

You’ll want to check out all three tabs because this is what lets you create different types of popups. That is, by adjusting these settings, you’ll be able to create:

  • Modal popups
  • Slide-ins
  • Notification bars
  • Etc.

Plus, you can configure other important settings, too.

In the Settings tab, you can:

  • Change the height and width
  • Change the vertical or horizontal position (for example, you could fix it to the top or bottom to create a notification bar)
  • Decide whether to use an overlay or not (this lets you, for example, grey-out the background when the popup is active)
  • Disable the close button
  • Add an entrance animation

In the Style tab, you can:

  • Change the background – either make it a color, a gradient, or an image
  • Configure the overlay, if enabled
  • Configure the close button, if enabled

Finally, the Advanced tab holds some import miscellaneous settings that let you:

  • Show the close button or automatically close the popup after X seconds
  • Prevent closing by clicking the overlay or using the escape key
  • Disable page scrolling
  • Avoid multiple popups (if you’ve targeted multiple popups to the same page, this lets you avoid annoying your visitors)

To give you an example of how these settings affect your popup, here’s what it looks like to change the Position to the bottom-right corner:

Change The Position Of The Popup

See how the popup is now fixed in the bottom-right corner? If you add an entrance animation and use a scroll trigger, that would create a nice, unobtrusive slide-in effect.

Step 4: Design your popup using the Elementor visual builder

Once you’ve configured the basic Popup Settings, you can use the visual, drag-and-drop interface to design the actual content of your popup.

You can use any Elementor widget, which gives you a ton of flexibility over the design. The only thing you absolutely must include is the Form widget, as this is what lets you create your email opt-in form.

With the Form widget, you can choose which fields you want to offer, as well as the text and look of the submit button:

Enter The Form Fields

Beyond that, I encourage you to explore all of Elementor’s widgets and design options.

As I’ve mentioned, you have a ton of control over how everything looks, and you also get access to some helpful widgets that can increase your conversion rate.

For example, you could use a…

  • Countdown widget to add urgency
  • Testimonial widget to add social proof about the value of your newsletter
  • Etc.

Step 5: Connect your form to your email marketing service of choice

Once you’ve finished designing your popup, you need to connect it to your email marketing service, either via the integration you set up in the first step, or via Zapier.

To do this, open the settings for the Form widget.

Then, find the Actions After Submit options and add an action for your email marketing service of choice (or Zapier). For example, I use Mailchimp, so I’d add the Mailchimp action:

Actions After Submit Options

Once you add the action, you’ll get a new settings area for that service.

For example, I’m able to choose the Mailchimp list I want to connect to, as well as how I want to map the information in the form to my Mailchimp list, and whether or not to require double opt-in:

Select Connection And Opt In Confirmation

Now, whenever someone submits the form, Elementor Pro will add that person straight to your Mailchimp list.

Step 6: Choose what content to display your popup on

At this point, you’re ready to decide where and when you want your email opt-in form popup to display.

To do that, click the Publish button to open the Publish Settings, which are divided into three tabs:

  • Conditions – Lets you display your popup on specific content.
  • Triggers – Lets you choose when your popup appears.
  • Advanced Rules – Lets you add other targeting options, like targeting specific devices or referring URLs.

In the Conditions tab, click the Add Condition button to add a rule for where your popup displays.

By default, the rule is set to Entire Site, but you can edit it to target:

  • Your homepage
  • Categories or tags
  • Authors
  • Individual posts
  • Archive pages (like your blog list)

You can also add multiple rules and choose between Include/Exclude, which gives you a lot more options:

Enter Popup Conditions

One helpful way you can use these options to boost your conversion rate is by personalizing your popups.

For example, let’s say you have two blog post categories – one about “Blogging” and another about “WordPress”.

Using these rules, you could create two separate personalized popups for each category with a CTA targeted to that type of content. Even something as simple as duplicating the same design, but slightly changing the text to target it towards the category, can pay dividends.

Step 7: Choose trigger rules

Next, go to the Triggers tab to determine when to launch your popup. You can trigger your popup by:

  • Time
  • Scroll depth
  • Inactivity
  • Click
  • Exit intent

Enter Popup Triggers

To make your popup less obtrusive, you can use these rules to delay its display – more on this in a second.

Step 8: Configure Advanced Rules

Finally, head to the Advanced Rules to configure some other important options.

Here, you have options that let you:

  • Wait for a certain number of page views or sessions to display your popup
  • Set a limit for how many times a visitor sees a popup
  • Target visitors coming from specific referrers
  • Hide your popup for logged-in users
  • Hide for certain devices, like hiding your popup for mobile visitors

Enter Popup Advanced Rules

To avoid annoying your visitors, I’d recommend definitely turning on the Show up to X times option.

Additionally, the When arriving from specific URL option opens more avenues for personalization. For example, if you land a guest post on a popular blog, you could create a special email opt-in targeted to visitors who come to your site from that guest post.

Once you’re finished configuring the Publish Settings click the Save & Close button to make your email opt-in popup live.

How to avoid annoying visitors with your email opt-in popup

You don’t need me to tell you that, done wrong, email opt-in popups can be super annoying.

I’m sure you’ve experienced the site that incessantly pesters you with popups, making hitting your browser’s “back” button a pretty attractive option.

Here are some ways that you can use Elementor Pro’s options to avoid putting your site’s visitors through that:

  • Consider creating a less obtrusive type of popup, like a non-modal slide-in or notification bar. You can control this via the Popup Settings.
  • Make sure your popup doesn’t display right away. You can delay it with an exit-intent trigger, or you can use the Show after x page views option in the Advanced Rules to wait until a visitor views multiple pages (or even both!).
  • Use the Show up to X times option in the Advanced Rules to set a limit on how many times a visitor will see the popup.
  • Make it easy to close the popup by making sure the Close button is visible and easy to click. You can control this in the Popup Settings.
  • Avoid displaying multiple popups on the same page. Again, you can set this up from the Popup Settings.

Is Elementor Pro Popup Builder the best popup plugin for email opt-ins?

Elementor Pro is definitely not the only plugin that helps you build your email list.

So to finish out this post, let’s dig into the question of whether Elementor Pro Popup Builder is the best way to create email opt-in popups in all situations.

The answer depends on what you value the most.

Let’s start with the good parts…

Elementor Pro Popup Builder strong points

When it comes to design flexibility, I don’t think you’ll find any tool that gives you more control over the design of your popups and email opt-in forms.

Because Elementor at its core is a tool to design all types of web content, including both landing pages and entire websites, it just has so many design options. What’s more, even among WordPress page builders, Elementor still stands out for its amazing array of design options.

So if you value the ability to design 100% unique popups, Elementor Pro is a solid option.

Additionally, you also get access to all the regular Elementor widgets, which also gives you a lot of flexibility when it comes to the content of your opt-in forms. For example, you can easily incorporate:

  • Countdown timers
  • Images
  • CTAs
  • Etc.

And there are also tons of free and premium Elementor extensions that add even more widgets for you to use.

Finally, you also get lots of helpful targeting options that let you create personalized email opt-in forms, which is a great way to boost your conversion rates.

Basically, when it comes to the front-facing opt-in forms, Elementor Pro is top of the pack.

Elementor Pro Popup Builder weak points

However, there is one behind-the-scenes area where Elementor Pro falls short…

Analytics.

Namely, there aren’t any! At least not built in.

So whereas most other email opt-in tools will let you track impressions and conversions to figure out your conversion rate, Elementor doesn’t offer that…at least not without some help.

There are workarounds to add Google Analytics tracking, and I found this WordPress Elementor Tracker plugin at CodeCanyon that adds event tracking as an option for all Elementor widgets. Though I’ve never personally used this plugin, it seems like it would let you see your conversion rate in Google Analytics without too much fuss.

But the basic gist is that analytics are not Elementor’s strong point, so that’s the price you pay for all that design flexibility.

In that same vein, there’s also no built-in A/B testing. So again, you don’t have a built-in way to analyze and optimize your forms against one another.

Only you can decide if those trade-offs are worth it.

If you do decide that you’d prefer a tool with more of a focus on analytics & A/B testing, two good starting points are Thrive Leads or OptinMonster.

Get Elementor Pro

 

Disclosure: This post contains affiliate links which means we may get a commission if you make a purchase. Our opinions are our own and we only share what we believe you’ll find helpful. You won’t pay anything extra but it helps us support the running of this website and continue to publish helpful content. Thank you!

Blogging Advice The Works. Delivered.

Insights to help you build, grow, and profit from your content.

*Includes email updates. Unsubscribe anytime.