The Multicolumn section allows you to display multiple blocks of content side-by-side. It is highly versatile and commonly used to showcase features, testimonials, or brand values. Each column can include media (image or video), text, and up to two buttons. On larger screens, columns are arranged in a horizontal row, while on mobile devices, you can choose between a vertical list or a horizontal slideshow layout.
Section settings
The following settings apply to the entire section and all columns contained within it.
- Color scheme: Select one of the predefined color schemes to apply to the section.
- Text alignment: Choose the horizontal alignment for the text within all columns (Left, Center, or Right).
- Media aspect ratio: Select the shape of the media displayed in the columns. Options include Natural, Portrait (2:3), Portrait (3:4), Square (1:1), Landscape (4:3), and Landscape (16:9).
Desktop layout
- Display type: Choose whether the columns are displayed in a static Grid or as a Slideshow.
- Columns per row: Use the slider to set how many columns appear in a single row on desktop screens.
- Margin top and bottom: Adjust the space above and below the section in pixels.
- Full width: Enable this to allow the section to span the full width of the browser window.
- Full width buttons: When enabled, buttons within the columns will stretch to the full width of the column container.
- Heading size: Set the size for the column headings.
- Size modifier: Adjust the overall size of the text content within the column.
- Button size modifier: Adjust the size of the buttons.
Tablet layout
Columns per row: Set the number of columns to display per row on tablet devices.
Mobile layout
- Display type: Choose how columns are presented on mobile. Options include Grid (vertical list), Slideshow, Slideshow (peeking items).
- Heading size: Set the font size for the column headings on mobile.
- Size modifier: Adjust the size of the text content for mobile screens.
- Button size modifier: Adjust the button size for mobile screens.
- Margin top and bottom: Set the top and bottom margins for mobile devices.
- Full width buttons: Enable to make buttons span the full width of the column on mobile.
Slideshow settings
These settings apply only when the Display type for Desktop or Mobile is set to Slideshow.
- Enable autoplay: Enable this to have the slides rotate automatically.
- Autoplay interval: Set the time (in seconds) between slide transitions.
- Sliding behavior: Select how many slides move at once when navigating. One by one moves a single slide, while All visible moves the entire set of visible slides.
Column blocks
Each column is managed as an individual block within the section.
- Media type: Select the type of content to display at the top of the column (Image, Video, External video, or Mixed media).
- Image: Select an image to show when media type is Image or Mixed media.
- Video: Select or upload the video in the editor. Available when the media type is Video or Mixed media.
- Video URL (external only): Enter a YouTube or Vimeo URL.
- External video’s aspect ratio: For External video only. Set the video’s aspect ratio (default 16:9) to ensure it fits the layout correctly.
- Show controls: Available for hosted video, external video, and mixed media. Enable standard play/pause controls. When disabled, the video behaves like a background video (autoplayed and muted).
Text
- Heading: Enter the title for the column.
- Body text: Enter the main description or content for the column using the rich text editor.
First and second button
- Button label: The text displayed on the first button. Leave empty to hide the button.
- Button link: The URL or page the first button points to.
- Button style: Choose between Primary and Secondary button styles.