A website Header is perhaps one of the most important structural components of your website. In this Episode, we are going to show you how you can quickly select your Header in a few clicks, whether you're a beginner who has never created a website before, or if you are an advanced website developer. You will be able to revisit the Headers area at any time to swap and change your Header on the fly. The most important thing, for now, is to choose a Header that best fits your immediate needs, and know that you can always swap and change as you learn and grow.

Series 2. Episode1: Website Headers, As Easy As, Point, Click, Save.

Access the headers area

To Access the Headers area, click the Main Menu icon at the top left of the page and select Styles.

Here you will see a range of Headers that have been preformatted for you. You can simply choose the Header that you like, click 'Save' and your new Header will be ready to go.

When considering what to include in your Header, it's a good idea to go back to your workshop data to confirm your most important pages and website objectives. Typically, you'll want to include these items in your Header. When planning your Header, keep in mind that your header is responsive and therefore you need to consider mobile, tablet and desktop. You can preview how you Header looks on each device using the device buttons to the far right of the Preview. All MOBLE Headers are responsive as standard, they are also 'sticky', meaning they stick to the top of the page as you scroll. Therefore, the links you place in your Header will be accessible to your visitors with a single click, wherever they are on your website. This gives you a great opportunity to encourage clicks to your most important pages, which is especially important in lead generation websites.

If you are building a website that aims to generate as many leads as possible, you might only decide to have your Phone Number and a Quick Quote button in your Header. You could conceal the rest of your pages inside a Site Map menu that is linked to the Hamburger Icon. Alternatively, if you can see that many of your website leads are generated from your Case Study pages, you might also include a link to your Case Studies page. In this case, your Header would include Navigation, Call to Action, and the Hamburger Menu. Often subtle changes like this make a huge difference to your conversation rates, it is very important that you can learn from your results and come back to change your Header as you learn. 

Typically, less is more with Headers. It is often best practice to not to have more than 6 items in your Header unless you are a large website with more than 40 pages.

Styles area navigation

In terms of housekeeping and getting around, you will notice the Header tab is the first Tab across the top of the page. We will discuss other Tabs in the Styles area in the following Episodes of this series. These are other components of CSS and include Fonts, Colours, your base Layouts, Components, and Effects. If you are a Frontend Developer or would like to hire a Frontend Developer, you can access your website CSS and JS via the tabs in the top right of the page.

Hamburger Menu

The Hamburger Menu icon slides out a website Menu. Currently, the default Menu slides in a drawer from the right. Though, look out for forthcoming releases, where we will introduce different effects such a sliding in a full-page section (Similar to how the Action Button works below).

As noted earlier, Site Map menu, found in the Navigation area.

Importantly, the Site Map menu is the default menu that shows on mobile devices. We like to call it the Site Map menu since you can include your entire website Site Map within it. There is no limit to the number of levels of navigation within this multi-menu. Therefore, on mobile devices, you have access to every page on your website in a neat multi-menu that can easily be navigated.

Action Button

The Action button is a popular feature with MOBLE clients, especially for lead generation websites where you are looking to increase the number of leads. You can see here in the Preview that when I click the Action Button, that a drawer slides down from the top of the page. This allows you to include a Call to Action message and typically includes a form to attract new conversions and subscribers.

If you are wondering where to edit the content within the drawer, you can:

  • Go back to the Pages area (I'm just going to hold 'Control' and click 'Pages', this opens up a new the Pages area in a new Tab.
  • Then in the Pages area, click 'Section' and 'Search'.
  • You will then see a page called Quick-Form. This is where you can edit the content that sits within the Slide down drawer. We will talk about Sections in other Episodes, though essentially Sections are not normal pages, they don't have a URL (page address). However, by allowing you to edit them just like any other page, you have all the functionality of the MOBLE editor. Therefore, you have full control to create what you like here. Another example, of a Section, might be your website footer. On MOBLE you can create anything in your Footer, imagine a footer with a background video or transitioning slider, whatever you like you have the full potential to create it.

Customise Your Header

Next, we dive a little deeper into configuring your Header, and we explore the options in the Customise Button.