Header builder

HomeHeader builder

Header builder

Jan, 1 451
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...

Create a header

Jan, 1 232
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 rows and columns

Jan, 1 152
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...

How to add and edit header elements

Jan, 1 229
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 ...

How to change the header color scheme

Jan, 1 118
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...

How to set default header for website

Jan, 1 86
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...

How to change the header height

Jan, 1 73
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...

Header rows flex layouts

Jan, 1 79
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...

Header responsive settings

Jan, 1 71
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...

Global header settings

Jan, 1 127
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...
Sign in

No account yet?

Create an Account