How To Build a Header and Footer With Layouts

Header and footer are layout sections: you design them in the Builder with containers, columns and elements, and a layout puts them on the site. This guide walks through the usual job from start to finish.

If layouts, sections and conditions are new to you, read the guide on the Layout Builder first. You need an administrator account for the screens used here.

In this article: Build the Header Section · Make the Header Sticky · Build the Footer Section · Give One Page a Different Header · Check the Result · Related

1. Go to Tirenoa › Layouts and find the Global Layout box.
2. Click Select Header. On the New Section tab enter a Section Name, for example “Main Header”, and click Create New Section.
3. Click the pen icon on the header area. The section opens in the Builder.
4. Add a container with two columns. Put an Image element with your logo in the first column and a Menu element in the second, and choose the WordPress menu the Menu element should show.
5. Save the section.

Because the section sits in the Global Layout, it replaces the standard header on every page as soon as it is saved.

The Layout Section tab in the options of a header section has a few settings of its own: Header Background Color, and Header Position with Top, Left and Right. With a left or right header you also set Side Header Width and Side Header Breakpoint, the screen width below which the side header moves to the top.

A header stays visible while the visitor scrolls when its container is sticky. The settings are on the Extras tab of the container.

Elements inside a sticky container can react to it. Element Sticky Visibility shows or hides an element in Normal or Sticky mode, so you can swap a large logo for a small one. The Menu element has Sticky Minimum Height and the Image element Image Sticky Max Width to make the stuck header more compact.

1. In the Global Layout box click Select Footer, enter a name and click Create New Section.
2. Open the section with the pen icon and build it: typically a container with several columns for address, links and legal menu, and a narrow container below for the copyright line.
3. Save the section.

The Layout Section tab of a footer section has Special Effect with None, Parallax and Sticky.

1. Go to Tirenoa › Layouts, enter a name such as “Landing Page” and click Create New Layout.
2. In the new box click Select Header and create a second header section, or choose one on the Existing Section tab.
3. Click the cog icon of the layout. In the Layout Conditions window open the Pages group, expand Specific Pages and click the check mark next to the page.
4. Close the window and design the new header with the pen icon.

Leave the footer area of this layout empty. The page then gets its own header and still uses the footer of the Global Layout. To use the same header on a whole group, choose a wider condition such as Children of Specific Pages or all items of a content type.

Note: If a page matches two layouts, the one further down the order on the Layouts screen is used. Drag the more specific layout behind the general one.

• Open a page of the site in a private browser window. Header and footer sections are part of every page, so a page cache may need to be cleared before visitors see the change.
• When you edit a page, the Tirenoa Page Options show a notice in their header, page title bar and footer settings that names the custom layout section the page currently uses and links to it.
• To go back to the standard header or footer, click the unlink icon on the area in the Global Layout. The section stays available under Tirenoa › Layout Sections.

• How To Use the Layout Builder – layouts, conditions and the Global Layout explained
• Menu Element – the navigation inside your header section
• Container Element – holds the sticky options used for headers
• How To Use Off Canvas – open a sliding panel or popup from a header menu item