Prebuilt Headers for Layouts

24/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

Front End Preview

Pre-built Headers - Header 6

Header 7

Header 7 creates a Header Layout with a Centered logo, and a Menu on either side. The Two Columns on either side of the Logo are set to Large and Medium Visibility, and the Column at the end has only Small Screen Visibility and the Menu Element there is set to collapse to a Mobile layout.

So, to use this Layout effectively, you need to assign three menus – one each for either side of the logo, with different items in each, and one combined menu for the mobile layout.

Pre-built Headers - Header 7

Front End Preview

Pre-built Headers - Header 7

New Header 1

New Header 1 is a two Container Menu, with the top one having a background color and holding the Logo (pulled dynamically through the Image Element) and an instance of the Search Element.

The second Container is a Sticky Container, with three Columns of Custom Width, holding two instances of the Menu Element, and a Button in the third. To achieve a Header similar to the Preview, your second menu would include two of the Avada Special Menu Items – the WooCommerce Cart, and the WooCommerce My Account.

In Small screen view, the main menu breaks to Mobile layout, and the Woo Menu, and the button do not display.

Pre-built Headers - New Header 1

Front End Preview

Pre-built Headers - New Header 1

New Header 2

New Header 2 is also a two Container Header, both with different background Colors. The top one has a centered Text Block, acting as a Notice bar, and the second one has four Custom Width Columns, with an Image Element, a right aligned Menu Element, a Search Element, and an iconized WooCommerce Menu Element respectively.

Pre-built Headers - New Header 2

Front End Preview

Pre-built Headers - New Header 2

New Header 3

New Header 3 is another two Container Layout. The top Container has three Custom Width Columns, with a left aligned Menu Element, a right aligned Menu Element, again used for WooCommerce icons, and a Button in the third. This is also a Sticky Container, and has a nice Box Shadow effect. The Container Visibility is also set to just Large and Medium, so this Container does not display in Small screen view.

The bottom Container has a background color, and two fixed sized Columns, with an Image Element, dynamically pulling the Logo from the Options, and another right aligned Menu Element on the Right. The Menu breaks to Mobile layout in Small screen view.

Pre-built Headers - New Header 3

Front End Preview

Pre-built Headers - New Header 3

New Header 4

New Header 4 is a two Container header layout, with a twist. The top container is set up to fill the viewport (less 75 pixels) and is empty upon import. The idea here, is that you could whatever content you wish in the top Container, a full screen Slider Element, or Hero image etc, and so the Header would show at the bottom of the Viewport instead of the top.

The second Container is set to 100% Width, and is sticky, and so will stick to the top of the page when you scroll past the first Container. It has four Columns of Custom Width, with the Image element on the left, pulling the logo dynamically from the Global Options, a left Justified Menu Element in the second Column, a right justified Menu Element in the third, and a button in the fourth.

The menu breaks to a mobile menu in Medium screen view, and in Small screen view, the Header hides the WooCommerce Menu, and takes advantage of the Responsive Option Sets, and resizes the Columns so the Logo and Menu are in two half Columns in one row, and a full width Button sits below.

Pre-built Headers - New Header 4

Front End Preview

Prebuilt Headers - New Header 4

New Header 5

New Header 5 is a very interesting two Container Layout, and a perfect one to learn how the Header Builder works and what a lot of the new features can achieve.

As you can see in the first image below, the top Container has four Custom Width Columns, with a Logo on the left, a Search Element after that, a text Block Element in the third, and a Menu Element in the fourth, designed for an iconized WooCommerce menu.

The second Container has a full width Column for holding the main Menu, and a secondary menu that only appears in Small Screen view. This is also a Sticky Column, whereas the first one is not, so as you scroll, the menu remains at the top of the page.

This menu also changes quite a bit in the responsive screen views. On Medium Screens, and thanks to the Responsive Option Sets feature, the four Columns in the top Container all become 50% Columns, thereby changing their layout to two rows in the Column.

In Small Screen view, the first three Columns go to fullwidth Columns, while the last Column with the WooCommerce Menu isn’t visible. But now, in the second Container, the WooCommerce last Menu re-appears, as a one half column, and the main menu becomes a mobile menu in the other 50% Column. Check it out!

The trick with this Header, and to get this Header to look like the preview, and like the Designer intended, is to ensure that the Menu Element in the top Container has an icon only WooCommerce menu assigned, the first menu in the second Container has the main navigation menu for the site assigned, and that the last menu in the second Container also has an icon only WooCommerce menu assigned.

Prebuilt Headers - New Header 5

Front End Preview

Pre-built Headers - New Header 5

New Header 6

New Header 6 is a cool two Container Header, where both Containers are Sticky. The top container is straight forward with two Columns, one with a Text Block and another with Social Links. In the second Container, there are again two Columns, the first, an Image Element pulling the Logo, and the second holding the Menu Element.

This Element has some lovely styling on it, with a transitional hover background color with an arrow underneath, making the Menu items resemble speech bubbles. And on Mobile view, it breaks down to a Mobile Menu. A nice, simple Layout, but very attractive.

Pre-built Headers - New Header 6

Front End Preview

Pre-built Headers - New Header 6

New Header 7

New Header 7 is a single Container Layout, with two Columns. One pulls the Logo via the image Element, and the other container the Menu Element. This Element has tab like styling, and is designed for a menu with logos added to the menu Items. The Menu collapses to a mobile menu at Medium Screen Size, with the Submenu in Dropdown mode. The Container has a dark background color, while the menu tabs are light, so this Header might not work with a dark logo without further customization.

Pre-built Headers - New Header 7

Front End Preview

Pre-built Headers - New Header 7

New Header 8

New Header 8 is a centered Header Layout in two Columns. The Container itself has a very light green background color, while the Columns hold the logo at the top (via the image Element) and the menu underneath. The Menu items have a nice hover effect. In small screen view, the header reverts to logo on the left and mobile menu on the right.

Pre-built Headers - New Header 8

Front End Preview

Pre-built Headers - New Header 8

New Header 9

New Header 9 is a two Container Header. The top Container has a left aligned Menu Element, acting as a secondary menu, and a Button on the right. This Container is also Sticky and has a nice Box Shadow effect applied to it. In Small screen view, this Container is not visible.

The second Container has a light color background color and holds the Logo, via the Image Element, and the main Menu, which has a nice rounded hover effect. In Small Screen view, the menu breaks to a mobile menu.

Pre-built Headers - New Header 9

Front End Preview

Pre-built Headers - New Header 9