In Web Development
Best Wordpress Popup Plugin in 2021 [QUICK & EASY] - read the full article about wordpress 2021, Web Development and from Funnel Krafter on Qualified.One
Youtube Blogger
in this video were going to go over the two best wordpress pop-up plugins for creating all kinds of things like exit popups button triggered pop-ups displaying coupons email opt-in forms and much more the first one is free and the second one is paid but it has a bunch more customization options and advanced features so the first one is called pop-up maker go to plugins add new and its this one here with the green gears icon after you install it and activate it youll find a new option here on the sidebar menu for pop-up maker so lets go to it and select create popup enter a name for it this will only show up in your dashboard and visitors wont see this name you can optionally enter a title which will show up at the top of the popup and then just enter your content you can add images paste your autoresponder form code and hear if youre doing email marketing and anything else you would add on a regular wordpress page or post once youre done you can add a new trigger down here to display this popup when a person clicks on a button on time delay auto open or form submission you can check this box to prevent the pop-up from showing to a visitor multiple times by using a cookie and then here on the settings if we choose auto open which is the most common one you can set the time delay for opening the pop-up zero milliseconds if you want the pop-up to be displayed immediately as soon as the page is loaded or 500 for 5 seconds and so on you can edit the cookie and change the time so that a user will only see this pop-up once a month or week or day or any time period you want all right on targeting we can choose where to display this pop-up whether its just on the home page or any other specific page but by default this pop-up will be loaded on every page on your site so you can leave this blank if you prefer you can disable this pop-up on mobile and tablets and then on display you can choose the location of the pop-up on the page from these four options you can change the size animation sounds position and some advanced options but you can also change the appearance from these different themes you can see how each one looks by clicking on customize this theme just make sure you open it on a new tab so you dont lose your unsaved progress and right here on the right side we can see how it looks these are very basic pop-ups and you can edit the settings here and change the overlay color and opacity which is this semi-transparent background behind the pop-up you can edit the container itself and change the padding border background and drop shadow modify the title settings like the font size and color as well as the content and the close button when youre done click on update and then go back here to finish creating your popup theres some more options for the close button here and advanced settings and once youre done click on publish so if we now check out our website and wait 5 seconds which is the time delay we set on the pop-up well see it come up and by the way if you thought that was easy please dont forget to hit that like button now if you wanted to trigger this pop-up by clicking on a button make sure to set the trigger on click open then go to the all pop-ups page here and well see that next to each pop-up theres a css class you would have to know some coding to add this class to your buttons but if youre building your site with elementor which is a drag and drop page builder you would just need to copy this class edit your page where you want to show this pop-up click on the button that you want to link to the pop-up go to the advanced tab and in the css class field paste the class you copied from pop-up maker so now if we save and preview when we click on the button the pop-up is displayed and you can also add this class on images or any other element by the way this side youre seeing right now is one of our free templates that you can download and use on your wordpress were giving away our professional designs completely for free so if youd like to use any of them you can get them with the link in the description below alright so that was the first method for creating a wordpress popup and the second one is paid but it lets you do a bunch of advanced things like triggering a pop-up on exit intent creating a pop-up for things like this search icon creating cool mobile menus like this one adding animations and designing your pop-up exactly how you want it to look without any limitations you can do all this with the pro version of elementor which is the drag-and-drop page builder we just looked at and this elementor pro version not only gives you pop-ups but a bunch of other things as well chances are you also want to add things like sliders contact forms animated headlines counters and a bunch of other things to your site and with this plugin its all possible you can get it with the link in the description where youll also get our free bonus step-by-step elementor course and lets now take a look at a video from that course showing how to easily build these advanced popups so to do this we first have to go to the wordpress dashboard and click on templates pop-ups click on add new pop-up should be selected by default here and then just enter a name for this pop-up well see different pop-up templates we can choose from theres all kinds of templates for different things such as offering a discount capture emails etc you can try to find one thats similar to what youre trying to do or you can close this window and create one from scratch im going to choose this one for now and after it loads here on the bottom left you can edit the pop-up settings where youll find several options such as the width height position you can disable the overlay which is the background color behind the pop-up you can disable the close button which is the x at the top right of the pop-up you can add an entrance and exit animation in the style tab you can edit things like the background image you can change the overlay color or edit the close button okay in the advanced tab you can edit things like show the close button after x amount of seconds or automatically close the popup after x amount of seconds prevent the pop-up from being closed when you click on the overlay or with the escape key on the keyboard disable scrolling of the page while the popup is open or if the user already saw another pop-up on the page hide this one okay so those are the pop-up settings and then to design it all these sections and elements can be edited just like in any of your pages you can delete elements you dont need change the colors change the title change the button text and link and of course you can add any other element you need like a contact form so that people can opt into your email list and when your pop-up is ready we click on publish to bring up the publish settings on the conditions tab you must click on this button to add a condition and specify where you want to show this popup it can be on the entire site or if we go to singular we can make it appear only on blog posts or in pages if you only want it to appear on a particular page you search for it here and if you also want the pop-up to appear on other specific pages only you can add them here one by one you can also display the pop-up on your woocommerce pages if youre selling any products such as the shop page or on product pages or if you want it to appear on the entire site except these pages we just exclude them here and then add the condition to include it on the entire site okay up next is the triggers tab where you select when you want the popup to appear so for example on page load and within how many seconds when scrolling up or down a percentage of the page when scrolling to a certain element on your page so for example if you have an image or any element or section thats repeated on several pages in the advanced tab you just need to add a css class here it can be any name you want something like pop-up then right here on the pop-up selector youd enter dot pop-up or whatever css class you chose and this way the pop-up will appear when users scroll to an element on your page containing the css class you can make the pop-up appear after a certain number of clicks after the user has become inactive within this amount of seconds so if the user has not moved the mouse or done anything else on your site within 30 seconds this pop-up would appear and finally this one is very popular and its when the user tries to leave the page so if someone is browsing through your site and they suddenly move their mouse towards the top of the browser this often means that theyre probably about to leave your site and we can make the pop-up appear offering something like a discount to convince them to say okay and finally on the advanced rules tab we got some more advanced options like showing the pop-up only after having viewed x number of pages after x number of visits to your website show the pop-up up to x amount of times this one is very important if you dont want your pop-up to appear every single time a user visits your website you can set a limit here when arriving from a specific url so if youre running facebook ads and enter facebook here only the people who come from your ads would see this pop-up show when arriving from google or other search engines from external links so when someone shares your site on their blog or forums reddit etc or internal links which is links that you add on your own website hide the pop-up for users who are currently logged into your website and finally you can control on which devices you want to show the pop-up okay so when you have all this set up just click on save and your pop-up will be ready to go since i set it up to show this pop-up on the entire site on page load after three seconds if you go to any of our pages the pop-up appears after three seconds all right another way to open a pop-up is when visitors click a specific button on one of your pages so to do that we come back to the publish settings just click on this little arrow next to the publish button click on display conditions disable all the settings save the changes and then go to the bottom where you want to link your pop-up on the link field click here on this dynamic tags icon under actions select pop-up then click on it again search for the name of your popup and if we save this page and then preview when we click on this button the pop-up will appear okay so its super easy to create these pop-ups but at the same time you got some really powerful settings that you wont find in any other pop-up plugin all right so these were the two best wordpress pop-up plugins pop-up maker which is free and elementor pro which not only gives you the pop-up builder but its like having 100 plugins in one so go ahead and let me know in the comments which wordpress pop-up plugin will you try out and again dont forget to check out the free wordpress templates that you can download and use on your own websites by clicking the link in the description below thank you so much for watching heres some more recommended videos you can check out and ill see you there
Funnel Krafter: Best Wordpress Popup Plugin in 2021 [QUICK & EASY] - Web Development