How to Create a Cookie Consent Popup in Elementor

If you use Elementor Pro, there are some features and functionalities you can add to your WordPress site without installing extra plugins. One of which, you can add a cookie consent using the popup builder feature of Elementor, which we will cover in this article. What is a cookie?

In the context of the web, a cookie (also known as a web cookie, browser cookie, and internet cookie) is a small piece of data stored on your computer by a web browser. The data is then used by websites to provide content according to your activities. If you often see ads according to your activities, that’s what a cookie used for (although there are many usage examples of cookies).

For some cases, displaying a cookie consent is quite important as it allows your visitor to understand that your site collects some information from them. It’s one of the implementations of business transparency.

How to create a cookie consent popup in Elementor

The pro version of Elementor comes with a popup builder which you can use to create a beautiful popup. You can use the popup builder of Elementor to create any type of popup you can find on the internet. In this post, we will show you how to use the Elementor popup builder to create a cookie consent popup. Elementor itself offers some premade popup templates which you can use to create a cookie consent popup but in this post, we will create the cookie consent popup from scratch. Here is the cookie consent popup we will create:

First off, go to Templates -> Popups. Click the Add New button to create a new popup.

Give your popup a name and click the CREATE TEMPLATE button to start creating the popup template.

Since we want to create the popup from scratch, simply close the template library by clicking the X icon on the top-right corner.

Before adding the content to the popup, make some required settings first. You can open the gear icon on the bottom-left corner to open the popup settings panel. Here are the settings we will use.

  • On the Width option under the Layout block, change the unit to VW and change the value to 100.
  • Set the Height to Fit To Content
  • Set the horizontal position to Center
  • Set the vertical position to Bottom
  • Disable the Overlay option
  • Disable the Close button

You can also set the entrance and exit animation from the Layout block.

Next, go to the Style tab to change the popup background. You can use a solid color background, gradient, or image.

Once done with the basic settings, you can start adding the content to your popup. Start by adding a section by clicking the plus icon on the canvas and select a column structure you want to use (we use the three-column structure in this example).

Add the Text Editor widget to the first column and replace the default text with your own text. You can type something like “This website uses cookies to ensure you get the best experience on our website”. You can customize the text on the Style tab. You can set things like the typography (font family, font style, font size, and so on), and the text color.

Before adding the content to the second column, you might want to set the size of the columns first. To do so, simply hover your mouse over a column you want to resize until you see the dotted line. Click-and-hold and drag it rightward and leftward.

Once done adding and editing the text content on the first column, add a button to the second column. We will use this column to place the “ACCEPT” button. Simply drag the Button widget to the second column. Replace the default button text with something like “ACCEPT” or “ACCEPT & CLOSE” and set the size. On the Link field, click the database icon and select Popup.

Click the wrench icon on the Popup field. On the Action option, set it to Close Popup and enable the Don’t Show Again option.

To style up the button, you can go to the Style tab. From this tab, you can set things like the typography of the button text, button text color, button background color, and so on.

Once done with the second column, switch to the third column. We will use this column to place the “DECLINE” button. Simply drag the Button widget to this column. Replace the default button text with something like “DECLINE” or “IGNORE”. You can also set the button size and alignment. On the Link field, paste the URL of the Terms and Conditions page of your website. This will force your visitor to read the terms and conditions if they decline the consent.

You can go to the Style tab to style up the button.

Once you are done editing the popup content, click the PUBLISH button on the bottom side of the left panel. On the appearing window, set the display conditions by clicking the ADD CONDITION button. In this example, we will display the popup to the entire website but the Terms of Conditions page. So, the display conditions will look like this one. Click the NEXT button to continue.

On the next step, you will be asked to set the trigger. In this context, you can use the on-page load trigger. So, enable the On Page Load option and click the SAVE & CLOSE link.

That’s it. You have just successfully created your cookie consent popup.

The bottom line

Transparency is crucial enough aspect of a business. Creating a cookie consent popup is one of the ways to show your business transparency as it discloses that your website collects data from your visitors. If you use Elementor to create a WordPress-based website, no need to install a new plugin only to create a cookie consent popup. Instead, you can use the popup builder feature of Elementor to do so.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!