WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Home » How to Create a Cookie Consent Popup Using Elementor 2020 (Step by Step)

by

How to Create a Cookie Consent Popup Using Elementor 2020 (Step by Step)

You can easily create a cookie consent popup using Elementor and avoid the high cost of hiring a web developer. And it does not require you to be a coding expert either.

Elementor provides an intuitive page builder. It uses a drag-and-drop feature and enables you to work from the front end.

This means that you can view the cookie consent popup as it will appear in your visitors’ browser before adding it to the website.

You need to make your popup easily noticeable to your viewers. Elementor provides numerous popup templates that are designed for easy visibility.

The templates also make it easier and faster to build your cookie consent popup, as you will notice in this tutorial.

Its advanced design capabilities will enable you to edit your popup to match your brand’s colors while making it professional. And we will show you how to set it in a way that does not irritate your visitors.

Here’s a quick index to help you navigate this article:

So let’s dive in.

Before You Get Started: Create a Cookie Consent Popup Using Elementor

Cookies are very small and particular packets of data that are stored on a computer user’s web browser. Cookies are not harmful, despite what many people think.

Cookies are mainly used on a website so that web visitors can get their best experience from a website, and they’re also used to monitor visitor’s activities on a website.

If your blog or website receives visitors from Europe, then you definitely have to add a cookie consent banner to your site, because of Directive 2002/58/EC of the European Parliament to concern the processing of personal data and privacy protection in digital devices and information communication technology.

This directive only covers those websites that collect user’s data using website cookies.

That means if you want your website to be compliant, you just need to add a cookie banner that requests the user’s consent for your website to receive the visitor’s cookies or not.

The main intention behind using a cookie banner on a website is to get a visitor’s consent to use cookies before they start using your website.

For that reason, you have to follow some rules:

  1. You have to display the cookie banner or popup immediately when a visitor first visits your website.
  2. You have to show and receive informed consent from visitors to use cookies.

Create a Cookie Consent Popup

As we will use the  Elementor popup builder to create our cookie consent banner, you need to install the Elementor Pro first on your website.

After installing Elementor Pro on your WordPress website, head over to your WordPress admin area.

On your WordPress dashboard go to Templates > Popups > Add New Popup.

create your first popup in elementor

Now a popup will appear on your desktop screen. You have to add some information here.

choose a new template type in elementor

Select ‘Popup’ as the type of template. Now choose a name for your popup template. We gave ours a ‘Cookie Consent’ name. Last, click on the ‘Create Template’ button.

After clicking ‘Create Template’, Elementor will now show you its template library.

elementor popup template library

In the left corner click the category dropdown and let’s briefly go over the options here. This category actually represents various types of popups.

Let’s start with ‘Classic’. This is the most popular type of popup. Traditionally it appears as an opt-in form in the middle of the screen with an overlay that comes with a background.

Next step, we have ‘Fly-in’. Fly in popups are effective because they drive the user’s attention. As the name suggests, these popups look like they are flying onto the screen.

‘Full Screen’ popups are great for directing your user’s attention to one specific call to action or promotion.

There is also the ever-popular ‘Hello Bar’ popup. Use this primarily for sales promotion and announcements.

Now come the ‘Slide In’ popups. A slide-in popup can be used for any purpose. As you can see, they take up the height of an entire screen.

Now we will check out the ‘Bottom Bar’ popup. A bottom bar popup can be used to override every reason, including announcements, or as a cookie consent, which we will show you how to set up.

Choose a template to create your cookie consent popup. When you move your mouse cursor over a popup template, you will see a “+” icon to preview the template. After previewing, if it meets your requirements, click on the ‘Insert’ button.

We have inserted a popup. Now we will edit it per our requirements.

elementor popup settings for cookie consent

First, click on the ‘Popup Settings’ icon. Go to Popup Settings > Settings Tab. Hide the ‘Close’ button. If you need to hide the overlay, you can do this also. We are hiding it.

Now head over to the Popup Settings > Advanced. Click ‘Yes’ both for ‘Prevent Closing on Overlay’ and ‘Prevent Closing on ESC key’.

elementor advanced popup settings

You can see that the template contains three columns. The first column shows an image, the second shows some text, and the third displays a button. We will do a simple edit to that button.

First, select the button widget. Then press the ‘ON’ button under the ‘Don’t show again’ option. This makes the button disappear after users accept cookies.

elementor popup edit button

Click on the publish button and let’s set the ‘Condition’ and ‘Triggers’.

We want to show the popup across the site except for the ‘Privacy Policy’ page.

Click on the ‘Add Condition’ button and include ‘Entire Site’. Again click on the ‘Add Condition’ button and choose ‘Exclude-Pages-Privacy Policy’.

After finishing, click on the ‘Next’ button.

condition publish settings in elementor

After clicking the ‘Next’ button, we have to set the ‘Triggers’ option that will determine what action the user needs to do for the popup to open.

Press ‘Yes’ for ‘On Page Load’ as we want to show the popup immediately when a user first visits our website. There is no need to set any time.

triggers publish settings in elementor

After completing this stage, click on the ‘Next’ button and this will take you to the ‘Advanced Rules’ option. We will not set anything from the ‘Advanced Rules’, so click on ‘Save & Close’.

Now our popup is ready to use on our website. Following these directions, you can easily create a cookie consent banner using the  Elementor popup builder.

Conclusion: How to Create a Cookie Consent Popup Using Elementor

Cookies are helpful if you want to give your visitors the best experience on your website. But it is also ethical to make your visitors aware that you intend to track their activities on your site and seek their permission to do so.

We have made it easy for you to create a cookie consent popup using Elementor.

Use it to create a popup that is easy to notice, and one that will not be a nuisance. It should be easy for your visitor to give their consent without complicating the process.

You can give the popup an attractive design that fits with the rest of your website. If you have any questions, feel free to reach out to us.

Read More Elementor Tutorials: