Personalizing Headers and Footers: Using the WoodMart Header Builder in Detail

exist WordPress In an e-commerce website, headers and footers are not just tools for navigation and brand presentation, but also about conversion and trust.WoodMart The theme provides a powerful Header Builder, visualization operation, easy to create a unique layout. This article takes you step by step to build a unique header and footer structure.

I. Enabling WoodMart Header Builder

• log in WordPress the area behind a theatrical stage
• Go to WoodMart > Header Builder

The interface is very intuitive, with drag-and-drop component layout, similar to Elementor's operating logic.

II. Customizing the header (Header)

1. New header

Click on the "add new header" option and select the desired structure style, such as logo Left centered, menu centered, icons right centered, etc., or a blank template.

2. Adding module components

Click the plus sign to search and add the following modules:

• logo: Add a website logo that can be uploaded PNG maybe SVG specification
• Main Menu: The main navigation menu needs to be set up in WordPress first.

• Search: Search box, support switch to product search, choose your favorite style

• Cart: Show shopping cart icon, suitable for e-commerce functions
• Social Icons: Add social media links

3. Setting styles and response displays

Once you click on the module, you can set the font, color, background, margins and other style details.

Click the "Desktop/Mobile" icon in the upper right corner to adjust the display effect of each end.

4. Sticky Header

Click Settings to turn on the Sticky feature, which allows the header to remain at the top of the page when scrolling, for easy manipulation and navigation.

III. Customizing the footer (Footer)

WoodMart Although there is no standalone Footer Builder, custom footers can be implemented with the help of the following two methods:

Mode 1: Using the widget area

Go to Appearance > Widgets > Footer WidgetsThe content modules such as text descriptions, menus, contact information, etc. can be added.

Way 2: Use Elementor to create footer templates

• Open Elementor > templates > Add new template
• Select "Footer" for type

• Designing Footers with Elementor Drag & Drop Editing

• Set the display range to "entire station".

• Return to WoodMart and go to Theme Settings > Footer and select the template you have created.

IV. Customizing code areas (advanced usage)

WoodMart's header and footer support insertion HTML compatibility with JS Scripts, common uses are:

• Third-party customer service plugin embedded
• Website statistics tracking code added
• Top Bulletin or Advertisement Information Display

V. Frequently Asked Questions and Tips

• Logo Transformation? It is recommended to upload images up to 200px in width and in SVG format to avoid blurring.
• Menu not centered? Place the menu module in the center column and set the alignment to "center".
• Footer duplication? Check for conflicts between Elementor and theme settings to avoid double-calling templates
• Responsive misalignment? Layout can be adjusted individually under each device to fit different screen sizes

concluding remarks

WoodMart The Header Builder provides a flexible editing environment to work with Elementor templates and the WordPress Widgets to customize the header and footer structure with strong branding features. Get your hands dirty and bring a professional look and clear navigation to your e-commerce site with simple actions.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off