Ever wished you could make your Elementor buttons more interactive and engaging to increase your conversions? Imagine clicking a button and having a sleek popup appear, ready to capture leads, showcase products, or deliver important messages.

Well, you can! Today, we’re diving into the world of popup-triggering buttons. Specifically, Elementor buttons.

Ready to add some pop to your Elementor buttons? Let’s get started!

What You’ll Need to Get Started

Before we dive into the fun stuff, you’ll need the following 2 plugins:

  1. Elementor Page Builder: You’ll need to have Elementor installed and running on your WordPress site.
  2. Popup Maker: This is our secret weapon for today’s tutorial. Popup Maker a free WordPress plugin that’s about to become your new best friend.

Why Popup Maker, you ask? Well, in the first place, popups can have an average 11.09% conversion rate. Where landing pages see an average of 6.6% and email campaigns get an average of 7.38% conversion rates. Secondly, Popup Maker is active on over 700,000 WordPress sites and has an incredible 4.9 out of 5-star rating from over 4,450 reviews.

Let’s get Popup Maker on board.

Log into your WordPress dashboard. Head to Plugins > Add New.

Navigating To Plugins ≫ Add New Plugin

In the search field, type “Popup Maker” and press Enter.

Searching For The Popup Maker Plugin In The Wordpress Plugin Library

Look for Popup Maker in the results. It’s the popular kid with over 4.4k five-star reviews and 700k+ users. 😉

Click Install Now.

Installing And Activating The Popup Maker Plugin

Once installed, click Activate.

Installing And Activating The Popup Maker Plugin

And just like that, you’re all set! With Elementor and Popup Maker in your toolkit, you’re ready to create some popup magic. Let’s do that next.

Creating a Popup with Popup Maker

Head to your WordPress dashboard and hover over Popup Maker in the side menu. Click on Create Popup.

Navigating To Popup Maker ≫ Create Popup

The popup editor is where you’ve got full control over your popup’s design, display settings, target audience, and behavior.

Popup Maker Popup Editor

Start by giving your popup a name. Don’t worry, this is just for your reference—your visitors won’t see it. If you want a title to appear in the popup itself, you can add that too.

Now, let’s talk content.

Main Popup Content Editor Section

This is where you’ll craft the heart of your popup. Go wild! You can use text, images, shortcodes, and even HTML. Popup Maker gives you the freedom to create exactly what you want. So, what’ll it be? A newsletter sign-up? A limited-time offer? The sky’s the limit!

You can embed forms from popular plugins such as WP Forms, Contact Form 7, and Ninja Forms. But don’t worry if you’re not using any of these. Popup Maker’s got your back with its built-in form.

Here’s the cool part. Popup Maker’s built-in subscription form can automatically add new subscribers to your Popup Maker subscriber list, Mailchimp list, or AWeber list. Talk about efficiency!

Let’s add Popup Maker’s Subscription Form to our popup. Follow these steps:

  1. Click the “Popup Maker Shortcodes” button.
  2. Select Subscription Form from the dropdown.
Popup Maker Shortcodes Dropdown Menu

Now, it’s time to make your form shine.

Using The Default Popup Maker Subscription Form

You can switch the service provider to MailChimp or Aweber if you’ve set them up. Otherwise, stick with the default, and Popup Maker will save subscriber details in WordPress.

Let’s jazz up your form fields.

Subscription Form Fields Settings

You’ve got options galore! Hide the name field, make it optional, or split it into First and Last Name. You can even customize field labels or ditch them entirely.

Don’t forget about privacy.

Subscription Form Privacy Settings

The consent checkbox is on by default. In some places, it’s a must-have. When enabled, users only get subscribed if they tick this box.

Now, let’s decide what happens after someone subscribes.

Subscription Form Close And Open Popup Actions

You can close the popup, show another one (perfect for a thank you message or promised coupon code), or redirect to another page.

Once you’re happy with your form, click Save to save your changes.

Here’s a sneak peek of what your popup might look like.

Visual Review Of The Subscription Form In The Popup Editor

Want to see it in action? Click Save Draft.

Click Save Draft To Do Live Preview Of The Popup

Then click Preview at the top.

Click The Preview Button After Saving A Draft Of Your Popup

Voila! Here’s what your popup might look like.

The Live Preview Of Your Popup

Happy with your creation? Let’s set it up to appear at the right time.

Scroll down until you see the Popup Settings section

Triggers Tab Under The Popup Settings

For this tutorial, we’ll only need to add a new trigger. A trigger is what decides when a popup is displayed. You can also customize the targeting options to manage who gets to see your popup.

Click Add New Trigger.

Add New Trigger Button

The default “Click Open” trigger is perfect for our needs.

Selecting What Kind Of Trigger And If You Want To Use A Cookie To Control The Repeated Display Of Your Popup

By default, the trigger is Click Open, which is exactly what we need. So, keep it at that.

Pro tip: If you need to show your popup every time someone clicks your Elementor button, uncheck the “Prevent popup from showing to the visitor again using a cookie?” setting.

When you add the trigger, you’ll see the Click Trigger Settings.

Click Trigger Settings ≫ Extra Css Selectors Field

Make a note of the class name that’s in quotes (see screen capture above). You’ll need it later to make your Elementor button trigger your popup. Whatever HTML Element (i.e., buttons and links) that you add this CSS class to will trigger your new popup.

Finally, hit Publish to make your popup live.

Clicking Publish To Make Your Popup Live

Now, we’ll walk you through triggering your popup using any button on your Elementor-built pages.

Add a New Elementor Button To The Page

First, open a post or page in Elementor.

Now, let’s add that button. You’ve got two easy options:

  1. Drag and drop: Spot the Button widget in the left sidebar. Click and drag it right where you want it on your canvas.
  2. Quick add: Feeling lazy? No worries. Click the Button widget, and it’ll insert the button at the bottom of your page content.
Adding An Elementor Button

Let’s add the trigger next.

Add The Trigger to The Elementor Button

Now that we’ve got our Elementor button, let’s make it pop! Here’s how to turn that ordinary button into a popup-triggering powerhouse.

Hover over your button and click the pencil (edit) icon that appears.

Editing The Elementor Button

In the sidebar, click Advanced.

Elementor Button Advanced Settings

Scroll down until you spot the CSS Classes field.

Elementor Button Advanced Settings Css Classes Field

Don’t worry, you don’t need to be a coding wizard for this part.

Remember that CSS class we copied earlier? Time to use it! Paste it into the CSS Classes field minus the quotes. For example, I’m using “popmake-34”.

Adding The Popup Maker Css Class Name To The Elementor Button Css Classes Field

Forgot your CSS class? No sweat! Here’s a quick refresher.

In your WordPress dashboard, navigate to the All Popups page under Popup Maker.

Popup Maker In The Wp-Admin Side Menu

Find your newly created popup and copy its CSS class.

Locating The Default Css Class For Your Popup Maker Popup In The List Of All Popup

Paste this class name into the CSS Classes field in your Elementor button settings.

Last but not least, smash that Update button at the bottom to save your page.

Update Button 2

Want to see your handiwork? Click the Preview button next to Update. Give your button a click, and voila! Your popup should appear.

Popup Example 2

Congrats! You’ve just leveled up your Elementor game with a popup-triggering button.