Would you like to customize your site’s header and footer? The header and footer builder in Botiga lets you add rows, columns, and components to create a fully customized layout for desktop, tablet, and mobile.
In this guide, we’ll walk you through how to use the header and footer builder in Botiga.
Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active.
Access the builder options from Appearance >> Customize >> Header and Appearance >> Customize >> Footer.
Using the Header Builder
The header builder lets you add up to three rows to your header and populate them with pre-defined components. Set the number of columns for each row and access responsive settings like vertical and horizontal alignment.
Here are the header builder components available in the free version of Botiga:
- Primary Menu: the main menu of your website.
- Secondary Menu: the secondary menu of your website.
- Social: displays social follow icons.
- Search: displays a search icon.
- Site Title and Logo: displays the logo, site title, and tagline.
- Button: displays a button.
- Contact Info: displays contact info such as address and phone number.
- HTML: renders custom HTML content.
- WooCommerce Icons: displays WooCommerce icons (requires the WooCommerce plugin).
Botiga Pro extends the header builder with these premium components:
- Button 2: adds an extra button component so you can have up to two buttons in the header.
- HTML 2: adds an extra HTML component so you can have up to two custom HTML areas in the header.
- Shortcode: renders any shortcode tag.
- Login/Register: displays login and register links.
- Polylang Language Switcher: displays a language switcher for the Polylang plugin.
- WPML Language Switcher: displays a language switcher for the WPML plugin.
Configuring the Mobile Header
The header builder is responsive, so you can customize the header for mobile and tablet devices as well. Click the Tablet/Mobile tab as shown below to switch into mobile editing mode.
The mobile header doesn’t inherit components from the desktop menu. You’ll also see a left sidebar area that represents the off-canvas menu. In Tablet/Mobile mode, two additional components are available:
- Menu Toggle: adds a menu button that opens the mobile off-canvas sidebar.
- Off-Canvas Menu: displays the main menu inside the off-canvas mobile sidebar.
Since Botiga Pro v1.2.1, the mobile Off-Canvas Menu component also supports a product categories tab. Learn more in our guide on enabling product category navigation in the mobile off-canvas menu.
Using the Footer Builder
The footer builder works like the header builder. You can add up to three rows, set the number of columns for each, and configure responsive alignment settings.
Here are the footer builder components available in the free version of Botiga:
- Copyright: shows a copyright notice.
- Social: displays social follow icons.
- Button: displays a button.
- HTML: renders custom HTML content.
- Widget Area 1, 2, 3, and 4: render widgets to four separate footer widget areas.
Botiga Pro extends the footer builder with these premium components:
- Button 2: adds an extra button component for up to two buttons in the footer.
- HTML 2: adds an extra HTML component for up to two custom HTML areas in the footer.
- Shortcode: renders any shortcode tag.
- Footer Menu: displays the footer menu.
Styling Rows, Columns, and Components
Styling Rows
Each header and footer row has its own styling settings: height, background color, border, and more. Hover over the row you want to edit and click the cog icon.
From here, edit the styles of the row, including its height.
Styling Columns
Each column has its own styling settings, including vertical and horizontal alignment, inner element layout, and spacing.
Hover over the column you want to edit and click the Edit Column icon.
Styling Components
Each component has its own style settings. Click the component you want to style to access its options.
The style settings appear in the Customizer on the left of the screen. Here’s an example of the style options for the Primary Menu component.
Frequently Asked Questions
Below, we’ve answered some of the most common questions about the header and footer builder in Botiga.
Can I have a different header on mobile?
Yes. The mobile header has its own builder. Switch to the Tablet/Mobile tab and design a layout that’s separate from the desktop one.
How many rows can I add to the header or footer?
Up to three rows in both the header and footer. Each row can have multiple columns and any combination of components.
Which components require Botiga Pro?
Button 2, HTML 2, Shortcode, Login/Register, Polylang Language Switcher, WPML Language Switcher, and Footer Menu are all Botiga Pro components. The rest are available in the free Botiga theme.
That’s it! You’ve successfully learned how to use the header and footer builder in Botiga.
Next, would you like to add a header image above your new layout? Check out our guide on adding a header image in Botiga to learn more.
