Footer navigation

Overview #

The Footer navigation section is designed to display footer content with various settings for end-of-page metadata and menus. This section allows for customization of the footer area, providing options to adjust the layout, appearance, and functionality to suit the needs of the site.

Key components and functionality #

Column count

This setting allows you to define the number of columns displayed in the footer for different devices. It provides flexibility in organizing footer content across various screen sizes.

• Desktop column count: Adjusts the number of columns on desktop devices. The range is from 1 to 8, with a default of 4.
• Tablet column count: Adjusts the number of columns on tablet devices. The range is from 0 to 8, with a default of 0. If set to 0, tablets will use the desktop setting.
• Mobile column count: Adjusts the number of columns on mobile devices. The range is from 1 to 4, with a default of 1.

Padding settings

The padding settings control the space above and below the footer content, ensuring that the footer is visually balanced and aesthetically pleasing.

• Top padding (desktop): The range is from 0 to 120 pixels, with a default of 32 pixels.
• Bottom padding (desktop): The range is from 0 to 120 pixels, with a default of 32 pixels.
• Top padding (mobile): The range is from 0 to 120 pixels, with a default of 16 pixels.
• Bottom padding (mobile): The range is from 0 to 120 pixels, with a default of 16 pixels.

Supported block types

The Footer navigation section supports various block types, including:

• Button
• Copyright
• Follow on shop button
• Footer menu
• Image basic
• Localization selectors
• Logo
• Payment icons
• Rich text basic
• Separator
• Social media icons

Usage notes #

• Responsive design: Ensure that the column count and padding settings are optimized for different devices to maintain a consistent and user-friendly experience across all platforms.
• Performance: Keep the number of blocks and content within the footer reasonable to avoid impacting page load times.
• Accessibility: Ensure that text and background colors meet accessibility standards for readability and contrast.

Usage examples #

1. Creating a multi-column footer: Use the column count settings to create a footer with multiple columns, which can be useful for organizing links and information in a structured manner.

2. Adjusting padding for aesthetics: Modify the padding settings to ensure the footer content is well-spaced and visually appealing, enhancing the overall design of the site.

3. Utilizing block types: Add various blocks such as buttons, social media icons, and rich text to create a dynamic and interactive footer that engages users and provides essential information.