Small business web design new & views.
This next offering was indeed made available by Envato Tuts+ Tutorials . I anticipate taking a look at one of their articles or blog posts simply because they’re really interesting. I hope you find it interesting.
I’m going to show you how to make some great-looking and functional popups in WordPress, using Elementor Pro.
Elementor is a page builder for WordPress. It allows you to use a whole bunch of free and premium templates, to create effectively any kind of website that you want. To learn more about Elementor check out the links at the bottom of this tutorial.
Recently the Pro version of Elementor was furnished with an update, allowing you to design and create popups. That’s what we’re going to cover today, hitting the following points:
- Popups and user experience
- How to create a simple pop-up with Elementor
- Customizing popups and adding dynamic content
Awesome WordPress Popups with Elementor Pro
Popups and User Experience
When it comes to popups you probably fall into one of two camps: those who do like them, and those who don’t. Designers and anyone involved in Marketing often find popups to be a useful way of putting a message in front of users and encouraging them to act. End users, however, tend not to appreciate popups interrupting their browsing experience and obliging them, at the very least, to close the modal.
However, if designed considerately, popups can actually be very useful. They can benefit both the website (and its conversion rates) and the user alike.
This isn’t a tutorial about popup UX, that’s a whole topic in itself, but it’s definitely worth mentioning that popups should be used considerately, non-intrusively, and with the user in mind.
Good Popup Examples
For example, if you were ever to visit Tim Ferriss’ website you’d likely be looking for productivity and entrepreneurship tips. On his website you’ll find, if you go to leave, something called an “exit intent popup”. It’s a popup which appears when your cursor leaves the browser window, showing you content which is relevant to Tim’s website and therefore probably to the user too.
Peter Shankman is another good example. His website presents a subtle slide-in popup. It doesn’t obscure what you’re browsing, and it offers something which is likely relevant to what you’re looking for.
How to Create a Simple Popup with Elementor Pro
I’m using the latest version of the WordPress Elementor plugin (at the time of writing) which is v2.4.3, along with the latest Elementor Pro v.2.4.0.
With those installed, to create a popup we go to Templates > Popups. You’ll be shown a list of all your popups, and if you’ve yet to create one you’ll see something like this:
Hit ADD NEW POPUP (it’s pretty clear) and you’ll be asked to give it a name, then select a template from the premade examples shown. There are different templates for different uses; some will be suitable for announcements, others for promoting a discount, others are perfect for encouraging users to sign up for something, and there are even examples for warning users of cookie use, or other GDPR notifications.
When you’ve found something suitable, click it for a larger preview, then hit Insert.
Welcome to the Popup Builder
You’ll be taken to the popup builder in the WordPress backend.
If you’ve used Elementor before you’ll be right at home with the interface, the options, and how everything is presented. It’s all essentially the same as building Elementor page templates.
On the right of the screen you have the main canvas which shows a preview of what you’re building. You can select each element individually to edit and change it however you like. You’ll see the controls and preferences shown in the sidebar to the left, with the option to Publish when you’re done.
Popup Settings
Some examples of what popup settings you can alter are:
- Width
- Height (which can be fixed or relative to the screen)
- Position (horizontal and vertical)
- Overlay (choose whether to obscure what’s behind the popup–there are styling options for this too)
- Close button (whether or not you want to display one–there are more styling options for this as well)
- Entrance animation (be wary of some of these!)
- Animation duration
- Title (how you refer to it)
- Background type (color, gradient, image)
- Border type
- Border radius
- Box-shadow
Then, as well as being able to add some custom CSS, there are some advanced options too. For example:
- Show close button only after a specified delay
- Automatically close after a delay
- Prevent closing on overlay (only using the close button, or ESC key, therefore)
- Prevent closing with ESC key (even more extreme)
- Disable page scrolling
- Avoid multiple popups (one is enough, right?!)
- Margin and padding properties
Publish Settings
When you’re happy with what you’ve built, you’ll want to publish it. Upon hitting PUBLISH you’ll be shown some questions. For example:
- What are the conditions for when you want the popup to be displayed? Here you can include or exclude certain pages. Add as many conditions as you need.
- Next, what triggers the popup to be displayed? You might choose to show the popup immediately on pageload, or on scoll, or when the user scrolls to a specific element and so on. All these options have settings of their own for perfect customization.
- Finally, you’re shown some advanced rules, such as showing the popup only to return visitors, or only showing the popup a set number of times, or perhaps showing the popup only when a visitor is referred to your website from a specific URL. And there are more. These settings can really improve the UX of your popup, designing it with true integrity and consideration for your users.
Complete the settings as you want, then hit SAVE & CLOSE. You’ll be taken to an example of what your popup looks like.
Customizing Popups and Adding Dynamic Content
Let’s take things to the next level. So far we’ve selected a template, altered one or two settings, and that’s it. Now let’s imagine we want to customize our popup further.
Back at the ADD NEW POPUP stage of the process we can again specify a title and select a template.
We can then select it, edit the basic settings just like before, and again hit PUBLISH.
Okay, now it gets interesting. Elementor allows us to fetch dynamic data from our WordPress installation and insert it into our popup. We can insert things like the user’s name, the page title, and so on.
Let’s imagine we’re running WooCommerce and we want to show a user that there’s a discount on the specific product they’re looking at. Begin by selecting a piece of text in the template, then clicking Dynamic in the sidebar:
We’re given a wide range of things to choose from: details from the post, details from the site as a whole, media information, author details, and even WooCommerce details. We’ll select Product Title, after which it’s added to our text content block.
Here we can specify some before text, some after text, and a fallback text (in case the details from the database aren’t retrieved properly).
Then let’s do the same for the button, showing the price of the product itself. We can state the before text as being BUY NOW FOR, to give us a compelling call to action:
We can even go a step further and include the product image as the background of the popup itself!
When we hit PUBLISH we’re given the publish settings again, so we can specify that we want to show the popup only on WooCommerce pages. We’ll set the trigger to be 15 seconds of inactivity. Here’s how it finally looks:
The design might need some refinement, but you can see we’re displaying the product name, its price, and its image as the popup background. Brilliant!
Conclusion
That wraps this tutorial up! We’ve taken the popup builder from Elementor pro and used it to quickly build two popups, one of which included dynamic data. To get more from Elementor popups download the Envato Elements plugin and you’ll have access to even more template kits. Try it out and let us know what you think of it!
More Elementor
To learn more about Elementor, what it is, and what it can do for your WordPress website, take a look at the resources listed below:
-
WordPressHow to Build a WordPress Website With Elementor -
WordPressHow to Customize Your WordPress Website With Elementor
- Elementor Popup Builder
- Envato Elements Plugin
- WordPress
- MAMP
First posted on this site Envato Tuts+ Tutorials
Trust you enjoyed that information that they provided. You’ll find quite similar blogposts on main site: https://www.designmysite1st.com
Leave us your views down below, leave a comment and let us know what topics you want us to cover in up coming blog posts.