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 rows, elements, responsive layouts, and header settings.

Frontend mode button in the Header Builder editor — Open Frontend mode from the header editor to work with a live page preview.

Open Frontend mode

Open a header in Dashboard -> WoodMart -> Header builder and click Frontend editor.
While viewing the website as an administrator, use the WordPress admin bar and select WoodMart -> Header builder -> Edit current header.

Edit current header option in the WordPress admin bar — Use **Edit current header** in the admin bar to open the header displayed on the current page.

Edit and preview the header

Edit the header with the same controls available in the backend editor. Changes appear in the preview as you work, but you must click Save header to store them.

After saving, click Backend editor to continue in the backend Header Builder, or use Close editor to leave Frontend mode.

Live header editing in Header Builder Frontend mode — Header changes are displayed directly over the live page preview.

Use Select preview page at the bottom of the editor to check the same header on another page, post, product, or project. This changes only the preview context; it does not assign the header to the selected content.

Select preview page control in Header Builder Frontend mode — Change the preview page without changing where the header is assigned.