Header Builder in Customizer
In Porto 4.8, header builder is newly added to create and modify the site header dynamically on different devices without using pre-built header types.
Page builder is to build page contents, and header builder is to create header layout and contents.
To get to the header builder section, please go to Porto -> Theme Options -> Header -> Header builder.
Then header builder will appear on the bottom of preview page.
There are three sections in the header builder: top bar, main header and bottom header sections.
Each section is also divided into three boxes: left, center and right.
And at the top of the header builder there are header builder elements which can be dragged and dropped into the header boxes.
So if we drag and drop logo element into the center box of the main header section, Logo will be displayed on the center of the main header in the preview page.
You might not want to have any header elements, then you can drag and drop them into the bottom of the header builder which contains header builder elements.
You can build header layout for desktop and mobile separately. If you click mobile icon on the top of header builder, header builder section of mobile version will be displayed.
Following gives brief explanation about some header elements.
- Row – creates a row which can contain any header builder elements.
- Porto Block – we can place porto blocks which were created using Blocks -> Add New.
- HTML – we can place any other html content using this element.
- Custom Menu – custom menu content which is inserted in Theme Options -> Menu -> Menu Custom Content.
- Contact – contact information which is inserted in Theme Options -> Header -> General -> Contact Info.
- Secondary Menu – secondary menu which is created as a “Secondary Menu” for display location when creating menu.
Note:
When you drag some header elements into the header, they might not be displayed in the page. For example, you place search form element but it can’t be displayed in the header. That’s because you have disable header search form in the theme options. In this case you need to enable header search form using Theme Options -> Header -> Search Form -> Show Search Form option.
There are 3 tooltips for top bar, main header and bottom header in header builder. If you hover on header builder sections, tooltips will be displayed at the top left corner of them.
If you click theses tooltips, it will go to the header skin settings panel. If you want to come back to the header builder again, please click go to Header Builder link at the top of this panel.
To use newly created header layout using header builder, you need to select
"Header Builder"
in Theme Options -> Header -> Header Type.
