Multicolumn

What is the Multicolumn section?

The "Multicolumn" section provides a structured, grid-like display, ideal for featuring multiple products, categories, or content blocks in a clean and organized manner. This layout allows for several columns, each with its own image, text, and button.

Main Settings

Heading

• Heading: Set the title for the multicolumn section, such as "Trends from Wonder."

Enable Swipe on Mobile

• Enable swipe on mobile: Enable this setting to allow users to swipe through the columns on mobile devices.

Make Section Full Width

• Make section full width: Enable this setting to make the multicolumn section span the entire width of the container.

Image Ratio

• Image ratio: Select the ratio for images within the columns (options: Adapt to image, Portrait, Square).

Column Alignment

• Column alignment: Choose the alignment for the columns (options: Left, Center).

Heading Scale

• Heading scale large screen: Adjust the size of the heading for large screens.
• Heading scale mobile: Adjust the size of the heading for mobile screens.

Colors

• Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the background color.

Section Spacing

• Distance from the top: Adjust the spacing from the top of the section.
• Distance from the bottom: Adjust the spacing from the bottom of the section.

‍

Customize multicolumn block

• Heading: Create a heading for each column to give it a clear identity or to introduce the content.
• Text: Input text that complements the image and provides context, such as details on a product, collection, or story.
• Button: Add a button with customizable text, linking to a relevant page or product to encourage customer interaction.‍
• Image Selection: For both the large screen and mobile versions, choose images that represent the column's content. You have the freedom to explore your image library or free images for the perfect visual.‍
• Disable on Mobile: You can choose to disable the text or button on mobile devices to streamline the user experience on smaller screens.‍
• Link: Insert a link for your button, which can open in the same window or a new one, directing users exactly where you want them to go.‍
• Enable Swipe on Mobile: Allow users to swipe through columns on mobile devices for a fluid navigation experience.

Mobile view example