The Header Builder were introduced to Botiga Pro since its 1.0.6 version. It’s bundled as a module and might be enabled from Admin Dashboard > Appearance > Theme Dashboard. This feature replaces the default Botiga header system (pre-defined layouts) with a new drag and drop system.
Once you have it enabled, you can use it from either clicking on “Customize” link from Admin Dashboard > Appearance > Theme Dashboard > Header Builder or from Appearance > Customize > Header > Header Builder.
The header builder allows you to have up to 3 rows to populate with pre-defined components:
Here’s the list of components:
1. Primary Menu: The main menu from website.
2. Secondary Menu: The secondary menu from website.
3. Social: Display social icons profiles.
4. Search: Display the search icon.
5. Site Title & Logo: Display the logo, site title and tagline.
6. Button: Display a button.
7. Button 2: An extra button component so you can have up to 2 buttons in the header.
8. Contact Info: Display contact info like address and phone.
9. HTML: Render HTML content.
10. HTML 2: An extra html component so you can have up to 2 custom html areas in the header.
11. Shortcode: Render any shortcode tag.
12. Login/Register: Display login/register link.
The header builder is responsive and you might customize the header for mobile/tablet devices as well. For it, just click on the “Tablet/Mobile” tab like in the below image:
The mobile header doesn’t inherit components from the desktop version. Also, there’s a left side bar which refers to the Offcanvas menu. While editing the header on “Tablet/Mobile” mode, new components will be available:
1. Mobile Hamburger: A hamburger button to toggle open/close the mobiel offcanvas sidebar.
2. Offcanvas Menu: Display the main menu inside the Offcanvas mobile sidebar.
Each header builder row has your own styling settings, like height, background color, border, etc… You can access these options by mouse overing the row and click on the “cog” icon to edit:
Each component has your own style settings as well. For example, the Primary Menu component. We just need to click on the component and the settings will be shown in the customizer left sidebar: