Need to know how to create cookie consent popup in Elementor ?
If you use Elementor Pro, there are some features you can add to your WordPress website without installing any plugins additional. In one of them you can add a cookie consent using the popup builders feature ofElementor, which we will discuss in this article. What is a Cookie ?
Read also: How to create a multi-step form with Elementor
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 deliver content based on your activities. If you often see advertisements based on your activities, this is what a cookie is for (although there are many examples of how cookies are used).
In some cases, displaying cookie consent is very important because it allows your visitor to understand that your website is collecting certain information from them. This is 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 that you can use to create a beautiful popup. You can use Elementor's popup builder to create any type of popup that you can find on the internet.
Discover also: How to create a contact form in Elementor
In this article, we'll show you how to use Elementor's popup builder to create a cookie consent pop-up. Elementor itself offers template popups that you can use to create a cookie consent pop-up, but in this article, we're going to create the cookie consent popup from scratch.
First, go to Templates -> Popups. Click on the button Add to create a new popup
Give a name to your popup and click on the button CREATE A MODEL to start creating the popup template.
Since we want to create the popup from scratch, just close the template library by clicking on the icon X in the upper right corner.
Before adding the content to the pop-up window, make some required settings first. You can open the gear icon in the lower left corner to open the settings pop-up panel. Here are the parameters we will use.
- Under the option Width under the block Layout, replace the unit with VW and change the value to 100.
- Define the Height to adjust it to the content
- Set the horizontal position to Center
- Set the vertical position to Bottoms
- Disable option Overlay
- Disable button Close
You can also set the entry and exit animation from the block Layout.
Read also: How to add a price grid in Elementor
Then go to the tab Style to change the background of the popup. You can use a background, gradient, or a solid color 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 in the edit box and select a column structure you want to use (we are using 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 site uses cookies to make sure you get the best experience on our website”. You can customize the text under the tab style. You can set things like typography (font family, font style, font size, etc.) and text color.
Before adding the content to the second column, you can first set the size of the columns. To do this, simply hover your mouse over a column that you want to resize until you see the dotted line. Click and hold it and drag it to the right or to the left.
Once you add and edit the text content on the first column, add a button to the second column. We will use this column to place the button " ACCEPT ". Just drag the Button widget to the second column. Replace the default button text with something like " ACCEPT " or " ACCEPT & CLOSE And set the size. In the field Link, click on the database icon and select Popup.
Click the wrench icon in the field Pop-up. In the option Shares, set it to CLOSE POPUP et activate the Don't Show Again option.
To customize the button, you can access the tab style. From this tab you can set things like button text typography, color, background color, etc.
When finished with the second column, move on to the third column. We will use this column to place the button " REFUSE ". Just drag the Button widget to this column. Replace the default button text with something like " REFUSE " or " IGNORE ».
Read also: How to create a team member section with Elementor
You can also set the size and alignment of the buttons. In the field Link, paste the url of the page Terms and conditions of your website. This will force your visitor to read the terms and conditions if they deny consent.
You can access the tab Style to also customize this button.
Once you have finished modifying the content of the popup, click on the button PUBLISH at the bottom of the left panel. In the window that is displayed, define the display conditions by clicking on the button ADD CONDITION.
In this example, we'll show the popup on the entire website, but also on the Terms and Conditions page. So the display conditions will look like this. Click on the button NEXT to continue.
In the next step, you will be asked to set the trigger. In this context, you can use the load trigger on the page. So, activate the option On Page Load and click the link SAVE & CLOSE.
Here. You have successfully created your cookie consent popup.
Ultimately
Transparency is a sufficiently crucial aspect for a company. Creating a cookie consent popup is one of the ways to show your business transparency as it reveals that your website collects data from its visiteurs.
If you are using Elementor for create a website WordPress, no need to install a new plugin just to create a cookie consent popup. Instead, you can use Elementor's popup builder feature to make this happen.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to create a cookie consent popup in Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
