Design
Ready to get creative? In this step you will be customising the look of your sign-up bar.
In this article
Banner Style
Customise the way your sign-up bar looks like by adjusting its size and colour.
How to Change the Sign-Up Bar's 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.
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 Adjust the Sign-Up Bar's Size
Adjust the Banner Height by using the slider. The higher the number and closer to the right, the higher your bar will be.
Two things to consider:
Currently, the maximum height is 200px.
The minimum height depends on the size of your text.
Font Style
Customise the way you would like your banner text to be displayed.
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 Sign-Up Bar'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
Customise the look of your banner's button.
How to Change the Sign-Up Bar Button's and Font Colour
Click on the circle next to Button colour or Font colour to open the colour picker.
How to Change the Sign-Up Bar 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.
1. To edit the border colour, pick a colour from the colour picker or enter a pre-set colour in the hex box.
2. Use the sliders to increase the border thickness and radius.
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.
How to Change the Sign-Up Bar Button's Hover Colour
Open the colour picker by clicking the circle next to hover colour and choose a colour.
Double-check that the hover colour works for you by hovering over the button. Consider using a contrasting colour that doesn't make the button text difficult to read.
2. All done? Click Next.
