How to Create a Cookie Consent Popup using Divi Popup Extension

If you use cookies on your site and want to show a nice cookie notice on your site then you should continue with this tutorial. Cookies are always good to provide the best experience to users but doesn’t mean it works out of the box. So today we’ll teach you how to create a simple cookie consent popup in Divi Using Divi Supreme’s Popup Extension.

What is Cookie

Cookies are usually small text files, given ID tags that are stored on your computer’s browser directory or program data subfolders. Cookies are created when you use your browser to visit a website that uses cookies to keep track of your movements within the site, help you resume where you left off, remember your registered login, theme selection, preferences, and other customization functions. The website stores a corresponding file(with same ID tag)to the one they set in your browser and in this file they can track and keep information on your movements within the site and any information you may have voluntarily given while visiting the website, such as email address.

Design the Cookie Notice

The first thing you’ll have to do is to prepare a notice design inside Divi Library. Just click on the Add New button at the top to create and design a cookie notice.

You’ll see a Popup to add a Name and select Layout type. Simply enter any name for your Layout and choose Layout type as Layout.

Now you’ll be able to see Divi Builder design a Cookie Notice. Simple do any kind of design here you like.
Note: Only use One button in the Notice so Divi Supreme will understand it as Accept and will not show the Popup again to the user.

Below we’ve added a Layout that you can get for free along with 2 more designs below in this post.

So when you’re done with designing Cookie Notice. You’ll now need to go to Divi -> Theme Builder -> Edit/Add Global Header to add out Cookie notice to complete the site. When a user land on any page they’ll see this Cookie notice.

Once you’re in Theme Builder and Editing Footer, Now you can open up any Module settings in the Footer we’ve got a button in the Footer so we’ll open up the Button Module Settings -> Advanced -> Visibility -> Enable the Use Popup switch.

After enabling the Use Popup switch you’ll see a bunch of new options to set up your Popup as we’re currently working on Cookie Consent Popup here is some of the Important settings you’ll need to do to make a Cookie Consent with Divi Supreme Popup extension.

  • Popup (Divi Library) – Select the Layout you’ve created for Cookie Notice here.
  • Trigger On – Choose Page Load and you’ll see a new option as Use as Cookie Consent.
  • Use as Cookie Consent – Enable this switch to let the notice show as Cookie consent.

You’re done with doing Important Changes you should also take a look at other settings to let your Notice work perfectly according to your need. You should definitely take a look at these settings too.

  • Cookie Expiry – Add cookie expiry to your Notice in days and after that, the user who’ve already accepted cookies will see the Cookie Notice again.
  • Popup Position – Using this option you can change the position of the Popup to all the areas of the screen
  • Popup Position Type – Another Important thing you need to do for the Cookie Notice to work perfectly is to choose Popup Position Type as Fixed.

Those are some options you need to check out to make it(cookie notice) work perfectly. You’ve also got so many other options to style your Popup like making popup Fullwidth, Popup In/Out Animation Overlay, and more. Why not check them as well!

So you’re done with setting up the Cookie Notice for your site. Save all the Changes and see your site in the frontend you’ll see the Cookie Notice. In the example below, you can see a very nice Cookie Notice and clicking on the “Got It” button it hides the notice, and Divi Supreme detects that the user has accepted the Cookies and will never show the notice again to the user until the expiry of Cookie.

How to Download and Use Free Layouts

So it’s now time to provide you the Free Layouts. All you’ve to do is click on the button below to download the Layout and extract it on your PC and you’ll see 2 Files.

To use those Layouts on your site you’ve to go to Divi -> Divi Library and click on Import & Export Button and follow the steps shown in the image below.

You’ll see 3 new Layouts added to your Divi Library.

Now you can follow the steps above to add any Cookie Notice to your Complete site. Down below we’ve added some Important Changes you need to make for each Cookie Notice by going to any Module in Global Footer -> Advanced -> Visibility -> Use Popup. 

Cookie Consent Popup 1

Demo

Settings to do
  • Popup(Divi Library) – Select Popup Layout as Cookie Consent Popup 1.
  • Trigger on – Select Trigger method as Page Load.
  • Use as Cookie Consent – Once you’ll select the popup trigger method as Page Load you’ll see this switch simply enable it.
  • Timed Delay – Add a timed delay for the Notice to show.
  • Entrance Animation In – Choose entrance animation for the Cookie consent to show with an animation. We’ve selected Fade In Up.
  • Entrance Animation Out – Choose Exit animation for the Cookie consent to go away with animation. We’ve selected Fade Out Down.
  • Popup Position – Select Bottom Center and don’t forget to select Bottom Center for Tablet and Mobile by enabling the Responsive option by clicking on the Mouse icon.
  • Popup Position Type – Choose Potision type as Fixed.
  • Use Fullwidth – Enable the use of Fullwidth for this Cookie Notice.
  • Show Overlay – Disable the use of Overlay.
  • Show Close Button – Disable the use of the Close button.

That’s it you’re done you can now go with the first Cookie Consent Popup.

Cookie Consent Popup 2

Demo

 

Settings to do
  • Popup(Divi Library) – Select Popup Layout as Cookie Consent Popup 2.
  • Trigger on – Select Trigger method as Page Load.
  • Use as Cookie Consent – Once you’ll select the popup trigger method as Page Load you’ll see this switch simply enable it.
  • Timed Delay – Add a timed delay for the Notice to show.
  • Entrance Animation In – Choose entrance animation for the Cookie consent to show with an animation. We’ve selected Zoom In Up.
  • Entrance Animation Out – Choose Exit animation for the Cookie consent to go away with animation. We’ve selected Zoom Out Down.
  • Popup Position – Select Bottom Center and don’t forget to select Bottom Center for Tablet and Mobile by enabling the Responsive option by clicking on the Mouse icon.
  • Popup Position Type – Choose Potision type as Fixed.
  • Popup Max width – Add a max width of 400px to the Popup.
  • Show Overlay – Disable the use of Overlay.
  • Show Close Button – Disable the use of the Close button.

You’re done with setting up the 2nd example on your site.

Cookie Consent Popup 3

Demo

Settings to do
  • Popup(Divi Library) – Select Popup Layout as Cookie Consent Popup 3.
  • Trigger on – Select Trigger method as Page Load.
  • Use as Cookie Consent – Once you’ll select the popup trigger method as Page Load you’ll see this switch simply enable it.
  • Timed Delay – Add a timed delay for the Notice to show.
  • Entrance Animation In – Choose entrance animation for the Cookie consent to show with an animation. We’ve selected Zoom In Up.
  • Entrance Animation Out – Choose Exit animation for the Cookie consent to go away with animation. We’ve selected Zoom Out Down.
  • Popup Position – Select Bottom Center and don’t forget to select Bottom Center for Tablet and Mobile by enabling the Responsive option by clicking on the Mouse icon.
  • Popup Position Type – Choose Potision type as Fixed.
  • Popup Max width – Add a max width of 400px to the Popup.
  • Show Overlay – Disable the use of Overlay.
  • Show Close Button – Make sure this switch is enabled.
  • Close Button Background Color – Change the background color of the Close button Icon.
  • Close Button Icon Color – Change the Icon color of the Close Button.

There you go all done.

That’s it, that’s how easily you can add a beautiful cookie notice to your site without the need of any kind of Plugin. We hope that you liked this Tutorial and Loved the Layouts. Let us know in the comment section below if you face any kind of problem while setting up cookie notice.

It will not slow down your page load speed.

Popups have for the longest time get a bad rap for their negative impact on page load speed. The reason for this is because most of them use a lot of Javascript files that eat up a lot of hosting resources.

The good news is that Divi Supreme works differently in that we use the same built-in popup lightbox library that Divi uses with no additional Javascript files. This means our popups add no extra load to your site other than what the native Divi Builder requires to load fully.

How to access the Divi Popup extension

To use the Divi Popup extension, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Divi Popup extension in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

2 Comments

  1. Nick

    I can’t change the background color

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

19 − six =