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.