WoodMart The theme comes with a very powerful Header Builder and Footer Builder, which allow you to flexibly adjust the layout of the top and bottom of the page to better match the brand image. Through the reasonable design of the header and footer, you can not only improve the overall visual effect of the site, but also make the navigation structure more clear, so that users can quickly find the content they need.
Next, we'll dive into customizing the header and footer of your WoodMart theme, including how to use these tools to create unique layouts, tweak design elements, and optimize the user navigation experience.
![Image [1] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305112232391-image.png)
Header Settings
WoodMart The theme allows deep customization of the header, including adjusting the layout, colors, components, etc., to ensure optimal display on different devices.
Go to Header Builder
- go into WordPress the area behind a theatrical stage
- option WoodMart > Header Builder
![Image [2] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305102658859-image.png)
- Select the appropriate header layout, or click Add New Creating a new header structure
![Image [3] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305102958238-image.png)
- Or clickimport headerImport Header
![Image [4] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305103259620-image.png)
Adjusting the header layout
In the header builder, the position of each module can be adjusted using drag and drop, for example:
- logo: Upload the brand logo, resize and align it
- main menu: Support multi-level drop-down menu, can modify the font, color, spacing
- search box: Support Ajax Search or general search field
- Shopping cart icon: for e-commerce sites, with optional hover to show cart content
- Social Media Icons: Add Facebook, Instagram, Twitter. and other social links
![Image [5] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305105608640-image.png)
![Image [6] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305103514821-image.png)
- strike (on the keyboard)Forntend editorGo to the front-end visualization editor
![Image [7] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305104318314-image.png)
- Click Settings to configure the header settings
![Image [8] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305104203260-image.png)
- Hover over the widget and click on the arrows to edit the details.
![Image [9] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305104414202-image.png)
- Top bar, main header and left gear at the bottom of the header are configurableLine Height, Responsiveness, Background and Text Color
![Image [10] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305105321162-image.png)
Mobile Optimization
exist Mobile Header Options in:
- Choose a layout exclusive to mobile, such as a hamburger menu
- Adjust button size and menu display to make navigation easier
![Image [11] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305105707904-image.png)
Footer Settings
WoodMart The footer builder supports different layout styles and modules can be added or removed as needed to make the information at the bottom of the site clearer.
Go to HTML Blocks
- go into WordPress the area behind a theatrical stage option html blocks
- strike (on the keyboard) Add New Item Create a new footer and clickEditing with elementor You can modify and add elements
![Image [12] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305110611249-image.png)
- Once the content is populated click save and copy the html shortcode
![Image [13] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305112111544-image.png)
- Open the page where you want to edit the footer, add the html element, and paste the html shortcode you copied into it.
![Image [14] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305111742821-image.png)
- Save to return to the front page
![Image [15] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout](http://gqxi.cn/wp-content/uploads/2025/03/20250305111935510-image.png)
summarize
WoodMart The theme provides a wealth of header and footer customization options, master these methods, you can more easily create a unique page structure, make the site more professional and beautiful.
Link to this article:http://gqxi.cn/en/35754The article is copyrighted and must be reproduced with attribution.
No comments