Create a Cookie Banner: Design
Ready to get creative? In this step you will be customising the look of your cookie banner.
In this article
Banner Style
How to Change the Banner Colour
To choose a banner colour, click on the circle next to banner colour to open the colour picker.
Quick Design Tip
Consider that the colour of the banner should coordinate with the colour of the font. The suggested black colour on the top right is a slightly toned down black, optimal for reading text in white backgrounds.
Don't forget to be consistent! If your brand already has pre-defined colours, make sure to choose a colour combination that favours what has already been chosen for your brand and your website.
How to Change the Banner Size
Adjust the Banner Height by using the slider. The higher the number and closer to the right, the higher your bar will be.
Currently, the maximum height is 200px.
The minimum height depends on the size of your text.
Font Style
How to Change the Font Colour
To choose a font colour, click on the circle next to font colour to open the colour picker.
How to Change the Banner's Font Size
Adjust the banner's font size by using the slider. The higher the number and closer to the right, the higher your bar will be.
The minimum font size is 10px, and the maximum is 30px.
How to Change a Cookie Banner's Font Type
Choose a font from the list to change the typeface the text will be displayed as. We currently support both both Web Fonts and Google Fonts, including Arial, Georgia, and Helvetica.
Button Style
How to Change the Cookie Banner Button's Colour
Click on the circle next to button colour to open the colour picker.
How to Change the Cookie Banner Button's Border
By default, button borders are not shown (white border, with zero thickness and radius). If you wish to add a border to your button, modify the settings below.
To edit the border colour, pick a colour from the colour picker.
Use the sliders to increase the border thickness and radius.
How to Change the Cookie Banner Button's Font Colour and Hover Colour
Open the colour picker by clicking the circle next to font colour.
To change the colour of the button when a cursor is hovering over it, open the colour picker by clicking the circle next to hover colour.
Consider using a contrasting colour that doesn't make the button text difficult to read.
