Getting Started with Divi Overlays (2020)

hey everyone tim schreiffler here with divi life and in this tutorial i'm going to show you how to get started using the divi overlays plugin from divi life so in this tutorial i'm going to show you how to create your first divi overlays pop-up as well as show you the two most common trigger types which is the click trigger and the automatic time delay trigger and then i'm gonna give you a quick overview of all of the divi overlays features and the user interface and so they're not going to be in-depth tutorials into every feature however we do have additional tutorials that will show you how to use all the specific features that are included in divi overlays and you can find those in the divi live documentation center under divi overlays so the first thing we're going to do here is uh we're going to upload the plugin um but to do that first we need to make sure we have the plugin downloaded so if you haven't downloaded it already you can do so from the divi life customer portal so i'm on the all access pass downloads page so if you're an all access member you can download it directly from this page if you're not an all access pass member then you can download it here in the purchase downloads tab and so uh you can go ahead and do that now so i'm going to go ahead and come over here to our demo site and by the way this is what we're going to use for demonstration purposes for these tutorials this is the divi seo child theme here from divi life using a custom header from our ultimate divi headers collection and so i'm gonna go ahead and upload a plugin and so you're gonna upload divi overlays just like any other plugin so i'm going to go ahead and click add new upload plugin choose file i already have these set aside here i'm going to upload the zipped file and then i'm gonna hit activate plugin now i already have divi overlays i already had it active on this site and so it's not prompting me to plug in my license key but more than likely right now you're gonna see a notice saying that you need to activate your license key you can click there on that notice or you can come over here to settings and this is where you add your license key and so if you don't know your license key you can find it again in the divi live customer portal in the license keys and upgrades tab and you'll just copy that and paste it directly here into license key field and hit save and then after you hit save it's going to be hidden like it is here and it's not going to show it so in case you're doing this on a client site no one's going to have access to that license key once you've activated it and you'll see this green check mark just like this signifying that the license key is active and so once you do that go ahead and click save and then we're going to come over here and we're going to click add new to add a new divi overlay and so i'm going to give this a title here i'm just going to call it test overlay for our demonstration purposes and then i'm going to activate the divi builder so you're going to click on that use the divi builder button and then it's going to go ahead and load the builder just like you're used to seeing on any other page or post asking us if we want to use a pre-made layout from the divi library or build from scratch and we're going to go ahead and just click start building however we do want to use one of the pre-made divi overlays pop-up templates that comes with the plugin and so those are also found in the divi live customer portal on the plugin layout templates tab and so depending on what products you have access to you may not see all of this here but you should be seeing these divi overlays templates and so you can go ahead and download one and i already have them downloaded so i'm not going to click it again and so we're going to come over here to upload it we're going to upload directly to the screen here so you don't go into divi divi library you don't do that you upload directly to the divi overlay screen via the portability feature that's built directly into the divi builder this up and down arrow so you're going to go ahead and click there click import however uh one thing you will need to do is you'll need to they get downloaded in a zipped format and then you'll need to unzip it before uploading and so once you unzip it then you'll see the dot json file and you can go ahead and drag it and upload it that way all right so once it's uploaded here you can click over to the visual mode to see it and this is one of the templates here and so a couple things you'll notice here it doesn't look quite right and there's some extra margin and stuff part of that is because divi when it renders custom css it doesn't always uh render it perfectly in the visual builder but it'll look better on the actual uh screen when you trigger it on an actual page but one thing i do i want to do is show you just how to make edits so you're going to edit this overlay pop-up just like you would any other page in divi so all the controls all the design settings are all here like you're used to seeing so for example i'm going to go ahead and just decrease the the heading here so heading three so i'm gonna go to the design tab heading text click over here and i'm just gonna go ahead and whoops didn't mean to zoom in there go ahead and just change bring it down 20 is probably good click save and so you may need to do that depending on your uh what the styling that you have set in terms of your fonts and stuff like that you might need to tweak the the design because it's going to pull from the styling that you already have set on your website so i'm going to go ahead and come back here i'm going to hit publish just to get it go ahead and get it published and a couple things here that we're going to do first is we're going to go ahead and set an automatic trigger and so there's two um or there's lots of different trigger types but the two most common ways to trigger divi overlay is by clicking something on the page so whether that's a button whether it's an image whether it's a text link whether it's a menu item those are all ways that you can trigger it with a click and then the other most common way is a time delay trigger and so let's go ahead and set up a time delay trigger first so that we can see what this looks like on the front end of the site and so automatic triggers are all the way down here at the bottom and so by default there's none selected so all you have to do is click time delay and we'll just do 0 for this demonstration so it'll load immediately after the page is done loading so i'm going to go ahead and click update however actually before i do that i want to point out that the display locations by default it's set to all pages so all pages it's going to show the pop-up based off of the trigger that you have set and so i'm going to go ahead and leave it there but if you only want it to be on your home page you can click over to only specific pages and then type in your home page for example but i'm going to go ahead and leave it on all pages for this example and click update and then i have this front end of the site already loaded up here so i'm going to go ahead and refresh that and then as soon as the page loads it's going to trigger that overlay and so you can see immediately it triggered this is our pop-up template so it looks pretty good a couple things i do want to point out though is we have double close buttons and so some of our pop-up templates that you see here that are included with the plug-in have a custom close button and so uh the custom close button it's included in the template so we don't really need this one over here uh and so i'm gonna show you how to turn that off so we're gonna scroll all the way down here to the close button customization options and we're gonna simply check that box to hide main close button and hit update but before i do that i do want to point out that we can change the background color so you'll notice here the default's a basic gray color and it looks pretty good but i'd kind of like to brand it towards this uh towards this this child theme and so i'm gonna go ahead and grab this color here i'm using just the developer inspector tools just to get the exact color um and then we're gonna come back over here to the overlay edit screen and see at the bottom here overlay background this is where you set that background color and so if i leave it like this it's going to be a solid color but i want to add some a little bit a little bit of transparency so i'm going to block drop this down to 90 percent and then i'm going to come over here and click update we'll go ahead and refresh the page and so now you can see the background it matches the design of the divi seo child theme now if i was actually designing this for a real website i would probably change this blue to also match uh so that it's on brand with with my website and so you can see that's as simple as it is to create a divi overlay pop-up and trigger it with a automatic trigger and so now what we want to do is i'm going to show you how to do it with a click so let's come over here and let's turn off the automatic trigger so to turn it off you just set it to none and then what we're going to do is we're going to copy the css id and so make sure you got it copied to the clipboard there and we're going to hit update just because we're turning off that automatic trigger and so once you have that css id copied you can come over to the page that you want to trigger it on that you want to set up a click trigger for you can open up the the builder here and uh super simple all you have to do is find where you want to trigger it so i'm going to trigger it on that first button there and come over to the advanced tab where you have the css id and classes and you're going to paste that css id we copied from the overlay and paste it here in the css id field so very very simple now one thing you will have to make sure is that this button doesn't have any anything on it so for example if you have this linking to you know another page then you're going to have to remove that and so the divi if you don't have anything in here um then it's not going to work correctly so what you have to do is you have to put a number sign or hashtag which is a basically because the divi button module requires that you have something in here and then we can put open or or overlay or pop up or contact whatever in there it doesn't really matter all it matters is that you put something after this so that it'll work correctly and then you can go ahead and click save changes so let's go ahead and save the page here i'm going to go ahead and exit the visual builder and now you'll notice that when we click the get started button it pops up our divi overlay and so obviously you can do that as many times as you want so very very simple here those are the two most common trigger types using an automatic time delay trigger and then setting a click trigger with divi overlays and so you can add a click trigger to just about any part of the page and so you can do that the same way we did with the button module so if you wanted to do this blurb module you would just add the css id that's found right here in the manual triggers section of divi overlays and you would just add it to the css id field in the advanced tab of the module so very very simple very straightforward we have a more comprehensive tutorial on click triggers and how to add click triggers to the different areas of the site images text links menu items and so forth so definitely watch one of those tutorials if you have further questions on how to add click triggers so um as promised in this tutorial i'm going to give you a quick overview of divi overlay's interface and just give you a quick rundown of what all the future the features are but again you can watch the specific tutorials in the divi live documentation center for divi overlays if you want to learn more about each and every feature and so the manual triggers here cssid we already use this to set up a click trigger and then if you're setting up a menu uh click trigger then you use the menu id and so that works a little bit different and so you're going to copy that and then the divi overlays animation this is where you set the animation that you want for the for the overlay when it triggers so for example content scale i'll just go ahead and hit update you can see the additional animation here so the default fade and slide is one you were seeing which is a simple animation that slightly and subtly fades and slides as it animates in and then content scale this one's a little bit different uh which is pretty cool and so if you like that you can use that one so that's the the animation options we have different ones that you can choose from and then the display locations this is exactly what it sounds like this is the pages that you want your overlay to display on now one thing worth noting is if you're doing a click trigger you don't really have to worry about this because divi overlays will intelligently scan all pages and automatically add the overlay content in the background when you have a click trigger set on the page and so you don't have to worry about that the display locations is most important when you're using an automatic trigger with divi overlays and so you want to make sure that you have this set the way you want it when using automatic trigger so for example if you have all pages it will literally be all pages of your site and so if you only want the time delay to happen on maybe your home page and a couple other pages then what you want to do is do only specific pages however say for example you want to be on all pages except maybe your checkout page well then you can do all pages and then add the exception here and you simply just type the name of the page and then it's going to show up there so very very simple and then the same thing you can have it on certain categories add exceptions or certain tags for example so that's how you do that so under additional overlay settings a couple features to make note of is the css selector trigger so this is uh when you're setting a click trigger for example if there isn't a built-in css id field to add the click trigger id then you would use this and put in a custom css string so say for example you were using a like the pricing module the different pricing tables it doesn't give you an individual css id field for each and every column and so you can basically target using css just one part of the css table as the click trigger and so we have an advanced tutorial on that that you can watch to learn more about how to do that and so um that's how you what the css select trigger is so that's a more advanced feature so you probably won't need that um but it's there if you do so prevent main page scrolling so uh by default the divi overlay uh will allow you to scroll the page behind um but say for example you didn't want the user to be able to do that then you just check that box and that would keep the page from scrolling url triggers that is a trigger type to trigger the uh the divi overlay from the the url so for example you just grab this id and you type overlay like this and then basically what it does is when it loads the page because of what you have in the link it will automatically trigger the overlay so you can see as soon as it loaded it it did that so the benefit of that is being able to trigger an overlay directly from an external page so say for example you have an overlay in this get started link but you wanted people to send people directly to that and not have to instruct them to click that button well then you can send a link or paste a link with the url trigger and it will automatically trigger the overlay when the page loads based off of what's in that url string so a very powerful feature there enable ajax basically what this does is it loads the content on call so typically the way that divi overlays works is it loads the overlay content in the background so that as soon as you click that button it will be able to trigger and it makes it so it's instant it's a better user experience but in some cases you may want the overlay content to not load until the the link or the button is clicked so for example if you have a lot of overlays on one page with a lot of big images then it can potentially slow down your website if you have a lot of those overlays on one page with a lot of big images and so what you can do is you can load the content on call via ajax so then it's not going to actually load the images and the overlay content until that specific overlay is triggered and so uh the downside to that is it will show a little bit of a scroll icon scroll wheel until the overlay content loads and then it triggers so it's not quite as good of user experience because it makes the user wait while it loads the content but it can be very very beneficial in certain circumstances when you have a website with a ton of overlays on one page so that's load over ajax close button customizations so close button cookies this is when you you want the overlay to not continuously pop up so say you have an automatic trigger set and you want it to display the the pop-up only the first time that the visitor visits and then you don't want it to really happen again after that so what you do is you can turn on close button cookies and you can set it to up to 99 days that means for the next 100 days when they continuously come back to your site it's not going to continuously be blasting them with that same pop-up and so once they close it once they won't see it again for 99 days and so so that's how you use that feature which is very beneficial for user experience one thing that we recommend doing is don't turn this on until you have everything set and built and designed just the way you want because otherwise you won't be able to see it if you close it once that feature is on and so it can make it a little bit of a pain for testing and then a high main close button that's what we turned on that will hide the default close button that appears in the upper right customize close button this will allow you to customize the default close button so you have to make sure it's enabled and then you can change the text color you can change the background color you can change the font size make it bigger add some padding you can make it round so you can really make it look any way you want there to create that custom close button in the upper right hand corner of the screen and then automatic triggers we already showed you time delay there's also scroll percentage so scroll percentage is if you uh you want to trigger it based off of how much of the page that they've scrolled so say for example on a large page 500 pixels it's not going to trigger until they have scrolled down 500 5000 pixels so i'm going to go ahead and update this and show you what that looks like quickly okay so it should be triggering any second here yep and there we go so we hit that 5000 pixel mark of the page so then it triggered that overlay and then now you can see the custom button that we designed uh using the the custom uh button uh or the the button customizer and so you can see what that looks like there um so that are that's what those features look like here um go ahead and turn this off uh exit intent so exit intent is a pop-up that uh or a trigger type that will uh trigger the pop-up right as a user is about to leave the page and so you've probably seen this on websites that you're on uh you're about to hit that back button and then they hit you with that last stitch effort to try to grab your attention and so that's exactly what exit intent is and so when your mouse leaves the area of the the screen going towards the back button is when it triggers it can be a really effective way of keeping the user on your site and offering them one last thing and so that's how that works so those are the the basic features of divi overlays so definitely take a look at the additional tutorials to learn how to do all these features more in depth one thing i do want to point out is the way that divi overlays works is you have the entire container to do what you want and then that's what displays on the page and so for example if you want it to be wider or you want to be larger you basically set those dimensions uh within the divi overlays within the builder and so for example here you can make this the section uh of this template it is set to 640 pixels but say we want to make it bigger well we can do that we can make it as big as we want the design is going to fall apart a little bit but that's how you change the dimensions of the overlay popup now we have additional templates that have a like a background or a background color so for example i'm going to go ahead and import the july 4th template let me go ahead and unzip that so with this template we have a background gradient with the section divider to give it a really unique look so let's go ahead and refresh this and so you can see here uh the the size of this pop-up is set with the row and then the section is set to full width and then we have the background gradient set uh in the section and so that's how that works so if you wanted to make this area smaller or larger well then you would do that within the the section um and so adjust the padding there and so that's how that's how davey overlays works is if you want to change the width or the height of the the container will you do that directly in the builder and so it gives you the ultimate control to be able to do that so that if you want to do a background gradient you can do that in the section or if you want to add a background image you can do that as well and so um so that's how that works so we're going to have additional tutorials on how to change the uh the width and height and center stuff as well as adjust stuff for mobile so definitely be on the lookout for those uh in the the dv overlays uh area of the documentation center for divi life all right we'll see on the next tutorial take care bye-bye

Channel: Divi Life

Views: 6,556

Keywords: divi overlays, divi popup, divi popup builder, divi popups, divi overlay, divi overlays plugin, Divi Plugins, Divi Theme, Divi Life, Tim Strifler

Id: WQcVo4rCF-w

Length: 25min 48sec (1548 seconds)

Published: Mon Aug 24 2020