Header builder introduction
All our themes have a new modern way to create and configure your website header without coding. With our new exclusive header builder, you can easily customize the top part of your website and put any elements you want to see there. Choose from our elements libr...
How to create a header with header builder
There are a few ways to create a new header with the header builder: create an empty structure and fill it with any elements you need, use our templates examples library and then customize it to your needs or import it with JSON data exported from some othe...
Header structure
When you edit your header with the header builder you can see an area with three rows that contain three columns each. They represent three parts of your website header: top bar, main header, and header bottom part. All of these columns are drag & drop container areas so you c...
Header elements
To add a new element to some of your header positions you need to click on “Add element” button (plus icon). You will see a popup window that contains all elements available
Website logo image
Main navigation menu
Secondary menu
Mobile menu
Shopping cart widget
Wishlist icon
Search ...
The header built with our header builder contains three rows and each of them may have its own color scheme. To change their backgrounds you need to click on the “Edit” icon and switch to the “Colors” tab. There, you are able to change the text color scheme between dark and light, specify your backg...
With our header manager, you are allowed to create as many headers as you need. To choose which one will be used for your website pages you need to go to Space Dashboard -> Header builder and click on the “Make it default” button for the header you need.
You can also create and specify a differe...
The total header height is calculated based on all row heights including the top bar, main header, and the bottom part. You can edit each row and find three sliders for its height: height for desktop, for mobile devices, and for the sticky header if it has the “Sticky row” option enabled. So you are...
Each header part (row) has three columns and their widths proportions may be set in two variants.
Flexible middle column
The first is called “Flexible middle column” and is set by default for all rows. The main feature of this variant is that left and right columns will take their width from the ele...
Desktop and mobile layouts
Our header builder has two different areas to add your elements for desktop and mobile devices. The area for large devices is applied for devices resolutions starting from 1025 pixels in width. Used for laptops, desktops, and other larger screens. And another one is for 10...
Header settings
In the left top corner of the header editing screen, you can see the “Settings” button. It brings a general settings popup that contains some basic options for the header.
List of general settings available
Overlap. This option will make your header be above the content. It is usef...