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.
![图片[1]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/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
![图片[2]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305102658859-image.png)
- Select the appropriate header layout, or click Add New Creating a new header structure
![图片[3]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305102958238-image.png)
- Or clickimport headerImport Header
![图片[4]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/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
![图片[5]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305105608640-image.png)
![图片[6]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305103514821-image.png)
- strike (on the keyboard)Forntend editorGo to the front-end visualization editor
![图片[7]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305104318314-image.png)
- Click Settings to configure the header settings
![图片[8]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305104203260-image.png)
- Hover over the widget and click on the arrows to edit the details.
![图片[9]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/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
![图片[10]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/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
![图片[11]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/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
![图片[12]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305110611249-image.png)
- Once the content is populated click save and copy the html shortcode
![图片[13]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/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.
![图片[14]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/wp-content/uploads/2025/03/20250305111742821-image.png)
- Save to return to the front page
![图片[15]-WoodMart 主题页眉和页脚自定义指南:打造个性化布局](https://www.361sale.com/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:https://www.361sale.com/en/35754/The article is copyrighted and must be reproduced with attribution.



















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

No comments