Does your WordPress site need something that grabs the attention of its visitors? Whether it is a limited-time sale or an important announcement, Pop-ups seem like just the thing you need.
Pop-ups are a popular and effective marketing tool used to engage website visitors, where the intention is to catch the visitors’ attention and then guide them to take specific actions on your WordPress site.
Today, we’ll explore how to use Elementor to design and implement creating and placing pop-ups into your WordPress website.
Why Use Elementor for Pop-ups?
Elementor allows you to create custom pop-ups and templates for them that you can customise and design with ease.
By utilising this feature of Elementor, you gain complete control over the design and functionality of your pop-ups, ensuring consistency and user engagement.
Creating Your First Pop-up
First, ensure that you are on the correct WordPress website that you want to add the Pop-ups to. You may need the login credentials to that website’s site editor so ensure that you have that.
Step 1: Access Elementor Finder
On the website, open the Elementor Finder by pressing Command for Mac devices or Control for Windows + ‘E’ on your keyboard, then type “add new popup” and open it.
Step 2: Name Your Pop-up
This will open up a “new template” window and here, pick “Popup” as the type of template that you’ll be working on.
Give your pop-up an appropriate name and click “Create Template”.
Step 3: Pop-up Templates:
Upon clicking “Create Template”, you’ll be prompted to pick a pre-designed template from the templates library.
There are 2 ways for you to design your pop-ups, first is by picking a template and making your own changes from there or you can design a pop-up from scratch.
In general, using templates to create pop-ups would be easier however this time, we will learn how to make a template from scratch to explore Elementor’s features in greater depth so simply close the templates library to do this.
Step 4: Adjust Pop-up Settings
In the Popup settings pane, there are multiple customisation options that you can use to change the look and orientation of your pop-up.
If you want your pop-up to take up more or less of the visitor’s screen, customise the width and height of the pop-up.
Should you want to make your pop-up more eye-catching, consider adding an entrance and exit animation that triggers when the pop-up condition has been triggered and when the pop-up is closed by the visitor respectively.
To customise the look of what’s inside the pop-up itself, go to styles where you can add shadows, customise the exit from pop-up button, add background colours and so on.
Finally, go to Advanced if you’d like to change some of the pop-ups’s technical aspects such as if you’d like the pop-up to automatically close on its own or to prevent the page from scrolling while the pop-up is active on the visitor’s screen.
Step 5: Design Pop-up Content
To construct the contents of the pop-up, click on the ‘+’ icon to add a section and from there, you’ll be adding widgets to populate the pop-up.
These sections can be further split into different columns that can be re-sized as you see fit..
Some of the most commonly used widgets for pop-ups include headings, text, images to display the content, and buttons for the user to take action if any.
Depending on the purpose of your pop-up, add and customise its contents to make it serve its purpose in the best way.
Step 6: Optimise for Mobile
With how commonplace mobile devices have become, if you’d like to have visitors from all platforms have the best experience, it would be best to consider their perspectives as well.
At the bottom of the settings pane, click on the monitor icon and change the previews for each device to see if your page is mobile-responsive so that mobile viewers will find your pop-up presentable.
Once you’ve finished making your final few changes to accommodate for mobile responsiveness, click on “Publish”.
Step 7: Set Display Conditions and Triggers:
Since pop-ups are meant to only be displayed when certain conditions are met, you should be sure to set up the necessary conditions and triggers.
Conditions will determine where your pop-up will be displayed, such as if the user is at a certain page, the home page, or whichever part of the website you’d like your pop-up to be displayed at.
Triggers, on the other hand, will let you determine when the pop-up will be displayed. This can be when the page is first loaded, once the user clicks on a certain part of the page, and more.
For more specific conditions and trigger settings, take a look at the “Advanced Rules” to see if there are suitable options for you.
Adding Interaction with Buttons
Since the nature of pop-ups means that they will eventually be closed, it may be useful to give visitors a way to re-open pop-ups manually after it closes.
On your homepage or whichever page you want this button to appear, add or select an existing button and in the content of the edit pane, link it to Popup.
Once selected, go to the link’s options select the desired popup to be shown and then click on “Update” to save your changes.
Best Practices for Pop-up Design
To end off, here are some tips that you should take into consideration when designing and placing pop-ups on your website:
- Mobile-Friendliness: Ensure your pop-ups are optimised not just for desktop, but also for mobile devices especially if you know that a significant portion of your visitors will be viewing your website on mobile devices.
- Minimalistic Design: Try not too use designs that are too complicated as pop-ups are supposed to be easily readable by visitors.
- Limited Pop-ups: An excessive amount of pop-ups will surely displease visitors so keep the number of pop-ups minimal and ensure that they are purposeful.
- Relevant Content: In a pop-up, it is best to avoid overwhelming users with excessive information. A pop-up should only contain the most necessary pieces of information.
Now that you have the tools and knowledge to create engaging pop-ups with Elementor, start experimenting with different designs, conditions, and triggers to enhance user engagement on your WordPress website.
For more guides and tutorials for Elementor and other WordPress-related guides, feel free to stick around and stay tuned!
Related To:
