Build elegant pop-up windows in WordPress with the plug-in Popup-Maker

Popup Maker for Popups in Wordpress

As a rule, I create all websites for my customers with the WordPress blog system. Exceptions are websites where I have to create individual programming with PHP - but otherwise: everything in WordPress. As I mention below, there have been several requests from customers to include a popup on the page, which is why I have now started looking for popup solutions for WordPress.

Update 10.11.2021/XNUMX/XNUMX: two new recommendations

The article is a bit older and in the meantime I have gained more experience with various plugins and services. The Popup Maker plugin is still ok, but from my point of view it is a rudimentary solution that I would no longer recommend unreservedly. The popups that you create with it are not as easy to make "pretty" as with two other plugins or services that I would now like to recommend to you.

GetSiteControl

The first is a service that is not limited to WordPress, but in which you can choose from many templates with a super-simple wizard and then adapt the design and specify on which pages the popup should appear, how often it should be displayed and how to trigger it.

Once you have finished designing the popup, install the service plugin on your WordPress site (the plugin is also called "GetSiteControl") and connect the site to the service - done.

Disadvantage: Unfortunately, the service costs money monthly or annually - but from my point of view it is absolutely worth the expense. I use it, for example, to show my newsletter popup at the bottom of my blog.

» continue to GetSiteControl

Elfsight

Another service that is also super-easy - but unfortunately a bit expensive - is Elfsight. On this website, a programming team offers countless functional extensions for WordPress, including popups.

At Elfsight you are also in a very easy to use interface and choose from existing templates, which you can then customize. The extensions are all very well thought out and beautifully designed.

» continue to Elfsight

Triggered by the corona pandemic, two customers have asked whether I could create a popup on the website for them that shows visitors how the services of my customers can still be used.

With a pop-up window you can easily inform your website visitors about current procedures in the corona crisis (photos: Sir Apfelot).

With a pop-up window you can easily inform your website visitors about current procedures in the corona crisis (photos: Sir Apfelot).

TL; DR: For everyone who doesn't feel like reading all of my explanations: You will find the Popup Maker plugin, which is about here in the collection of WordPress plugins on wordpress.org or directly on the provider's website.

In fact, the term pop-up window is not quite correct, even if everyone uses it that way. In practice, this is just an overlay element that hovers over the rest of the website. A pop-up window, on the other hand, is an independent browser window that is opened by a script and is then in the foreground.

The "real" popup windows were abolished years ago because they were massively abused for advertising windows. In the meantime, every browser independently intercepts such windows so that they do not annoy the user. The user then usually only sees an indication that a page has tried to open a pop-up window.

So we are taking care of an overlay window here - even if we do it with the "Popup Maker" plugin, which has the wrong name.

In Safari, real pop-up windows are suppressed by default - unless they are explicitly enabled on a website. Our overlay popup is not affected.

In Safari, real pop-up windows are suppressed by default, unless they are explicitly enabled on a website. Our overlay popup is not affected.

There is a huge selection of popup plugins for WordPress. I tried a few plugins and it was not uncommon for them to be solutions that were free as plugins, but for a functioning implementation you should then take out a monthly subscription to a connected service.

In contrast, the completely free variants are often faulty and do not open for some inexplicable reason, or they only look good on the desktop or tablet and are displayed incorrectly on the smartphone - i.e. unusable.

Popup Maker was the first plugin that offered many setting options, simple operation, free use and perfect functionality. Accordingly, I would like to present it here as a recommendation. You find it here on the provider website.

The basic version of Popup Maker is free and already offers enough functionality to combine popups with cookies.

The basic version of Popup Maker is free and already offers enough functionality to combine popups with cookies.

Requirements for implementation

In order to reach as many visitors as possible with the window that is displayed, it should not only appear on the home page, but also on all sub-pages that people can access via links on Google, for example.

It was also important to me that the popup (I consistently use the wrong name in the rest of the text) is only displayed once per day and visitor. For this purpose, the plugin must set a cookie that remains for one day. The cookie should already be set when the popup opens and not only after it is closed - if visitors jump off, the window will not be displayed again the next time they visit.

The last wish was the design of the content. Both simple texts and graphics should be able to be used here. To do this, the overlay must look good on the Mac as well as on the iPad and iPhone - i.e. it must be responsive and adapt to the end device.

All of these things can be done with the popup Maker solve - even in the free basic version.

The popup is designed in a WYSIWYG editor in which you can work with CSS and HTML or just with text and images.

The popup is designed in a WYSIWYG editor in which you can work with CSS and HTML or just with text and images.

Settings in the plugin

I want you based on my current customer project www.knowwau.com show which settings I have made in the plugin. My customer gave me permission to do so and will hopefully get a few visitors to this article as a thank you.

If you are interested in dog training and would like to take a look at some of their online courses (since you currently cannot go to any dog ​​school), then I would like you to visit their website knowwau.com warmly recommend. You can currently find the popup in action there. ;-)

Popup Maker trigger

In the settings for the shutter release, I always choose that the window should open automatically after half a second. At the same time, a cookie with a duration of one day is set so that visitors only see the cookie once every 24 hours.

Popup Maker Targeting

The Targeting area enables the selection of the pages on which the popup should appear. There are numerous options here. If you don't select anything, the banner will appear on all pages.

 

Popup Maker Theme Editor

You can choose between different themes and change them in the theme editor. Here, for example, the transparency in the background can be set or the spacing and size of the window can be changed. I left everything as it was and only set the transparency to 80%. The rest is already ideal for display on desktop computers and mobile devices.

Popup Maker close button

There is a separate area in the plugin for adjusting the "Close" button. This allows you to decide where the button appears, what color it is and what text it has.

Test popups with customers

Of course, when you're working on a popup, you don't want every visitor to be confronted with the construction work. For this reason I always set the trigger so that the popup only appears if there are 404 errors. So if you call up a URL that does not exist on the website. To do this, simply add "/ abc" or something similar to the domain and call this URL.

In order to avoid the fact that you can only test the popup once a day, I always use an incognito window or a private window, since no cookies are stored in these browser windows and the popup is shown again and again.

For testing purposes, I select the 404 pages when targeting and then open a missing subpage in a private browser window.

For testing purposes, I select the 404 pages when targeting and then open a missing subpage in a private browser window.

On exit intent and other specialties

If you want to make an on exit intent popup - i.e. a popup that opens when the visitor moves the mouse pointer out of the browser window - then you unfortunately have to subscribe to Popup Maker Service book. The prices (USD 247 per year) are quite steep there, so I would rather look for an alternative at this point.

The prices of Popup Maker - if you cannot get by with the functions of the free basic version - are not entirely without. But the plugin is really functional and reliable.

The prices of Popup Maker - if you cannot get by with the functions of the free basic version - are not entirely without. But the plugin is really functional and reliable.

However, if you earn money with your blog and are willing to pay for a comprehensive popup tool that combines ease of use and clean popups, you can still take a look at the Popup Maker subscriptions.

-
Do you like my blog? Then I would be happy to receive a short review on Google. Easy leave something here for a moment - that would be great, thank you!

 

Effectively for free: iPhone 13 Mini and iPhone 13 deals with top conditions at Otelo - Advertisement

6 comments

  1. Peter says:

    I have already liked to use Popup Maker (in the free basic version) and am also essentially satisfied with the possibilities. By the way, thank you for the tips on handling "construction work" with the plug-in - I haven't had that on my screen before ... and therefore gave one or the other visitor to the site a few insights into the progress of the implementation ...

    What I do not find so convincing are, for example, the options for formatting the popup text. Spaces between paragraphs or from the headline to the text - as far as I've seen it so far - cannot be influenced with the standard formatting options, for example (and are virtually non-existent). In particular, the text always hangs directly under the heading.

    However, with a little knowledge of CSS, you can format the whole thing quite individually - beyond the themes supplied - once you have obtained the classes and / or IDs used by the plugin (for example via the browser's own "Inspector") and the Changes are then stored in the WP backend for the website's custom CSS. For example, typography and colors can be customized if you value them, but of course also general design aspects such as edge distances, etc.

    • Sir Apfelot says:

      Hi Peter! Yes, you have to know a little CSS when it comes to fine-tuning to make it chic. But basically the standard template can already be used. I had seen much more cruel popups with other plugins. : D

  2. Thomas says:

    Hallo,
    I want to show two independent popups, but only one is shown at a time :-(

    • Jens Kleinholz says:

      Hello Thomas! Even if it could be technically possible, I wouldn't give the visitors two popups. This is extremely annoying and should not have a positive effect on the time spent visiting your website. What you up to? Maybe there is a more elegant solution?

  3. Sophie says:

    Thank you for this really helpful article.
    Which tool do you use to create the runtime cookie?

    • Jens Kleinholz says:

      Hello Sophie! I am currently not using the script at all because I do not use any popups on my site. You have to get an OK from the user for every cookie and that's why I do without everything that is possible.

Leave a Comment

Your e-mail address will not be published. Required fields are marked with * .