Header builder

Build responsive headers, arrange elements, and control header behavior.

• Header Builder overview Header Builder lets you create and manage the complete header layout without editing theme files. Each header can contain separate desktop and mobile arrangements…
• Edit a header in Frontend mode Frontend mode displays Header Builder over a live page preview. It is useful for checking the header against actual page content while you edit…
• Create a header Navigate to Dashboard -> WoodMart -> Header builder and click Add new header. Click Add new header to choose a starting layout. Choose a…
• Configure header rows and columns Every header contains three structural rows: Top bar, Main header, and Header bottom. Each row has separate desktop and mobile containers, and elements can…
• Add and edit header elements Header elements provide the content and functionality displayed inside header rows. Available elements include Logo, Main menu, Secondary menu, Mobile menu, Cart, Wishlist, Compare,…
• Configure header row layouts Rows configured with three columns support two flex layouts. Open the row settings and use Row flex layout to control how the left, center,…
• Configure responsive headers Header Builder provides separate layouts for desktop and mobile devices. The desktop layout is used at viewport widths of 1025 px and above, while…
• Header settings Header settings control the complete header currently open in the editor. Click Settings in the Header Builder toolbar to open them. These options are…
• Change a header row color scheme Each header row has its own text color scheme and background settings. This makes it possible to combine light and dark rows within the…
• Set the default header The default header is displayed wherever no more specific header has been assigned. Navigate to Dashboard -> WoodMart -> Header builder. Locate the required…
• Change the header height The total header height is determined by the visible Top bar, Main header, and Header bottom rows. Each row has independent height controls. Configure…
• Add a logo to the header Use the Logo element to display the website logo in a header layout. Open the required header in Dashboard -> WoodMart -> Header builder.…
• Add spacing between header elements Most header elements include 10 px of horizontal spacing on each side, so adjacent standard elements commonly have approximately 20 px between their contents.…
• Assign headers to pages and content types All saved headers use the same Header Builder structure. One header is selected as the website default, while other headers can override it for…
• Enable header overlap Header overlap positions the header over the top of the page content. It is commonly used with a transparent header above a hero image,…
• Export and import headers Header Builder can transfer a complete header layout between WoodMart websites as JSON data. The export contains the header name, structure, elements, and header…
• Configure a sticky header Header Builder supports two sticky configurations: selected sticky rows that keep their existing elements, and an automatic Sticky header clone with a predefined compact…
• Use custom header icons Many Header Builder elements can replace their built-in icon with an image from the WordPress Media Library. Supported elements include Cart, Wishlist, Compare, Search,…
• Control the header logo size The displayed header logo size is determined by the Logo element width, the height of its row, and the proportions of the selected image.…