Editing a Custom Layout Section
When you first edit a new Layout Section, you come to the default WordPress Editor. From here, you can choose to use Avada Builder, or Avada Live. It is here we create our Custom Layout Sections. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.
Anything you can build in the Avada Builder can constitute the content of your Layout Sections. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.
IMPORTANT NOTE: It’s important to note that when you have a Header Layout Section attached to a Global Layout, the Header Options in the Theme Options will not be available. Everything in the Header is controlled in the Layout Section by the content options and the Layout Section Options, the equivalent of the Page Options in Layout Sections.
Elements of a Custom Header
For a Custom Header, one essential element would likely be the new Menu Element. This is the only specifically new Design Element made for the Header Builder, and has a huge range of features to configure and display your menu in multiple ways.
The Image Element is another Element that will likely be in most Header designs, and this has been expanded, so you can use it to place your logo into your Header Layout as either an image or Dynamic Data. And remember, that with the Header Builder, you can use any Design Elements to complete your design, so depending on your design you might also use any number of other Elements.
For a Header Layout, there are also options in the Container and Column Elements you can use, such as Container Background Options, Sticky Containers, Container Offset, Responsive Options Sets, Sticky Visibility options and many more. Please see the Container and Column Element docs for full details on their new features. The choice and the design are completely up to you, and the entire design flexibility of Avada Builder is at your fingertips.
Avada also offers an easy way to get started with a Custom Header. This is by adding a Header Demo from the Avada Library. Here, we have added a range of Custom Headers, which you can add to the Layout Section to then customize, to meet your own requirements. There are the 7 original Headers that you know from the Global Options, and a further 9 new Header designs. This gives you a total of 16 different Header designs you can import into your Layout Section, as a starting point for your own Custom Header.
For full details of these designs, please check out the Prebuilt Headers for Layouts doc, but adding them to your Layout is very easy. When you first edit your newly created Header Layout Section in Avada Builder, just click on the Pre-built Header link on the Starter Page, and the Library will open on the Header Demos tab, with all the headers ready to import.
Example Of A Custom Header
As mentioned, there are almost no limits for what you can create using the Header Builder. As an example, see below for the Header Layout design of the Pet Supplies Website. As you can see, it is a multi-container layout, using many of the new features available in Avada 7, including the Menu Element, a dynamic logo, Custom Column widths, a Sticky middle Container with additional Elements that only have Sticky Visibility, as well as responsive changes in Tablet and Mobile layouts.
The top Container holds the logo, search bar, some text, and the WooCommerce Cart icons. The middle container holds the main menu, which itself has sub-menus and a mega menu, and a logo and another two menus with visibility options applied, so that they only show when the Container becomes Sticky. The last Container just has a tiled background image and three text blocks with icons and text. The Header also makes good use of the new Responsive Option Sets feature, displaying a different header layout for both Tablet and mobile.
Make sure to watch the How To Create A Custom Header video, embedded at the top of the page, to see further details of this truly custom header.
See below for an example of what this Header looks like in Desktop view, but to truly get a good feeling for all that’s going on in this Custom Header, it must be experienced on the live site, which you can access here.