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:
- Elementor Page Builder: You’ll need to have Elementor installed and running on your WordPress site.
- 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.
In the search field, type “Popup Maker” and press Enter.
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.
Once installed, click Activate.
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.
The popup editor is where you’ve got full control over your popup’s design, display settings, target audience, and behavior.
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.
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:
- Click the “Popup Maker Shortcodes” button.
- Select Subscription Form from the dropdown.
Now, it’s time to make your form shine.
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.
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.
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.
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.
Want to see it in action? Click Save Draft.
Then click Preview at the top.
Voila! Here’s what your popup might look like.
Happy with your creation? Let’s set it up to appear at the right time.
Scroll down until you see the Popup Settings section
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.
The default “Click Open” trigger is perfect for our needs.
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.
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.
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:
- Drag and drop: Spot the Button widget in the left sidebar. Click and drag it right where you want it on your canvas.
- Quick add: Feeling lazy? No worries. Click the Button widget, and it’ll insert the button at the bottom of your page content.
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.
In the sidebar, click Advanced.
Scroll down until you spot the 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”.
Forgot your CSS class? No sweat! Here’s a quick refresher.
In your WordPress dashboard, navigate to the All Popups page under Popup Maker.
Find your newly created popup and copy its CSS class.
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.
Want to see your handiwork? Click the Preview button next to Update. Give your button a click, and voila! Your popup should appear.
Congrats! You’ve just leveled up your Elementor game with a popup-triggering button.