How to Edit the Header Template?

Adding Header Elements

Header builder is based on a page builder of your choice so generally you can add any content elements and make any layout configurations as you normally do by editing pages. This gives you an outstanding flexibility and unlimited possibilities in designing your header.

To simplify the choice of the elements frequently used in designing the header in TheGem this elements are grouped in “Header Builder” section of the page builder.

Elementor

To add new element to the empty header template, simply drag’n’drop this element in the header content area

To add new element to other existing elements, just drag this element and position it where you wish to place it and drop it there.

To add new elements to the empty header template, just click on “Add element” button and select this element.

To add new element to other existing elements in the row, just click on “+” button at the bottom of this row and select this element

Basic Editing Principles

Flex / “One Column” approach

TheGem’s header builder is based on css flex and flex containers to achieve the maximum flexibility in setting up any header layouts in a quick and simple way. There is no need to create complex “multiple columns” layouts to achieve the desired result: almost all imaginable header layouts can be built in a simple way using “one column in a row / section” approach.

Inline Elements

By adding new elements to your header template inside one row (WPBakery) / one section (Elementor) you will see that this elements are added one by one as inline elements with automatic vertical middle alignment. All you need to do is to position this elements in a row / section according to your requirements. You can do it using “Flex Options” settings in a column and / or in header elements.

Flex Options

All columns and elements in TheGem’s header builder have a special set of “Flex Options”, allowing you to align and position the header elements inside a row / section. Check details below.

Column

WPBakery

Click on the “pencil” icon in the column to start editing a column

Layout

• Flex Container: if activated, this checkbox applies the flex container on the header column. By default this option is active – all elements added to this column will be placed inline and will be aligned using flex approach.
• Vertical Align: this setting defines the vertical alignment of elements inside the column. By default it is set to “middle” for proper vertical positioning of header elements to each other.
• Horizontal Align: with this option you can apply flex alignments to all elements inside the column at once. It can be demonstrated in this header examples:

• Items Wrap: defines the “wrapping” behaviour of elements inside the column. By default it is set to “wrap” – in case some elements will not fit in one line, they will be wrapped on the other line

Design Options, Responsive Options  

In this two sections you can control margins and paddings of the column for desktop, tablet and mobile

Click on the “column” icon to start editing a column 

To position and to align header elements added to the column at once, you an use “Horizontal Align” setting

With this setting you can apply flex alignments to all elements inside the column at once. It can be demonstrated in this header examples:

Along with the typical Elementor’s column settings, there are two additional settings for header builder

• Place Elements Inline: this option is active by default and forces all elements added to the column to be placed inline
• Items Wrap: defines the “wrapping” behaviour of elements inside the column. By default it is set to “wrap” – in case some elements will not fit in one line, they will be wrapped on the other line

Elements

All elements, added to the header template, have a special set of  “Flex Options” for aligning and positioning inside the column. You can find this options here:

Elementor

• Hide Element: allows you to hide this elements on the chosen device
• Horizontal Align: with this option you can apply horizontal flex alignment to the element. Please note: this alignment works inside the flex container so all flex alignment rules are applied here (contrary to simple text-align).
• Vertical Align: specifies the vertical alignment of the element inside the column
• Position absolute: activates the absolute positioning of the element inside the column; if activated, no flex alignment rules are applied to this element anymore. This setting may be useful for centering elements inside the column with different amount of other elements to the left and to the right of this element.
• Flex Padding: This setting controls paddings which apply to the flex container of the header element.
• Flex Margin: This setting controls margins which apply to the flex container of the header element.

Responsiveness

All flex options in all elements and columns inside the header template can be separately set up for desktop, tablet and mobile. Also you can hide rows/sections, columns and elements on different devices. In this way you can create absolutely different header layouts for different devices.

Using multiple columns

If you are more comfortable with creating layouts using multiple columns in a row (WPBakery) / in a section (Elementor), you can surely do it in TheGem header builder as well.

WPBakery

You can add multiple columns by editing the row element and specifying row layout

To custom control the width of the columns across different devices please use “Responsive Options” tab while editing column

Elementor

You can add additional columns by right-clicking on the column icon and selecting “Add new column”. To control the width of the columns across different devices simply drag the right or the left border of the column with your mouse while editing the header in the corresponding device mode