• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPCity.com

WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Menu
  • Blogging
    • Blogging Reviews

      You’re looking for one of the best blogging courses right now. You simply want your business to grow without making critical errors. This is a great time to start or grow a blog.

    • How To

      • Start A WordPress Blog
      • Monetize a WordPress Blog
      • Best Blogging Courses
      • Blog Setup Services
      • Blogging Tools
      • Best WordPress Blogs
  • Web Hosting
    • Web Hosting Review

      Which is the best host for small business owners, and which should you avoid? Read our reviews to find out and see what customers have to say.

       

      Host vs Host

      • SiteGround vs Bluehost
      • SiteGround vs A2Hosting
      • SiteGround vs WP Engine
      • SiteGround vs DreamHost
      • Bluehost vs HostGator
      • DreamHost vs Bluehost
      • HostGator vs GoDaddy
    • Best Hosting

      • Best Web Hosting Providers
      • Best WordPress Hosting
      • Best Web Hosting for Beginners
      • Best Web Hosting for Blogs
      • Best Hosting for Small Business
      • Best Hosting for Food Blogs
      • Best Hosting for Photographers
      • Best Hosting for Travel Blogs
      • Best Hosting for WooCommerce
      • Best Cheap Hosting for Bloggers
      • Best PHP Hosting Providers
      • Best Magento Hosting Providers
    • Others

      • Hostwinds
      • InMotion

       

      WordPress Hosting

      • WPX Hosting
      • SiteGround
      • Bluehost
  • Themes
    • WordPress Themes Review

      Discover the best WordPress themes to choose from for your business and how to pick them wisely. Making your website look the way you want is a robust process. Choose a suitable theme, and the process becomes far easier.

    • Best Themes

      • Best WordPress LMS Themes
      • Best LearnDash Themes
      • Best Multipurpose WooCommerce Themes
      • Best WooCommerce Fashion Themes
      • WordPress Small Business Themes
      • Education WordPress Themes
      • eCommerce WordPress Themes
      • Genesis Child Themes
      • Free Genesis Child Themes
    • VS

      • Genesis Theme vs Astra
      • Genesis Theme vs GeneratePress
  • Plugins
    • Top Plugins

      • Best WordPress Page Builder
      • Best WooCommerce Plugins
    • WooCommerce Plugins

      • Best WooCommerce Plugins
      • Best WooCommerce Coupon Plugin
      • Best WooCommerce Subscription Plugin
      • Best WooCommerce Review Plugin
      • Best WooCommerce Multi Vendor Plugin
    • Others

      • WooCommerce
      • Elementor
      • Genesis Plugins
      • LMS
      • Membership
      • Page Builder
      • WordPress CRM
  • Deals
  • More
    • Reviews

      • HappyForms Review
      • Paid Memberships Pro Review
      • Paid Member Subscriptions Review
      • S2Member Pro Review
      • Wishlist Member Review
      • MemberMouse Review
    • CRM Software

      • Zero BS CRM Review
      • Hubspot CRM Review
      • Agile CRM Review
      • Maximizer CRM Review
      • Zoho CRM Review
      • Capsule CRM Review
    • Guides

      • WordPress Statistics
      • Speed Up WordPress Site
      • Secure A WordPress Website
      • Recover Hacked WordPress Website
      • Install WordPress on Windows
      • Add Custom CSS to WordPress
      • Add Custom Fonts to WordPress
      • Install a WordPress Theme
  • Shop
  • SiteGround Discount
Home » How to Create a Cookie Consent Popup Using Elementor 2022 (Step by Step)

May 24, 2020 by Editor Team

How to Create a Cookie Consent Popup Using Elementor 2023 (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:

  • Before You Get Started: Create a Cookie Consent Popup Using Elementor
  • What You Need to Include on Your Cookie Consent Banner
  • Conclusion

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.


What You Need to Include on Your Cookie Consent Banner

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.

elementor

Read More Elementor Tutorials:

  • How to Get Started With Elementor
  • Elementor Pro Discount
  • Elementor vs Elementor Pro
  • How to Use the Elementor Free Page Builder
  • How to Use the Elementor Theme Builder
  • Elementor vs Gutenberg
  • How to Add a Popup With Elementor
  • How to Create an Under Construction Website Using Elementor
  • How to Create a Login Form Popup With Elementor
  • How to Create a Subscribe Form Popup With Elementor
  • How to Create a Related Popup Using Elementor
  • How to Create a Mega Menu WIth Elementor
  • How to Set Up Important WooCommerce Pages With Elementor

Filed Under: Elementor

Primary Sidebar

elementor

wpengine

top wordpress blogs

  • Facebook
  • GitHub
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Recommended Articles

  • WordPress Statistics
  • Best WordPress Page Builder Plugins
  • Best WordPress Themes for Small Business
  • Best LearnDash Themes
  • Best Education WordPress Themes
  • Best WordPress LMS Themes: Excellent Ways to Manage Learning Content
  • Best WordPress Website Examples for Design Inspiration
  • Essential Addons for Elementor : Is It The Best Elementor Addons Plugin?
  • Genesis Framework Review: Is It Still Worth the Hype?
  • Best Genesis Child Themes
  • Best Genesis Framework Plugins
  • Best Blogging Courses That Will Help You Succeed
  • Best Blog Setup Services
  • Best Multipurpose WooCommerce Themes
  • Best WooCommerce Fashion Themes
  • Best eCommerce WordPress Themes for WooCommerce

Recommended Hosting

  • WP Engine – Managed WordPress Hosting
  • SiteGround – Powerful WordPress Hosting
  • WPX Hosting – Fastest WordPress Hosting

E-mail Newsletter

Footer

Browse Topics

  • Blogging
  • Coupons
  • Elementor
  • Genesis Framework
  • Guide
  • Gutenberg Blocks
  • Hosting
  • Interviews
  • Membership
  • News
  • Plugins
  • Reviews
  • Resources
  • Security
  • Software
  • Themes
  • Tutorials
  • Tips
  • Tech
  • WordPress LMS
  • WP Page Builder
  • WooCommerce

Get to Know Us

  • About
  • Contact
  • Privacy

Search

Copyright © 2023 · WPCity.com

x
x