How to Add a Cookie Consent Popup in Elementor
Time needed: 30 minutes
Adding a cookie or GDPR consent banner to your Elementor website is made easy with the Popup feature that is included in Elementor. You can create an attractive and engaging cookie popup for users with all of Elementors’ drag-and-drop tools, and configure its display rules and settings for your website’s compliance notices and cookie consent.
- Create a New Popup Template
In your WordPress admin, go to Elementor > Popup Templates and click the ‘Add New’ button.
- Name your popup “GDPR Notice” or “Cookie Consent”
Give your popup a name and select the Page Builder option for creating it (the other option is using a template). We don’t need a template.
- Design your Cookie Consent Popup
Now you can start building the cookie consent popup in Elementor’s drag-and-drop editor just like any other page or post element in Elementor. You can use all of Elementor’s usual tools such as fonts, images, videos, containers etc., to make an engaging design that fits with your site’s branding if desired; however this step isn’t necessary – all you really need is some text explaining what cookies are used by the website along with checkboxes allowing users to give their consent options (accept cookies or deny cookies).
- Save Your Cookie Popup
Finally, click Publish. Select your Display Conditions, we suggest ‘Entire site’ for your cookie banner or popup, then click ‘Save and Close’.
- Clear the Cache
Clear any cache that may be used, including any JS or CSS cache, Cloudflare, and object caches. For some websites, it may also be necessary to “Regenerate Files” for the popup to work correctly.
- Test Cookie Popup
Visit your website in an Incognito window or with a different browser to inspect how the popup experience flows. Once your cookie consent popup is live, make sure to test it thoroughly on different browsers and devices. This will ensure the cookie banner works properly and that the various pieces of consent have been correctly implemented for GDPR compliance purposes.
