WoodMart Footer Modification Guide: Structure Layout and Style Optimization

The footer section of your website carries very many informational functions: brand identity, navigational guidelines, subscription portals, social media links, and even takes on conversions and enhances trust.

This post will take you through the system WoodMart FooterThe setup method, including restructuring and style beautification,Response Optimizationwith advanced tips and other content to refresh the bottom of the site.

preliminary

Before getting down to the business of modifying the footer, the following preparation is recommended:

Create well in advance HTML Block, used for content layout.

Keep WoodMart updated to the latest version(8.2.2 and above recommended) to ensure full functionality;

start usingsubtheme, to avoid subsequent updates overriding customized settings;

Temporarily disable the caching pluginto instantly preview the modifications;

1. Adjustment of footer through WoodMart theme settings (basic version)

Ideal for quickly adjusting footer layout, color and content without code.

Operational Steps:

• Go to Theme Settings
  • Log in to the WordPress backend → click on the left menu WoodMart → Theme SettingsThe

• Go to Footer Settings
  • In the left navigation bar select FooterThe
  • Enable Footer: Ensure that the switch is ON(on by default).

• Content::
  • Select a preset layout style (e.g. 4-column, 3-column, 2-column, or custom).

• HTML Block Select Content Source or New.

• Background::
  • You can set a solid color background (Color) or upload an image (Image).
• Text Color: Modify footer text and title color.

Widgets: Controls whether footer widgets (e.g. menus, social media, etc.) are displayed.

• WordPress Backend → Appearance → WidgetsThe
  • locate Footer 1 / Footer 2 / Footer 3 / Footer 4 etc. areas (according to the thematic layout).
• drag-and-drop gadget to the corresponding region, for example:
  • Navigation Menu

• Social Media Icons (Social Icons)
• Text(for copyright information)
• Search box (Search)

• Save Settings

2. Visual footer editing with Elementor (advanced version)

Ideal for those who need the freedom to drag and drop designs, addCustomized contentof users.

Ensure that it is installedElementor Pro(math.) genusUsing Elementor's "Footer" template (recommended)

• Access to the template library
  • In the Elementor editor, click "Folder icons" (template library)The

• look for sth. "Footer", select the appropriate pre-made footer template.

• strike (on the keyboard) "Insert.", the template is automatically added to the bottom of the page.
• Modify template content
  • Replace text, links, icons, etc. so that it matches your brand's style.
• strike (on the keyboard) + (add new section)Selection Footer or manually drag and drop components:

• Heading: Add a company name or section title.
• Menu: Insert navigation links.

• Social Icons: Add links to Facebook, Twitter, etc.

• HTML Widget (HTML code): Customized code can be embedded (e.g. email)Subscription Form)

Adjusting the style

• Select an element → Adjust in the left panel Style(e.g., fonts, colors, spacing).
• exist Advanced The tabs allow you to adjust margins, animations, etc.

• Save and PublishClick Update, refresh the page to see the effect.

3. Customizing footer styles through CSS (code version)

For users who need to fine-tune their design (e.g. hover effects, spacing optimization).

Operational Steps:

• Go to the WordPress Custom CSS Editor(or usecode plugin)
  • go into Appearance → Customize → Additional CSSThe

• Add custom CSS code
  • For example, modify the footer background, text color, and link hover effects:

/* Modify footer background and text color */ .website-footer { background: #222222; color: #ffffff; padding: 40px 0; } /* Adjust footer subheader style */ .footer-column h5.widget-title { font-size: 18px; text-transform: uppercase; margin-bottom: 20px; color: #fbbd08; /* Title color */ } /* Modify the footer link hover effect */ .footer-column a:hover { color. #fbbd08 !important; text-decoration: underline; } /* Adjust copyright information at bottom of footer */ .footer-copyright { background: #111111; padding: 15px 0; text-align. center; }

4. Recommended Advanced Tips

In addition to the regular setup, try the following advanced tips to enhance professionalism:

Dynamic information variables

Use dynamic shortcodes supported by WoodMart such as:

<p>© {{current_year}} {{site_title}}. All rights reserved.</p>

Automatically update the year and site name to avoid manual maintenance.

Icon loading optimization

It is recommended to use SVG icons instead of Font Awesome to reduce the request burden and speed up loading.

Inserting a script or trace code

Tracking code for Google Analytics, Facebook Pixel, etc. can be embedded in the footer HTML Block without modification. footer.php Documentation.

Multi-language footer support

add sth. into a group WPML or Polylang MultiLanguage plug-insIn addition, you can specify different HTML Blocks for different language pages to achieve internationalized footer.

Practical Optimization Suggestions

• Keep it simple.: Avoid too many links and keep only important information (e.g. contact details, privacy policy).
• Mobile Adaptation: Ensure that the footer displays properly on mobile (Elementor or CSS breakpoints can be adjusted).
• SEO optimization: Add structured data (e.g. company address Schema tags) to the footer.
• Loading speed: Avoid adding too much JavaScript script in the footer.

summarize

WoodMart FooterThe system is very flexible, combining Footer Builder and HTML Block, whether it's a simple three-column link, a mixed-text graphic, a social media link, or a marketing area. Utilize these settings and choose what works for you to easily create professional and beautiful WoodMart footers.

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