Multirow

The Multirow section is a versatile layout tool used to display multiple rows of content, typically pairing high-quality media with descriptive text and call-to-action buttons. It is ideal for storytelling, highlighting brand values, or showcasing specific product features in a clean, alternating, or uniform sequence.

Each row within the section functions as an individual block, allowing you to manage media and text content independently for every entry while maintaining a cohesive section-wide design.


Section settings

The following settings apply to the entire section and all rows contained within it.

  • Color scheme: Select one of the predefined color schemes to apply to the section background and text.
  • Media aspect ratio: Choose the shape of the media containers. Options include Natural, Portrait 2:3 and 3:4, Landscape 4:3 and 16:9.
  • Media width: Adjust the horizontal space occupied by the media. Choose between Large, Medium, or Small.
  • Text content width: Control the maximum width of the text area. Options include, and Narrow.

Desktop layout

These settings determine how the section appears on larger screens.

  • Display type: Select Grid to show rows in a standard stacked format, or Slideshow to allow users to cycle through rows horizontally.
  • Media position: Set the initial horizontal placement of the media to Media first (left) or Media last (right).
  • Flip media position on even rows: Enable this toggle to automatically alternate the media and text positions for every second row, creating a "zigzag" layout.
  • Full width: When enabled, the section will expand to the full width of the browser window instead of staying within the page container.
  • Margin top and bottom: Adjust the amount of space above and below the section.
  • Full width buttons: Enable this to make all buttons within the section span the full width.
  • Heading size: Set the font size for the headings in all rows.
  • Text size modifier: Adjust the size of the text in all rows.
  • Button size modifier: Adjust the size of the buttons in rows.

Mobile layout

These settings optimize the section for viewing on mobile devices.

  • Display type: Choose between a Grid (vertical stack) or Slideshow for mobile users.
  • Margin top and bottom: Adjust the space above and below the section on mobile devices.
  • Full width buttons: Enable this to make buttons span the full width of the mobile screen container.
  • Heading size: Select the heading font size for mobile.
  • Text size modifier: Adjust the size of the body text for mobile.
  • Button size modifier: Adjust the size of the buttons for mobile.

Slideshow settings

When the display type is set to slideshow, you can:

  • Enable autoplay and set the Autoplay interval.

Row block

Add and customize individual rows within the section. It is recommended to use both media and text for each row to maintain layout balance. If both an image and a video are provided, the video content will be prioritized.

  • Media type: Select whether this row will display an 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

  • Text alignment: Set the horizontal alignment of the text content to left, center, or right.
  • Vertical position: Align the text block to the Top, Middle, or Bottom of the row height.
  • Horizontal position: Align the text block to the Left, Center, or Right within its container.
  • Heading: Enter the title for the row.
  • Body text: Enter the descriptive text for the row using the rich text editor.

First Button and Second Button

  • Button label: The text displayed on the first button. Leave empty to hide the button.
  • Button link: The URL the first button points to.
  • Button style: Select between Primary or Secondary button styling.