1. Home
  2. Docs
  3. Marketing Elements
  4. Cookie Consent

How to configure & Style the Cookie Consent


 

⇒See Demo⇐


Creating Contents with the Cookie Consent Addon

Select a style and set shortcode name

The Cookie Consent element has updated with the latest styles and templates. You can start adding your content under a preset layout of the Cookie Consent element. Let’s see how it works:
 
Click on the “Cookie Consent” icon, and it will then take you to the Settings page.
Here, you need to select a particular style to create content with the element.  Select a style and give it a name that identifies your shortcode then save it.
Now, you’ll find the customization page with lite and advanced settings. There you can add and customize your Cookie Consent data.
 

Customizing the General Settings

»Content

General Settings

⇒Message: Add the Cookie Consent message here.

⇒Cookie Name: Add the Cookie name here that identifies your items.

⇒Button Text: Add the button text on the cookie notification/message.

: Add the learn more text.

⇒Learn More Link: Enter the URL for the learn more button link.

⇒Position: Customize the position of the cookie message.

⇒Expiry Days: Set the expire days for the cookie.

⇒Z-Index: Enter the value of the z-index.

 

General Style

⇒Max-Width: Customize the maximum width of the cookie bar for different dimensions.

⇒Background: Choose the background color of the cookie consent.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom, and left of the cookie bar for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the cookie bar for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom, and left around the cookie consent bar for different dimensions. You can link the values together or customize them individually.

   

Text Style

⇒Typography: Set the typography options for the texts of cookie message. Here you can customize the font-family, font size, decoration, and styles.

⇒Text Color: Add a custom color to the cookie text.

⇒Load More Color: Choose the color for the load more button text on the cookie consent.

   

Button Settings

⇒Color: Add a custom color to the button text for both normal and hover view.

⇒Background: Choose the background color for both normal and hover view.

⇒Border Style: Select a border style from the list according to your preference. And then set the border width for the top, right, bottom, and left of the button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Set the border-radius around the button for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom, and left around the button for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom, and left around the button for different dimensions. You can link the values together or customize them individually.

   

After Completing the edit, please save and reload the page to finalize and review your work. Now, just Copy the Shortcode and Paste anywhere in the post or page or plugins where you want to show the Cookie Consent.

   

Note: Remember, forget to save the changes will cause losing all of your data. So, each time after done editing, make sure you save them.


     
Was this article helpful to you? Yes No

How can we help?