Create a Cookie Banner: Design

Ready to get creative? In this step you will be customising the look of your cookie banner.

Cookie21.jpg

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.

Cookie23.jpg

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.

Cookie28.jpg

Currently, the maximum height is 200px.

The minimum height depends on the size of your text.

Cookie29.jpg

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.

Cookie31.jpg

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.

Cookie36.jpg

The minimum font size is 10px, and the maximum is 30px.

Cookie37.jpg

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.

Cookie41.jpg

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.

Cookie46.jpg

To edit the border colour, pick a colour from the colour picker.

Use the sliders to increase the border thickness and radius.

Cookie48.jpg

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.

Cookie50.jpg

Next Step

Did this answer your question?