EPISODE:
5

  

PLAYING WITH YOUR HEADER COLOURS

 

In Episodes 1 and 2 of this Series we learned how to choose and customise the components of your Header. Now here in Episode 5, we'll look at how to set the colours for each component.

As usual, go to the Styles area via the Main Menu, then select the colours Tab at the top of the page. Under the Header area in the left panel, you can now select the colours for your Header. You may also use the Preview Tab to view your Header and even test interactive functions such as the slide down Action Button and the slide in Menu Draw by clicking the Hamburger Menu.

The video below runs through each colour in the Header to show you how easy it to create a customised look and feel for your brand.


Series 2. Episode 5: Playing with your Header Colours

MOBLE Colours Area

Here we describe each component of the Header serving as an additional reference point to help you on your way:

BACKGROUND
The background colour of the header.

TEXT
The navigation text colour.

ACTIVE PAGE
The indicator colour that sits behind menu label of the page you are on. Plus, the hover over colour, when you hover over the header menu text.

MENU BUTTON BACKGROUND
The colour that sits behind the hamburger menu.

MENU BUTTON TEXT
The colour of the hamburger menu, plus the hamburger menu text.

MENU BACKGROUND
The background colour of the menu that slides in from the right, when you click the hamburger menu.

ACTION BUTTON BACKGROUND
The colour of the call to action button. See the 'Action' button above.

ACTION BUTTON TEXT
The text colour and the icon colour of the call to action button. See the 'Action' button above.

LINK BUTTON BACKGROUND
The background colour and the icon colour of the prominent link button. See the 'Link' button above.

LINK BUTTON TEXT
The text colour and the icon colour of the prominent link button. See the 'Link' button above.

SEARCH BACKGROUND
The background colour and the icon colour of the search button. See the 'Link' button above.

SEARCH TEXT
The text colour and the icon colour of the search button. See the 'Link' button above.