How do I create my header with the Ex2 theme?

Create your header

The header is the top section of your website, displayed on all (or almost all) pages and publications. This is something that every website visitor sees first... your chance to have a good first impression.

It’s a place where visitors can meet your brand, offer or idea, and be first delighted and intrigued to explore your website further.

The Ex2 theme comes with a header generator by drag and drop. This is a perfect tool to create beautiful headers quickly and effortlessly, without any coding. Here you can add and customize your logo, site title and tag, header style, menus, buttons, social icons and much more.

You have complete freedom to position the elements by simply dragging them to any position in the header, as simple as that.

Header Builder: General Tab

The General tab is your default view when opening the header generator. Here you have an overview of your header configuration.

To enable transparency, activate the "Enable All Site" option. This will also open additional options to disable the transparent header for a page or types of
specific publication.

A “Enable on” section allows you to choose to enable the transparent header only on desktop computers, only mobile devices, or both
(office + mobile).

The “Different logo for transparent header” option is useful if your logo looks good on the standard header but not as good with a transparent template. You can enable this option and set a different logo to use for the transparent header.

It is also possible to define the width of the logo of the transparent header. Depending on the logo you use, you may want to add a logo for Retina screens (higher pixel density) that should be at least 2 times larger or more. Simply click on "Different logo for Retina devices" and download your Retina logo.

Design Tab

Under the Design tab, you will find options to style your transparent header. You can define the site title, background, menu, submenu and colors. In addition, there are options to define the background overlay and the bottom border. The bottom border is set to 0px by default and is therefore not visible.

Increasing the border value (1px or more) will make it appear on the frontend, and you will also have the option to set the color of the lower border.

Keep in mind that these settings only apply to your transparent header. If you use your usual header on some pages, these settings will not be applied here.

Header Builder: Design

The Design tab is used to define the spacing of your header
Width defines the total amount of space your header widgets will use
Full width will spread your header widgets from one edge of the screen to the other
Content width limits the display of your header widgets by using the width of your content.
The background of your header will always extend from one edge of the screen to the other.
The margin adds space on one or more sides of your header. This will add space to both the area and the background of your header widgets.

Visual header editor

The header consists of three separate sections that you can see in the visual header creation area. You can use all three sections to add any element to any position.

These three headings are:

Main header: this header is the middle section. It is most often used to add your most important items such as logo, main menu or search,
the basket and the account.
Above the header: this header is the top section and is displayed above the main header on your website. It can be used for your secondary elements,
such as the secondary menu, or items such as social icons, call-to-action buttons, etc. You can also use the HTML code to add for example the
current remission period, latest news or notification to website visitors.
Under the header: this header is the bottom section and is displayed under the main header of your website. The use of this header is the same as the use of the
head above.

The main purpose of the headers above and below is to avoid cluttering the main header. They extend the available area to add all the elements and information you need in your header, as well as to provide a certain level of hierarchy.

You can customize each section by clicking on the “cog” icon on the left side of the sections. Each section has two tabs:

General

Height: Set the height of each header separately.

Design

Bottom Border Size (and Color): If you need to separate your header from another section or from the content of a website, you can add a bottom border by defining the size of your border. Once you have set your border size, an additional option will appear (Bottom Border Color) to choose the border color.

Background: Define the background color of the header.
Border: Add a border on one or more sides of the header. This will add space between the edges of the header section and the content.
Margin: add a margin on one or more sides of the header. This will add space between this header and other areas of the website (other headers, page/publication content, screen edges, etc.).

Each header can be customized separately for desktop and mobile and can have different items added for each view. The position of the elements can also be changed.

Out of Field Menu

The out-of-field menu is used to change the menu for mobile devices (phones and tablets). This menu is activated by clicking on the “toggle in the mobile menu” button identified by an icon representing a phone.

To change this menu, switch to the Tablet or Mobile View Edit window. You can add items to this menu and order them the same way you change other header sections. To access it, simply click on the gear icon to the left of the various sections. This will open the following tabs:

General

Header Type: Set the pattern type disabled to Flyout (steering wheel menu from the right or left side of a screen), full screen or drop down.
Drop-down target: choose whether you want your submenus to open by clicking on the down arrow icon (Icon) or by clicking on an entire menu item (link).
Content alignment: Align the Off Canvas widgets to Left, Center, or Right.

Design

Spacing of interior elements: add space between elements;
Background: Set the background color.

Header element

Site Identity and Logo

This is the Identity and logo element of your site (previously called "Logo"). In the General tab, you can add your logo, set the width of the logo and add a different logo for Retina devices.

With this element, next to Logo, you can define the title of your site, the slogan of the site and the icon of your site (favicon). This information is also displayed at the top of your website tab in your browser. The Design tab is used if you want to add a margin to this element.

Primary Menu

Here you will find menu items added to your main menu (Dashboard >Appearance > Menus). The General tab offers several sub-menu options: sub-menu width, container animation (the animation used when developing a sub-menu), element separator (adds or removes a separator between the sub-menu elements).

You can also decide if you want to set your menu items to Mobile Stacking. This is the most common configuration for mobile menus. Menu items will be stacked on top of each other.

The Design tab allows you to define the style of the menu overview, to style your submenu container, to define the colors of the text and background, the font of the menu, the spacing of the manu and the margin.

Search

Adding this element will add a search function to your header. You can set the icon size, icon color and margin.

Social (header)

You can add your social network icons using this element. You can manage your social media icons using the General tab You can choose the icons
The Design tab contains the style options for the icons.

Button

This is used to add a custom button to your header. Add the text, link and style (Design tab) button here.

Secondary Menu

You can add another (secondary) menu to your header if you need it. You can also use it if you want to split your main menu into two separate menus.
For example, if you want to create a header with a logo positioned in the center, with your menu items next to them on the left and right sides.

You can customize this menu in the same way as the main menu.

HTML

Use this element to add HTML code or shortcodes.

Widget

This is used to add one of the website widgets (Dashboard > Appearance > Widgets) to your header.

Toggle button

The toggle button (also known as the hamburger icon or button) is used to expand your tablet/mobile menu. Thus, this element is only available on tablet or mobile views.

The General tab will allow you to choose the button icon and icon size, add a menu label (text next to the icon) if you need it and the style of the toggle button. Style options can be found in the Design tab: Icon Color, Background Color, Border Radius, and Margin.

Account

If you have plugins like LearnDash or WooCommerce active, you can add the user account shortcut using this element.

Shopping Cart

This will add a cart icon (WooCommerce) to your header. Next, set whether the basket title should also be displayed, or only the basket icon, and whether you also want to display a basket total (General tab). You can also style your trolley and trolley tray (Design tab).

Updated on: 27/03/2023