Multicolumn

Overview #

The Multicolumn section is designed to provide a flexible column system that can incorporate various blocks. This section allows for a customizable layout, making it ideal for displaying multiple types of content in a structured format.

Key components and functionality #

Content alignment

This setting allows you to align the content within the columns. You can choose from the following options:

• Top
• Center
• Bottom

Column count

The column count can be adjusted for different devices to ensure optimal display:

• Desktop: Set the number of columns between 1 and 8, with a default of 4.
• Tablet: Set the number of columns between 0 and 8, with a default of 0. If set to 0, the desktop setting will be used.
• Mobile: Set the number of columns between 1 and 4, with a default of 1.

Mobile slideshow

Enable this option to display the section as a slideshow on mobile devices.

Stretch content vertically

When enabled, blocks will stretch to match the height of the largest block in the corresponding row.

Slideshow settings

These settings control the behavior and appearance of slideshows within the section:

• Animation style: Choose between 'default' and 'fade'.
• Animation speed: Set the speed of the animation from 0.1 to 5 seconds, with a default of 0.8 seconds.
• Autoplay delay: Set the delay between slides from 0 to 10 seconds, with a default of 4 seconds.
• Autoplay slideshow: Enable or disable autoplay, with the default set to false.
• Controls position: Choose to position controls 'above' or 'below' the content, with a default of 'above'.
• Pagination style: Options include 'dynamic', 'fraction', 'progress bar', and 'scrollbar'.
• Loop slides: Enable or disable looping of slides, with the default set to false.
• Show navigation: Enable to display navigation controls, with the default set to true.
• Show pagination: Enable to display pagination indicators.
• Show preview of next slides: Enable to show a preview of the next slides.

Usage notes #

• Responsive design: Adjust column counts for different devices to ensure content is displayed optimally across all screen sizes.
• Performance: Consider the number of blocks and content within each column to maintain fast loading times.
• Accessibility: Ensure that text and background colors meet accessibility guidelines for readability.

Usage examples #

1. Product showcase: Use the Multicolumn section to display a grid of product images and descriptions. Adjust the column count to fit more products on larger screens while maintaining a single column on mobile for easy scrolling.

2. Feature highlights: Create a visually appealing layout by using different blocks within the columns to highlight various features or services. Use the content alignment and stretch content settings to ensure a cohesive look.

3. Testimonials: Display customer testimonials in a slideshow format on mobile devices to save space and create an engaging user experience.