Are you wondering how to create an exit popup or simply want to know what is it? In this short article, I will guide you through every step to create and launch your own exit-intent popup in WordPress.

What is an Exit-Intent Popup?

An exit-intent popup is a modal window that appears to site visitors if they are trying to leave a page. The goal of an exit-intent popup is to prevent users from leaving your site or take action by leaving their contact information.

The popup can contain anything (usually in a form of Call-to-Action) from promotional discounts to subscription forms - it is up to you to decide - whatever your goal is.

Although exit-intent popups seem to be really annoying, they are considered as one of the most efficient digital marketing instruments. Some well-made popups get as much as a 33% conversion rate (talking about lead capturing).

Exit-Intent Popups for WordPress

With WordPress at your fingertips, there is a plugin for everything. And, when it comes to popups, there is even more.

Because of its popularity, most popup builders are fully compatible with WordPress. This means that you can choose from a wide variety of great tools to create popups for your site.

Some of the tools to consider are Sumo, JustUno, OptinMonster, and Visual Composer Popup Builder.

Whatever your choice is, there are few things to consider.

The first one is the display limit, as you don't want to find out that your popups stopped working because you've reached your limit.

The second, design freedom to create popups you want. Some tools get lots of limitations when it comes to designing a popup.

The third is the price. There are zero reasons to overpay for the tool you can get for a competitive price and still satisfy all your needs.

How to Create an Exit-Intent Popup in WordPress

In this chapter, I will use Visual Composer Popup Builder as an example of how you can quickly get your popups up and running.

Before we jump into the process, there are few things to know about Visual Composer Popup Builder:

• There are no limits on the number of popups or display limits;
• There is total design freedom as you will design popups in the visual editor;
• The Popup Builder comes completely free of charge for everyone with a Visual Composer Premium subscription.

It is time to create your first exit-intent popup.

The first thing you need to do is simply open Visual Composer Hub and download Popup Builder extension from the Addons section.

For those new to the Visual Composer Hub, it is a cloud library available to Visual Composer users to download extra content and functionality, like elements, templates, add-ons, and stock images.

Once downloaded, the Popup Builder will be automatically installed.

The core idea behind Visual Composer Popup Builder is that you can create an unlimited number of popup design templates and then activate triggers, like page load, click, or exit-intent by choosing the popup you have created.

To access the popup builder, go back to your WordPress Admin Dashboard and navigate to Visual Composer - Popup Builder.

Now, simply click on Add New and you will be instantly redirected to the Visual Composer Frontend editor to design your popups.

Once in the Popup Builder, the first thing to do is give your new popup a meaningful name. The popup name will be displayed in the drop-down menu once you will choose a popup to be triggered for the exit-intent action.

As you proceed, you will see a drag and drop interface with popup container already added by default.

A popup container is the root element of your modal window that allows you to quickly adjust the appearance of your popup window. From there, you can control width, background, close buttons, and even overlay.

Let's start by adding some colors to our popup. For that, in the Popup Container window on the left, navigate down to Design Options and set a background color. I will choose blue.

As you can see, the close button with the default color is not visible. In such a case, it is a good idea to make it white.

Plus, I would like to have my popup window wider so I will set it to 600px. A cool thing about popup width is that you can also use percentage - this means your popup width will be calculated from the screen size.

Now we have our popup window styled and it's time to add some content.

You can use any element available in Visual Composer and add it to your popup window. Make sure to check out Visual Composer Hub for various elements.

Let's say that we want to offer our site visitors a special discount upon leaving the site. For that, we will use simple elements - text block and button.

Take note, just like in Visual Composer Website Builder, the popup builder uses row and column element logic to arrange elements into rows and columns.

In the Popup Builder, there is a row and column added to the Popup Builder by default already. To add a text block, simply click on the add sign in the navigation bar on the left or directly in the row of your layout.

You will see an element window where you should choose the Text Block.

With the text block added, you can adjust the copy of your message and style it by using WordPress default TinyMCE editor.

With the copy ready, let's add a button just below our message. Hover the text block with your mouse and click on the plus sign just below. In the element window, locate Basic Button and click add.

With this action, we specify that we want to add a new element in the same row just after the text.

If you want to add a button to another row, you can do so by clicking on the icons below which will add a new row with one or several columns and then add an element there.

Our button is added, but it requires some styling. Update the title, choose your button color, and add a link where you want to lead your visitor.

While adding a text and a button is the base of the popup, a good practice is to also add an image to make the popup stand out more. Visual Composer allows adding images anywhere in the popup but in this case, I'd like it to be on the right side of the text and the button.

To do that, we'll first have to add a second column to this row. To do that, open the edit window the row where we already have all of our content and under the Row Layout section, you can choose the layout with two equal-sized columns.

Then to add an image, the process is the same as with the Tex Block before. Simply click on the plus icon and choose Single Image from the Element Library, that popped up on the left side.

Now we can add the image we want, by deleting the default image and choosing from the Media Library. And that's it! Hit on Save, and our popup is ready!

The last step is adding it to your website. There are two ways to go around this. You can either make the popup show up on the whole site or just on a specific page.

To display the popup we just made on the whole website, open your WordPress dashboard, locate Visual Composer in the left side menu, and click on Settings. There you'll find the Popup Settings tab. Specify the exit-intent popup simply by choosing it from the dropdown and don't forget to save the changes.

If you want to trigger the popup on a specific page, you'll have to open that page and in the frontend editor go to the On-Page Settings, that you can find in the navigation bar. There choose Popup from the dropdown and on the “On exit intent” section choose the popup you made.

Hit save now the popup will be triggered once a person tries to exit this specific page.

When everything is done and you're happy with the result, this is how the popup will look for the visitor.

It's just like in the frontend editor. Simple yet effective.

Conclusion

Now you can be sure, that creating a popup doesn't have to take up much of your time. It can be as little as a catchy text, simple button, and an interesting image. But it doesn't have to stop there. You can always make the popup as complex as you wish and Visual Composer has the tools to support all of your crazy ideas.

So in short, exit-intent popups are an essential marketing tool, and making them with Visual Composer is fast and easy.

Icons are a huge part of web design and are widely used for feature descriptions all around the web and most likely, you're here because you want to include some icons in your designs as well.

I'm sure that at some point in your life, you've played around with fonts in Microsoft Word and stumbled upon the Wingding icon font and could use that in your designs. It's not that simple in WordPress. But still pretty easy if you know what to do and what to look for and that's exactly what I'm going to tell you.

In this post we'll look into:

• What are icons and why use them;
• Where to find icons;
• How to add icons to your site;
• Beautiful examples.

What are icons and why use them?

Let's start off by simply saying that icons are used to accent written content in a meaningful way.

There are actually plenty of benefits to using icons in your design. They not only increase the readability of your site, by giving a visual representation of what's written but also is simply more memorable and eye-catching.

The icons separate the content, making it easier and faster to take in. We all know the statistic of most people looking at a site for less than 15 seconds, and that is not a lot. So these icons will direct their attention to the spot you want and make the content understandable even without reading it word for word.

I've collected a set of tips you can apply to your website design if you are using icons:

• Icons should be visual synonyms to the content you add them to;
• For consistent design - don't mix icon sets and fonts
• Icons can be used to give meaning to features;
• Make lists more attractive with icons. Simply adding a checkmark icon can make the list more readable;
• A good practice is to apply the accent colors of your page to the icons to make them stand out;
• You can add icons to buttons, to increase their meaning;
• You can also use icons as dividers.

In WordPress, what people usually use are icon fonts, not individual image-based icons, because icon fonts will be better for the performance of your site.

Where to find icons?

Finding icons may get a little overwhelming, so here are some of the most popular icon libraries you can browse around and find the one that suits your site the best.

Font Awesome

Font Awesome is the most popular icon library with free and pro icons available. Font Awesome has more than 7 000 icons that you can use and you'll be able to find the right one within their very easy to use icon library.
The easiest way to add any of the icons to your page would be with the Font Awesome plugin.

Iconify

This is a unified icon library with over 40,000 icons. The icons include social icons, weather icons, emojis and many more.

IcoMoon

IcoMoon is a service that offers a big library of icons. There are both free and premium icons available and they've separated them into three plans.
To use any of the icons, launch the free plan app, and then you can generate an SVG file, download it and add it to your WordPress site.

There's also an option to use the WP SVG Icons plugin, which generates a shortcode for the IcoMoon icon you want to use.

It has more than 490 icons that you can add.

Icofont

This is a service that offers more than 2100 free unique icons to add to your site. You can search for individual icons, or browse through categories.
You can add Icofont icons by downloading an SVG file and uploading that to your website.

Material Icons

Yet another open-source icon library that offers icons in different styles and categories. Material Icons allows download PNG files of their icons as well, so that means you won't have to worry about WordPress not supporting SVG files (by default, but there's a way to change that, so I'll talk about that later). But remember, that they will not be vectors, so be careful will the size, if you decide to use it.

How to add icons to your site?

There a couple of ways you could go around adding icons to your WordPress website. You could use an icon font plugin or a builder.

Add icons as SVG

Some of the icon libraries allow downloading SVG files, so an option is to download the icons and just add them as images. The issue with this method is that WordPress doesn't support SVG files by default, but you can use a plugin like SVG Support that fixes this problem.

Overall this might not be the best option, because it can also influence your site’s performance and choosing an icon font like Font Awesome would be a better option.

Add icons with a plugin

One way to add icons to your site is with a plugin, like the Font Awesome plugin. It allows adding any of the Font Awesome icons using a shortcode.

To do that, first, find the icon that you want to add. They've got a WordPress icon, so obviously, I'll demonstrate with it.

Now you have to remember the name of the icon, which is “wordpress” and simply add it to the shortcode which is:

[icon name="wordpress"]

At this point, to add it to the page, let's use the Gutenberg editors shortcode block and just add the shortcode. And that will add the icon. If you want to add a different icon, just replace its name in the shortcode and do the same thing.

If you are using the Classic Editor, you can copy the shortcode in the TinyMCE editor, and the icon will appear.

They have a basic use guide, where you can check out additional information on styling.

You can browse through the WordPress plugin directory, to find more icon pack plugins, like the WP SVG Icons plugin I mentioned before, that has the Icomoon Icon Font Importer feature, so you can use the IcoMoon icons.

Add icons with Visual Composer

If you are using Visual Composer, it might be the easiest option for adding icons, as Visual Composer has a complete icon sets integration. All free Font Awesome icons are available for the free version of Visual Composer and you can find them in our Icon elements.

Simply add one of the elements to a page and choose any of the icons. In Visual Composer, you also have a lot of styling options. You can change the size, the color, placement and more parameters in seconds.

If you are using the premium version of Visual Composer, you get access to a bunch more icon sets, like Feather, Dripicons, and many more. You can access them in the same place - the Icon elements. Just choose a set from the dropdown, and look through the multitude of icons.

Beautiful Examples

In this section, I wanted to share some inspirational examples of how people have used icons in their design.

Chobani

This brand uses multiple icon design as a divider.

Binaryblocks

Binaryblocks added a “play” icon to indicate a video.

Sproutsend

An icon is used to complement feature descriptions. Also, the checkmark icons are used to make the list more readable.

Sweet Punk

Sweet Punk uses and icon to accentuate their design.

Buddha Pizza

This pizza shop uses icons as section visualisations. Together with animations, this makes a very interesting and interactive design.

desiign

This digital agency uses icons in their navigation to make the sections more interesting and appealing. 

Conclusion

By using icons you will definitely benefit in multiple ways like grabbing your visitors' attention in seconds and bringing the information faster than before.

With the help of this complete guide to icons, browse around the most popular icon libraries, add them to your WordPress site and better your users’ experience.

In the latest version of the Visual Composer Premium, you can find 15 libraries and up to 1,263 new icons! Make sure to try them out! ????