WEBSITE HEADERS, AS EASY AS POINT, CLICK, SAVE


S02 | E02 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  3 min read |  4 min video

Web School Series 2 Episode 2

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

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.


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.

MOBLE Header 3 Steps

Add a Header is as easy as: 1 Going to Headers, 2 Selecting a Header, 3 Saving a Header.

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.

Keep in mind that your Header is responsive and therefore you need to allow design for mobile, tablet and desktop. You can preview your Header for 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 Drawer Menu that is linked to the Hamburger Icon.

Alternatively, for example, 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 the Header Menu. In this example, your Header would include Header Menu, Call-to-Action Button, and the Drawer Menu. Often subtle changes like this make a huge difference to your conversion 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 have a large website with more than 40 pages.


HEADER SEARCH BOX

Your Header typically sits horizontally across the top of the website, though it is possible to have a website Header that sits vertically to the left of the page.

MOBLE is currently adding many more Header options to the Headers area and will be inviting Frontend developers to submit new Headers to the MOBLE framework. So, every time you design a new website, please use the search tools to see if any new options are available to you.

Similarly, you can search the Headers on offer by the position of the Logo, which is quite self-explanatory, with Logos positioned either left, centre or right.

Now, to demo the next items in the Search Box, I am going to Select Header 16. You can see that Header 16 includes all of the available components and makes for the perfect Header to describe the range of features on offer in your Header.

Header Search Box

The Header Search Box helps you find the Header that you're looking for.
Select the Items, click Search and choose from the filtered list of Headers.


HEADER MENU

Alongside your Logo, the Header Menu is often the most prominent component that sits in your Header. The Header Menu is a collection of links created in the 'Navigation' area. Here I will hold Control on the keyboard and click 'Navigation' from the top left Main Menu. This will open the Navigation area as a new Tab.

Here you can update the pages is your Header and Drawer men.

Jump back to Series 1 Episode 6 for a refresher on Menus and Navigation.

MOBLE Header Menu

Did you know? You can select your pages for the Header Menu in the 'Navigation' area.


DRAWER MENU

The Drawer Menu is an off-canvas menu that slides into your page. It contains the list of pages that you set up for the Drawer Menu in the Navigation area. Currently, the default menu slides in a drawer from the right. Look out for the forthcoming release, where we will introduce both 'Top' and 'Left' slide-in Drawer Menus and also the ability to select the width of the Drawer Menu or design your own menu in the Visual Editor with a 'Menu Section'.

Select a Header with a Drawer Menu, then click the Hamburger icon in the Preview pane. You will see that the Drawer Menu slides in.

To select the preferences for the Drawer Menu, click the 'Customise Button'. We will cover this in the next Episode.

Importantly, the Drawer Menu is the default menu that shows on mobile devices. As such, even if you use a Menu Section you should still complete your Drawer Menu in the navigation area. Again, jump back to Series 1 Episode 6 for a refresher on Menus and Navigation for a complete breakdown of the types of menus that are available.

Did you know? 

We sometimes refer to the Drawer Menu as a 'Site Map' menu since you can easily include your entire website Site Map within it. There is no limit to the number of levels of navigation within this multi-menu drawer.

The Drawer Menu is the default Menu that appears on mobile devices, and therefore, you give your users easy access to every page on your website, in a neat multi-menu that can easily be navigated on any device.

Even if you don't select a Drawer Menu here in your Header, over in the Navigation area you should assign the pages to your Drawer Menu, since it's always used on mobile whether you select it for your Header or not.


ACTION BUTTON

The 'Action Button' allows you to add a Call-to-Action in your Header. It is a tremendously popular feature with MOBLE clients, especially for lead generation websites where you are looking to increase the number of website enquiries. You can see here in the Preview that by clicking the Action Button 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 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, as 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.

MOBLE Action Button



LINK BUTTON

The Link Button is a prominent button in your Header that you can link to any page on your website. This is often used to attract a high volume of clicks to a key page like 'Join', 'Pay', 'Login' etc. It is an alternative to the Action Button, rather than sliding down a Drawer, it links to an actual page.

In the Customise Tab, you can change the icon and the word within the button. We will look at this shortly. You can also remove or change the background colour in the colours tab, which we will also cover in forthcoming Episodes.

MOBLE CMS Link Button

The Link Button brings prominence to a nominated page. Update the page via the customise tab.


SEARCH

For larger websites with many pages, you might wish to consider having a 'Search' option. By clicking search it pops up a search box as standard. We will be introducing a range of configurable search options shortly, so please stay tuned for this as we continue to bring more functionality to you. If you would like to try out our latest search techniques before they hit the main CMS, we would love to accommodate you. Please contact us at www.moble.com/lets-talk.

MOBLE Header Search

Add Website Seach to your Header


CUSTOMISE YOUR HEADER

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

S2 E3 CUSTOMISE YOUR HEADER