How to add a free popup GDPR privacy policy to your website

by | Feb 3, 2021 | Divi Theme, Web Design, Wordpress

How to add a free popup GDPR privacy policy to your website. Welcome to another Divi video this is Jamie from system22.net and web-design-and-tech-tips.com – Well today we’re using the awesome Divi supreme modules, and we’re going to create this this pop-up GDPR privacy policy. It’s GDPR compliant and I’ll show you where to get this for free. You just modify it to your needs, that’s a nice little feature to have on your site and it will make you gdpr compliant. So let’s get started.

How to add a free popup GDPR privacy policy to your website

First thing I’m going to do is enable the visual builder. While that’s enabling, I’m going to go over to this site, and they’ve got a privacy policy, free template 100% GDPR compliant. If you click on that, it’ll take you down to it. Up at the top here, if you happen to be watching in a different language, you can select currencies and languages right here, and I’ll put this link below the video. All I’m going to do is simply select it all, it’s all the stuff that’s highlighted in the bluey green down there. There’s quite a lot of it and this will save you a lot of time doing your own. Obviously if you want to do your own that’s fine too. Okay I’m going to copy this.

How to add a free popup GDPR privacy policy to your website

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.

How to add a free popup GDPR privacy policy to your website

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.

How to add a free popup GDPR privacy policy to your website

Great, so I’m going to save that we’ve got, our privacy policy right here. If I roll down, there it is, and there’s plenty of it! Obviously go through and just change anything that works for your company in there. Make sure it’s going to work for you, it’s pretty general and it’s going to work for most things I’m pretty sure. So now we’ve got this made, I can save it to my library. I’m going to hover over the module. To save it to my library click the little round icon just the left of the trash can there. Give it a name, and save it to the library. You may ask why we’re saving it to the library. This is a great feature to have any way, you can make a page on its own, just to have a privacy policy. But we’re going to make it into a pop-up with the Divi supreme modules plugin. Like I say you will need to have Divi supreme pro installed and activated to make this work today.

How to add a free popup GDPR privacy policy to your website

If we go to our dashboard and go down to Divi supreme pro, click on it. You want to make sure you’ve got ‘enable Divi pop-up’ switched on, so it’s purple like this. Save your changes. If you fail to do this, this won’t work today. Okay so we’ve got that switch switched on, we’ve got our privacy policy. I don’t need this anymore now, it’s in our library. I’m going to trash it so I’m simply going to click on the trash can.

How to add a free popup GDPR privacy policy to your website

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.

How to add a free popup GDPR privacy policy to your website

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 to add a free popup GDPR privacy policy to your website

If we go over to our advanced tab right here. Go down to visibility, roll on down a little bit, you’re going to see a little switch that says ‘use pop-up’. Now if you didn’t enable the switch for the Divi supreme modules that I showed you just now, this won’t be here, so you need to complete that step first. In Divi supreme make sure your use pop-up is switched to on. I’m going to switch mine to on here so I can use it as a pop-up. What do we want to pop up? We want to pop up a layout. There are different options you can pop up; an iframe, an image or a video, and we’ve done previous videos on all of those. We want it to pop up our privacy policy that we just built and put in the library. So, let’s select library. It should be the newest, and will be down the bottom. There it is, privacy, great!

How to add a free popup GDPR privacy policy to your website

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.

How to add a free popup GDPR privacy policy to your website

If we move down, we’ve got auto close pop-up. We don’t need that today. That’s if you want it to close after a certain time period, say 5 seconds or 30 seconds, or a minute, whatever it is. Switch that to on and put in your time. But that’s not going to work for us today because they’d need about an hour to read this privacy policy it’s so long! But of course, that’s up to you!

How to add a free popup GDPR privacy policy to your website

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.

How to add a free popup GDPR privacy policy to your website

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 an overlay. For anybody that doesn’t know, when it pops up, you’re going to have an overlay like you have with a lightbox image. So the website will be blackened out a little bit, and it’ll be focusing on our privacy policy. There’s the color for the overlay. If you want to change it, you do so here.

How to add a free popup GDPR privacy policy to your website

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.

How to add a free popup GDPR privacy policy to your website

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 we go there’s our GDPR privacy policy. As you can see, it’s got the hand icon in there, indicating that you can click on it. We’ll click on it, and there’s our policy, faded in big. There’s our little close button, when I close it, I think it’s going to fade out the right, that’s the way I had it settings. Of course they can scroll down and read it all if they want to.

How to add a free popup GDPR privacy policy to your website

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.

So there you have it guys there is how to add a free popup gdpr privacy policy to the bottom of your website, or anywhere else you may want to add it. Like I say, that will keep you GDPR compliant. I hope you’ve enjoyed this today and found it useful. If you have please give it a thumbs up, comment, share and subscribe to our YouTube channel. Once again this has been Jamie from system22.net and web-design-and-tech-tips.com – That’s how to add a free popup GDPR privacy policy to your website. Thanks for watching have a great day.

For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.

Subscribe To Our YouTube Channel

4.5 million views on youtube




Learn Bootstrap

Bootstrap (no coding) Build Bootstrap Websites the Easy Way! rating

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder




Pin It on Pinterest

Share This