Prebuilt Headers for Layouts

10/08/2020

When building a Custom Header using Layouts in Avada, you can start from scratch and build your own header from the ground up, or alternatively, you can import a Prebuilt Header into the Header Layout Section, and customize it as you wish.

There are 16 Header layouts to import, including 9 new ones, as well as the 7 original header layouts that can be also added via the Options. Let’s take a deeper look at how to import these, and how to configure your menus, so that they match the previews.

Choose A Prebuilt Header

How To Select A Prebuilt Header

When you first enter the Avada Builder when creating a Header Layout Section, the Starter Page displays. Here, you can click on Add Container to start building a Custom Header Layout. But if you prefer to start with a template, you can click on Prebuilt Header.

Header builder - Add Pre-built Header

When you do, the Library opens to the Header Demos tab. Here you can see a choice of Header designs to import. They are marked as you can see below, clearly showing the original 7 Header Layouts, plus the 9 new ones.

Choose A Prebuilt Header

To import one, just mouse over your selected header and click on it. This brings an Alert up, which tells you what is about to happen. Click OK to continue, and the header is loaded into the Builder, ready to be customized. They will not necessarily look identical to the previews initially, as some of the design comes from the actual menus themselves.

Prebuilt Header Import Notice

The Headers

Below, are descriptions and screenshots of the 16 available Headers – the 7 original Avada Headers, as well as the 9 new Header designs, specifically created for the Header Builder. Each Header section shows the Container and Column structure of the header and the various Elements used, a sample image of what it might look like on the front end, and a description of how to adjust your imported Headers to match the previews.

Header 1

Header 1 is a simple one container header with the Image element on the left, pulling the logo dynamically from the Global Options, and a Menu Element on the right. To get the Search Icon, as shown on the right in the Preview, your selected menu needs to have the Avada Special Menu Item – Search added to the end of it in Dropdown or Overlay mode.

In Small screen view, the menu collapses to Mobile layout, with any Submenus in dropdown mode.

Pre-built Headers - Header 1

Front End Preview

Header 1

Header 2

Header 2 is the same as Header 1, with the addition of a top bar containing a Text Block Element with Contact Info on the left, and Social Links Element on the right. In the Container under this, there is an Image element on the left, pulling the logo dynamically from the Global Options, and a Menu Element on the right.

As per header 1, to get the Search Icon, as shown on the right in the Preview, your selected menu needs to have the Avada Special Menu Item – Search added to the end of it in Dropdown or Overlay mode.

In Small screen view, the menu collapses to Mobile layout, with any Submenus in dropdown mode.

Pre-built Headers - Header 2

Front End Preview

Header 3

Header 3 is the same as Header 2, just with a colored top bar, and a different menu highlight. As with Headers 1 and 2, to get the Search Icon, as shown on the right in the Preview, your selected menu needs to have the Avada Special Menu Item – Search added to the end of it in Dropdown or Overlay mode.

In Small screen view, the menu collapses to Mobile layout, with any Submenus in dropdown mode.

Pre-built Headers - Header 3

Front End Preview

Pre-built Headers - Header 3

Header 4

Header 4 is a three Container header. The Top Container has a background color, and a Social Links Element on the left, and a right aligned Menu taking up the remainder of the Row.

The second Container has four Columns, with the logo on the left, via the Image Element, a spacing Column next to that, then a Site Tagline being pulled dynamically, and a Search Element in the last Column.

The bottom Container in this layout has a full width Column containing a Menu Element, with the Menu Justification set to Between to spread out the menu along the whole Column.

In Small screen view, both menus collapse to Mobile layout, with any Submenus in dropdown mode.

Pre-built Headers - New Header 4

Front End Preview

Pre-built Headers - Header 4

Header 5

Header 5 is another three Container Layout. The Top Container has a background color, and a Social Links Element on the left, and a right aligned Menu taking up the remainder of the Row. The Middle Container has a full width Column with the Logo centered in it, which is being pulled dynamically from the Image Element. And the third Container again has a full width Column with a centered Element in it – this time the Menu Element, again with Space Between Justification.

In Small screen view, both menus collapse to Mobile layout, with any Submenus in dropdown mode.

Pre-built Headers - Header 5

Front End Preview

Pre-built Headers - Header 5

Header 6

Header 6 is minimalist Header, with the Logo in a 1/4 Column on the left, and the Menu right aligned as an icon, and the Submenu in Flyout Mode.

This layout is particularly dependent on the actual menu. To achieve a header that fully resembles the preview, your selected menu needs to have an Avada Special Menu Item – Search added (in Dropdown or Overlay mode) and a Custom link, set to Icon only, for the Hamburger Menu, with all desired submenu pages to be children of that menu item.

Pre-built Headers - Header 6