Multi-column
Last updated
Last updated
The Multi-column section allows you to pair images, text, and buttons in a flexible layout. You can display multiple columns in a grid or a single-row slider.
Add multiple columns with images, autoplay videos, text, and/or buttons.
Customize the shape, size, and position of images and videos
Change the alignment of text and buttons
Make the most of this section by using different combinations of content for the columns. For example, you can add columns of only images (without text) or only text (without images).
In the editor side panel, click (+) Add section and select Multi-column. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the general section styles for colors and spacing, available in all sections:
The Section header appears above the section. Add a Heading, Text, and optional Link.
Click Multi-column section to find settings
| Setting | Description |
|---|---|
Heading | Change or remove the title of the section. |
Heading tag | Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance. |
Text | Add multiple lines of rich text below the heading. |
Link URL | Select a page or URL for the link. |
Link label | Add text to display the link. |
In the section settings, you can adjust the overall layout of the column blocks.
Choose the Number of columns to display per row
Change the amount of Spacing between columns
Display columns in a Grid (multiple rows) or Slider (single row).
Click Multi-column section to find settings
| Setting | Description | Options |
|---|---|---|
Column spacing | Choose the amount of spacing between column blocks. | Small Medium Default Large |
Number of columns on desktop | Select the number of columns to display on desktop screens. | 2 3 Default 4 |
Number of columns on mobile | Select the number of columns per row on mobile screens. | 1 Default 2 |
Enable slider on desktop | When enabled, columns appear in a single row with scroll buttons. | |
Enable slider on mobile | When enabled, columns appear in a single row with scroll buttons. Visitors can also swipe to scroll through. | |
Show slider indicator | When enabled, a bar below the columns shows how far visitors have scrolled. |
Add column blocks with images, videos, text, and/or buttons.
In the Multi-column section, click (+) Add Column.
Click and hold the drag handles ⋮⋮ to rearrange the blocks.
Click the Column block to add content.
You can show columns with only images or videos by deleting the columns text and heading fields. You can show columns with only text by deselecting the Display media option.
Add an image or autoplay video (without sound) as the column background.
For autoplay videos, make sure your video files meet the following requirements:
Video file type |
|
Video length | > 30 seconds (Recommended) |
Video size | > 10MB (Recommended) |
Click Column block to find settings
| Setting | Description |
|---|---|
Display media | Uncheck this option for columns blocks without an image or video. |
Make media full height | If the column block only has an image or video without any text or button, checking this option will make the image or video span the full height of the row. |
Image | Select or upload an image. |
Video | Add a short autoplay video (without sound) to replace the image. |
Mobile image | Select or upload an alternate image to display on mobile devices. |
Change the Heading and Text in the column block, or delete the text in these fields to remove them.
Click Column block to find settings
| Setting | Description |
|---|---|
Heading | The title of the column. |
Text | Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link. |
Add a link and label for the column button. To remove the button, delete the text in the Button label field.
Click Column block to find settings
| Setting | Description | Options |
|---|---|---|
Button link | The URL that you want the button to link to. | |
Button label | The text that displays on the button. | Default: "Button" |
Change the overall style of text, buttons, and media of all column blocks.
Change the alignment and size of column text and headings
Click Multi-column section to find settings
| Setting | Description | Options |
|---|---|---|
Text alignment | Set the position of the text content for desktop screens. | Left Default Center Right |
Heading size | Change the size of the heading text from small to large. | 1-8 Default: 2 |
Heading tag | Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance. | H2 - H6 |
Text size | Adjust the size of the section text from small to large. | 1-8 Default: 3 |
Change the visual style of column buttons. The button colors use the selected color scheme in the section settings.
Click Multi-column section to find settings
| Setting | Description | Options |
|---|---|---|
Button style | Change the style of the button. | Solid Default Outline Text |
Change the aspect ratio (shape) and position of all column images and videos.
Click Multi-column section to find settings
| Setting | Description | Options |
|---|---|---|
Media aspect ratio | Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape. | Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Landscape wide (16:9) Landscape ultrawide (21:9) |
Media position | Show the image or video above or below the column content. | Above content Default Below content |
