Design

Ready to get creative? In this step you will be customising the look of your sign-up bar.

Forms27.jpg

In this article


Banner Style

Customise the way your sign-up bar looks like by adjusting its size and colour.

Forms28__1_.jpg

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.

Forms29.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.

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.

Forms34.jpg

Two things to consider:

Currently, the maximum height is 200px.

The minimum height depends on the size of your text.

Forms35.jpg

Font Style

Customise the way you would like your banner text to be displayed.

Forms36__1_.jpg

How to Change the Font Colour

To choose a font colour, click on the circle next to Font colour to open the colour picker.

Forms37.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.

Forms42.jpg

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.

Forms46.jpg

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.

Forms47.jpg

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.

Forms53.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.

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.

Forms56.jpg

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.

Forms58.jpg

Next Step

Did this answer your question?