Woodmart HTML Block: Complete Guide to Building a Custom Footer

Woodmart built-in HTML Block Editing capabilities can accommodate various design scenarios, with custom footers being one of the most common applications. Using Page Builder, you can flexibly combine logos, social icons, menu lists, subscription forms, and payment information to create a more unified overall page structure. This tutorial outlines the complete process from creating HTML blocks to enabling footers in your theme.

Create an HTML Block dedicated to the Footer

Access the backend to create a new Block

Access the dashboard, select HTML Blocks, click Add New, and set a title for the block. Then open the Page Builder editing interface to start building the structure.

Create the top of the footer: Logo and social icons

Add a container and insert the logo

Add a Container to the page asfootersThe first line structure.
Select the image component from the element list and insert the logo file.
Set the width in the "Advanced" settings with the unit set to px to easily control visual proportions.

Add Social Icons Module

Insert Social Buttons into the same container:

Enter label text
Select the appropriate type
Switch the icon style to color
Set icon size to Small
Set the tag to Inline in Style to display icons and text on the same line.

Adjust the layout and spacing

In order for logo Icons are neatly arranged and can be modified:

Justify Content: Space Between
Align Items: Center

Additionally, top margin and bottom padding were added in the advanced settings to enhance overall visual harmony.

Building the Footer Main Area: Menu and Subscription Section

Establish the main container structure

Add a new Container as the second section of the footer and split it into left and right columns.
The left side is used to display multiple sets of menus, while the right side is used to showcase titles, subscription forms, and payment method information.

Left: Toggle Menu Structure (Toggle + Additional Menu List)

Add a Toggle element and set up the menu

Add a small container to the left column and insert a Toggle element.
After setting the title, add the Extra Menu List internally.
Remove the default title; menu items can be edited as links, text, or icons.

Set desktop to always show

Set the status to "Always Expanded" in Toggle so that menu items are directly visible in the desktop environment.

Copy and generate three sets of menus

Duplicate the entire menu container twice, modify the header content for each group, and make the three-column menu categories clearer.

Adjust the arrangement

Edit the main container and set the orientation to horizontal alignment:

Direction: Horizontal
Align: Center

The menu will be displayed on the same line.

Right side: Header area, Mailchimp form, and payment information

Add text title area

Insert Section Title, enabling only the title and text fields.
Set left alignment in Style and configure the color scheme.

Set background container style

Add this region:

background color
Approximately 20px padding
rounded corner

Make the overall visual focus more concentrated.

Join Mailchimp form (document)

Add the Mailchimp Form inside the background container and change its orientation to horizontal alignment, arranging the form input fields and buttons in a single row:

Direction: Row
Justify Content: Space Between
Align Items: Center

Add payment method icons and information boxes

Add a payment method icon below the form, then add an Info Box and enable the title and content fields.
Icon width and height can be customized to better match the layout.

Compatible with tablets and mobile devices

Adjust container width and stacking method

In tablet and mobile modes, set the container width to 100% to enable automatic line breaks for columns.
The main container orientation has been changed to vertical, arranging the columns in an up-down sequence.

Add appropriate white space

Add bottom padding to the menu container to make the content easier to read.

Enable Custom Footer in Woodmart Theme

Select HTML Block as the content to output in the footer

Go to Theme Settings and locate Woodmart (used form a nominal expression) Footer On the page, select the HTML Block you just created in the Footer content area.
After saving and refreshing the frontend, the footer will display according to the settings.

Final inspection upon completion

Finally, review how the page appears on desktop, tablet, and mobile devices to ensure that menu transitions, icon placement, form display, and spacing align with expectations.
After completing the above steps, a feature-rich, well-structured, and visually consistent footer has been successfully built.

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: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off