Elementor Tutorial: How to Work with Popup Builder

Without any hesitation, I’m willing to say that you have encountered many popups while visiting various websites. Even though they can sometimes be annoying, they are still said to be effective. 

In this Elementor tutorial, I introduce to you the Elementor Popup Builder, and I also show you how to connect it to the MailChimp email autoresponder service.

Let’s get started!

Introducing Elementor Popup Builder

Let’s take a brief look at four core features that Elementor Popup Builder can provide to you:

• Popup types
• Targeting
• Templates
• Integrations

Popup Types

You can use nine different popup types (not just opt-in forms) with Elementor Popup Builder to build your popup:

As you can see, whether you want to build content upgrades, traditional optin forms or login screens, Elementor Popup Builder has got you covered.

Targeting

Just providing different types of popups is not enough. In fact, the popups have to be smart so that they become more effective (and yes, sometimes this means that the annoyance factor grows).

This smartness comes into play with targeting. They basically define when and where the popups are displayed when you visit a website:

Templates

It is nice to be able to choose from the various popup types or define the popup behavior. But what is also important is how the popup looks.

Elementor Popup Builder comes with 100+ templates that you can use when building your popups. In fact, you have templates for various kinds of popups:

• Bottom bar.
• Classic.
• Fly in.
• Full screen.
• Hello bar.
• Slide in.

And if none of the outlook looks good to you, you can always create one yourself.

​Integrations

What good is a popup if you can’t connect it to various systems? Not good at all! Therefore, it’s great that Elementor Popup Builder connects to other major systems like MailChimp, GetResponse, Drip or ConvertKit:

In fact, in the next section, I show you (both in written form and in a video), how to connect a popup optin form to a MailChimp email list.

Case: Creating Popup Opt-in Form and Connecting It to MailChimp

So, let’s get started with building an actual popup form with Elementor Popup builder. We then hook it to a MailChimp account.

Since this section is a lengthy one, I have broken it into two separate sections:

• Creating a popup.
• Creating a MailChimp account and hooking the popup optin with it.

Creating a Popup

1. Log into your WordPress account.

2. Go to Templates > Popups > Add New Popup:

3. Define a template type and give it a name:

Once those settings are done, click the Create Template button.

4. Then it’s time to choose the template and the category for your popup. The latter defines how the popup is displayed when a visitor loads a page. In this case, I didn’t pick any specific category. 

Once I had chosen the template, I clicked Insert:

5. My popup was then displayed in an edit view:

But since I wanted to create an email popup, I tweaked my template a bit, so it looked like this:

When your popup is in edit mode, you can tweak its settings.

These settings can be found on the left, and here are their main categories:

Settings

Under the Settings tab (which is selected by default), you have:

• Layout

Here you can define various layout-related properties in your popup:

For instance, you can set the size or the Entrance Animation on this section.

• General Settings

In this section, you can define generic settings like the status of your popup or its name.

• Preview Settings

Here you can set the preview-related settings. For instance, you can preview your current popup on top of your existing pages.

Style

Here you can define various style-related settings for your popup.

• Popup

Corners, Background Types, Border Types are all here:

• Overlay

Define how the overlay looks with your popup.

• Close Button

Styles related to the close button of the popup.

Advanced

• Advanced

More detailed settings regarding the popup.

• Custom CSS

Add custom CSS to your popup.

6. After you have tweaked your popup, it’s time to publish it by clicking the green Publish button at the bottom:

​7. In fact, clicking the Publish button starts a wizard where you’ll go through a series of steps to define more “intelligence” to your popup.

So first, in the Conditions section, click the Add Condition button. What you’ll define next is the condition where the popup is displayed:

For this demonstration, I chose Entire Site. Once that was defined, I clicked Next.

8. On the Triggers section, you define what event actually fires up your popup:

For instance, you could set that it is displayed when your pages load or when the user is about to leave the page.

When you turn on any of the options, you can fine-tune them even further:

For instance, for this demonstration, I chose the On page load option, and Within (sec) time as 3. In other words, when my page loads, the popup is displayed within 3 seconds.

Once you have done your settings, click Next.

9. In the Advanced Rules section, you have more control on when the popup is shown. And once again, when you turn any particular option on, you get more settings to choose from:

For instance, in this case, I chose that the popup was displayed only on the desktop devices (Show on devices setting).

Click the Save and Close button once you have set these advanced settings.

Your popup is now live! When you preview it, it should be displayed according to the rules you set.

Creating a MailChimp Account

Another part of this tutorial is how to create a MailChimp account and how to hook it up to your popup form. 

So, let’s get started!

1. Register an account with MailChimp at  www.mailchimp.com

2. After you have registered an account with MailChimp, create an email list. Go to Audiences > Manage Audience > View audiences:

​3. On the Audiences page, click Create Audience.

4. On the Create List page, enter List Name, Default From email address, Default From name, and Remind people how they signed up to your list fields. Also, enter all the other required information regarding your list:

Once you have set all the necessary data, click Save.

5. Generate an API key. You will later hook this key to your popup optin form. On MailChimp, click your account name and choose Account:

6. Choose Extras > API Keys:

7. Under Your API Keys, click Create A Key:

8. Your API key is now created. You should see the new API key on the page:

9. Copy the new API key to memory.

10. In your WordPress, go to Elementor > Settings > Integrations:

Paste the copied API key to the MailChimp field in Elementor Pro and click Validate API Key button. When the key is valid, a green checkmark appears on the Validate API Key button. Click the Save Changes button at the bottom of the page.

11. Go to the popup you just created by going to Templates > Popups > Edit with Elementor:

Click on the form field on your popup, to active it:

12. On the left, open the Form Fields section and go to Advanced. Make sure that you have set a value to the ID field:

13. On the left, open the Actions After Submit section.

14. In the Add Actions field, choose MailChimp:

Also, make sure to choose Popup as the other option on Add Action:

Make sure that on the Action section, the value is selected as Close Popup, as this closes the popup window after the visitor has submitted the form.

15. The section under Actions After Submit should change to MailChimp. There, set the API Key as Default and choose the list you created in MailChimp:

In the Field Mapping section, make sure that the Email field is mapped to Email:

16. Click the Update button to save your current changes.

17. Open a webpage or a blogpost on your WordPress website. You should see the popup displayed.

18. Enter your email address and submit a form.

20. Go to your MailChimp account (Audiences > View Contacts) to verify that you can see the submitted email:

21. If you see the email address, you have now successfully connected your Elementor popup to your MailChimp email list.

Conclusion: Elementor Popup Builder

As you can see, setting a popup form with Elementor Pro is straightforward and easy. And as you now know, connecting a popup to an email list is just one option; you can do plenty of other things with popups with Elementor Popup Builder.

In case you are new to Elementor, and you are wondering what the product is all about, I suggest that you take a look at my Elementor Pro review, to understand what the product is capable of.