Customize Header and Footer of WoodMart Theme

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

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
  • 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
  • Or clickimport headerImport Header
Image [4] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout

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
Image [6] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout
  • 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
  • Click Settings to configure the header settings
Image [8] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout
  • 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
  • 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

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

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
  • 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
  • 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
  • Save to return to the front page
Image [15] - WoodMart Theme Header and Footer Customization Guide: Creating a Personalized Layout

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.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
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
? Reprint statement
This article was written by: thieves will be rats and mice courage
THE END
If you like it, support it.
kudos102 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments