Let’s go back here. I’ve got the builder enabled now. Just going to add a new row, the little green button, and make it one column. It really doesn’t matter too much what we do here, because we’re going to delete it and save this to our library anyway.
So let’s go down and we’ll use a blurb module, purely because we can use an icon with it. Give it whatever title you want. Obviously, we need to paste our content in here, there we go, we’ve pasted that all in there. If I roll down a little bit, there it is down there. I don’t want an image if you want an image that’s fine, I’m just going to use a little icon. If we go down past our content and go down below it. Image an icon. I’m going to use an icon, so I’m going to switch this little switch to on.
The blurb module is just a regular module of Divi, you don’t need anything, any other external plugins to use this today. Roll down and find an exclamation mark icon, that will do nicely. Not going to link it anywhere. I’m going to give it a black background. Obviously styling wise you give yours whatever color you want, and for the design image and icon, I’m going to make that little icon purple.
Title text. I want to make that light in color. I’m going to leave it a line left. Just below text color I’m going to make mine light, so it stands out there. My title I’m going to put that in the middle, make it a bit bigger. I’m going to make it purple. For no particular reason! There we go, that stands out, and just to finish off, I want to give it a little bit of spacing just top and bottom. Just put the number in, it’ll put the px in there for you. Hit the chain, it’ll do the opposite side for you. Okay, so when you’re happy we’ll give it a border on the top and the bottom. Let’s give it five px top and you can see that there. I’ll do the similar thing on the bottom also.
We’re putting it in our footer today, and that’s a custom footer. So if we go back to our dashboard down to Divi we can go to theme builder. Here’s our global footer. I’m not going to go through building a global footer again. I’ll put the link to building that down below this video if anybody needs to watch. It’s very simple, but I’m just going to edit the one that we’ve got there.
I’m going to go into the global footer and I’ll delete the module that I’ve got in here. Okay, well let’s start again. I’m simply going to add a module, you can add any module you want, again I’m just going to use a little blurb because it’s got the icon on it. Put whatever you want for your title obviously. Don’t want any content there whatsoever. Again, I’m going to use an icon, so I’m going to switch the little icon button to on. I’ll use that same little icon, there it is, you can see it there. We’ve actually got the title there now. We need to style it, so let’s go over to our design tab. Image and icon and make it purple and a lot smaller. You can circle it if you want to, and put a color in there. I really don’t want to do that; I just want the little icon itself. I want it in the center where it is. I want it a lot smaller, so I’m going to flip the icon font size to on, and let’s take it down to about 50 pixels. Again, styling that’s completely up to you! Let’s go down and find our title text. I’m going to pop this into the middle, I’m going to make it light in color so we can see it, there we go! Now I just want to pop this down a little bit, so it’s more in line with the others. I’m going to go to design Roll down just a bit, and add a little bit more to spacing. I’m going to give it about 30 pixels padding on the top. I think that’s going to work, great, okay now comes the fun part we’ve got to turn it into a pop-up.
How do we want it to trigger? Well we want it to trigger when we click on the module, so that’s absolutely fine there. There are various options here as well; you can trigger on a button. If there’s a button in the module there, or you could have used the button module. You can trigger it on an image, or a hyperlink, or when the page loads it can trigger. You can trigger it on scroll, and you can also trigger it on exit intent. In other words, when people go up to click off the site, it’ll trigger it that way, and that’s really handy little feature right there. But I’m happy to do it on module click right here. To close the pop-up, anywhere that they click on it outside the pop-up will work. Or you can just have a close button to do it if you prefer. I’m going to use that; it will have a close button also.
Entrance animation and exit, we’ve got all kind of animations. There’s plenty to choose from as you can see. Just choose whatever works for you.
I want the pop-up position to be in the center. I want it to be absolute also, it means when they if they try and scroll, it’ll stay just where it is.
Use full width. I don’t need this; this is a great feature also. If you click this to on, when it pops up you won’t see a menu or footer, or any of the site behind, you’ll just see the actual module that’s popping up itself.
There’s a max width here. It’s 680, that works for me on most devices. If you want to change it on tablet and mobile, you can do so here. So you can have one for desktop, one size for tablet, and one size for mobile.
Show a close button. Yes, we’ll have a little close button inside the module, that’s fine. You can choose the icon font size here. By default, it’s set on X, which is pretty standard for closing things. I’m going to leave it just like that. Close button background color is white. Close button color, here’s a dark color. I’m going to take the background color away. I’m going to make mine white because our form is dark.
That’s it, that should pretty much work for us. So let’s save this, make sure we save our menu. Exit out, make sure all our changes are saved up here. Let’s visit the site. I know I’ve got it open in the other tab already, but let’s have a fresh look. Roll on down to the bottom.
There it is! That’s a great little feature to have on your site. Some countries may even require you to have it, and once again, I’ll put the link to this free policy below the video.