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. 

More...

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:

elementor tutorial optin types

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:

elementor tutorial rules

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:

elementor tutorial integrations

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:

elementor add new popup

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

elementor template type

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. 

elementor category

Once I had chosen the template, I clicked Insert:

elementor template chosen

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

elementor pro review edit mode

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

elementor popup modified

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:

elementor popup settings

Settings

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

  • Layout

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

elementor settings layout

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.

elementor general layout
  • Preview Settings

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

elementor preview layout
Style

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

  • Popup

Corners, Background Types, Border Types are all here:

elementor style settings
  • Overlay

Define how the overlay looks with your popup.

elementor overlay
  • Close Button

Styles related to the close button of the popup.

elementor close button
Advanced
  • Advanced

More detailed settings regarding the popup.

elementor advanced
  • Custom CSS

Add custom CSS to your popup.

elementor custom css

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

elementor publish button

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.

elementor publishing wizard

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

elementor add condition

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:

elementor triggers

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:

elementor triggers exposed

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:

elementor advanced rules

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:

elementor mailchimp view audience

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:

elementor mailchimp create 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:

elementor mailchimp api

6. Choose Extras > API Keys:

elementor api extras

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

elementor create api key

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

elementor api key created 1

9. Copy the new API key to memory.

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

elementor api settings

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:

elementor choose popup

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

elementor activate the form

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:

elementor form field id 1

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

14. In the Add Actions field, choose MailChimp:

elementor actions after submit

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

elementor popup action after

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:

elementor available lists

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

elementor email 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:

elementor subscriber on the list

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.

Timo
 

I'm into building websites and writing detailed reviews about site builders. When I'm not at my computer, you can find me spending time with my family or training for marathons or for triathlons.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: