The Multicolumn section in Maison lets you organize related content into multiple columns.
It is useful for:
- Product features
- Services or benefits
- Materials and craftsmanship
- Store services
- Brand values
- Step-by-step content
- Image and text highlights
- Icon-based information
The section is built around one Column list, which can contain up to 12 Column blocks.
Section overview
The default structure is:
Multicolumn
├── Heading
└── Column list
├── Column
│ ├── Image
│ ├── Title
│ └── Text
├── Column
│ ├── Image
│ ├── Title
│ └── Text
└── ...
The Multicolumn section supports one Column list.
The Column list supports up to:
12 Columns
Each Column can contain flexible Maison content blocks, including:
- Subheading
- Title
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
- Image overlay
STEPS:
1. Add the Multicolumn section
To add the section:
- Open the Maison theme editor.
- Open the template where you want to display the content.
- Click Add section.
- Select Multicolumn.
- Configure the section heading or supporting content if needed.
- Open the Column list.
- Add or edit the Column blocks.
- Configure the Grid or Carousel layout.
- Click Save.
The default preset creates four Columns containing:
Image
Title
Text
2. Understand the Multicolumn structure
Maison separates the section into three levels:
Multicolumn
└── Column list
└── Column
Multicolumn
Controls the overall section, including:
- Section content above the columns
- Color override
- Section width
- Section divider
- Layout
- Spacing
Column list
Controls the presentation of all Columns, including:
- Grid or Carousel
- Number of columns
- Column dividers
- Card spacing
- Mobile columns
- Mobile carousel
Column
Contains the actual content shown in each individual column.
This structure lets you style the overall section separately from the individual Column content.
3. Add content above the Column list
The Multicolumn section can contain standard Maison content above or around the Column list.
Supported section-level blocks include:
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
For example:
Subheading:
In every showroom
Heading:
What to expect
Column list:
Space planning
Material library
Design consultation
Delivery & assembly
This structure is used on the Maison Store locations template.
4. Configure the Column list
The Column list controls how the Columns are displayed.
Available settings include:
| Setting | Description |
|---|---|
| Show column dividers | Adds a divider between Columns. |
| Layout type | Displays Columns as Grid or Carousel. |
| Columns | Controls the number of visible desktop columns. |
| Custom spacing | Enables custom gaps between Columns. |
| Horizontal spacing | Controls horizontal spacing between Columns. |
| Vertical spacing | Controls vertical spacing between rows. |
| Mobile columns | Controls whether mobile displays 1 or 2 columns. |
| Carousel on mobile | Enables horizontal swipe behavior on mobile. |
| Spacing | Controls spacing around the Column list. |
5. Choose Grid or Carousel
The Column list provides two Layout type options:
- Grid
- Carousel
Grid
Use Grid when you want the Columns to display in regular rows.
For example:
Column 1 | Column 2 | Column 3 | Column 4
Column 5 | Column 6 | Column 7 | Column 8
Carousel
Use Carousel when you want customers to browse Columns horizontally.
For example:
[ Column 1 ] [ Column 2 ] [ Column 3 ] [ Column 4 ] →
When Carousel is selected and there are more Column blocks than the visible Columns value:
- Maison makes the list horizontally scrollable.
- A small portion of the next Column can remain visible.
- Navigation arrows appear below the list on desktop.
6. Configure desktop Columns
Use Columns to control how many Columns are displayed across the section on larger screens.
Available range:
1–5 columns
Default:
4 columns
For example:
| Columns | Suggested use |
|---|---|
| 1 | Large editorial content |
| 2 | Spacious feature cards |
| 3 | Balanced feature layout |
| 4 | Maison default / feature grid |
| 5 | Compact information layout |
The Maison Product and Store locations examples commonly use:
4 columns
7. Configure Mobile columns
Use Mobile columns to control the number of Columns visible on smaller screens.
Available values:
1
2
Default:
1
For compact content such as icons and short descriptions, 2 mobile columns can work well.
For larger images or longer descriptions, 1 mobile column usually provides better readability.
8. Enable Carousel on mobile
The Column list includes Carousel on mobile.
Default:
Enabled
When enabled:
- Columns flow horizontally on mobile.
- Customers can swipe left and right.
- Maison slightly exposes the next Column when more than one Column exists.
When disabled:
- Columns display as a normal mobile grid.
- The layout follows the selected Mobile columns value.
For example, the Maison Store locations services section uses:
Mobile columns: 2
Carousel on mobile: Disabled
This creates a standard 2-column mobile grid.
9. Show column dividers
Enable Show column dividers to place a vertical divider between neighboring Columns.
The divider appears between Columns rather than around the entire Column.
This is useful for:
- Service lists
- Specifications
- Feature comparisons
- Text-focused columns
The setting is disabled by default.
10. Customize spacing between Columns
Enable Custom spacing when you want to override the default spacing between Columns.
Available ranges:
Horizontal spacing: 0–100px
Vertical spacing: 0–100px
Default custom values:
Horizontal spacing: 48px
Vertical spacing: 48px
Use:
- Horizontal spacing for the gap between Columns in the same row.
- Vertical spacing for the gap between rows.
For example, the Maison Store locations services section uses approximately:
Horizontal spacing: 24px
Vertical spacing: 40px
11. Add a Column
To add a Column:
- Open the Column list.
- Click Add block.
- Select Column.
- Add the content blocks you want inside the Column.
- Configure the Column Layout and Spacing.
- Repeat for the remaining Columns.
Maison supports up to:
12 Column blocks
The default Column contains:
Image
Title
Text
You can remove, reorder, or replace these blocks.
12. Configure the Column Layout
Each Column includes its own Layout setting.
The default Column Layout is:
Direction: Column
Align items: Start
Justify content: Start
Row gap: 20px
Column gap: 20px
Use the Column Layout to control:
- Content direction
- Alignment
- Spacing between blocks
- Desktop and mobile arrangement
For example, an icon-based service Column can use centered content:
Icon
↓
Title
↓
Text
with:
Align items: Center
Text alignment: Center
A product craftsmanship Column can use left-aligned content:
Image
↓
Title
↓
Divider
↓
Text
13. Configure Column Spacing
Each Column has its own Spacing setting.
Use this to add padding around the content of an individual Column.
For example, the Maison Store locations service Columns add approximately:
16px left
16px right
This keeps the icon and text away from the Column edges.
Column Spacing is separate from the Column list's Horizontal and Vertical spacing.
14. Add an Image to a Column
You can add Maison's standard Image block inside a Column.
This is useful for feature or editorial layouts.
For example:
Column
├── Image
├── Title
├── Divider
└── Text
The Maison Product templates use this structure to explain product qualities such as:
Comfort, Refined
Balanced Proportions
Texture & Material
Crafted to Endure
Those demo Images use a:
1:1
Aspect ratio.
15. Add an Icon to a Column
Use an Icon block when you want a lighter, information-focused Multicolumn section.
For example:
Column
├── Icon
├── Title
└── Text
The Maison Store locations template uses this layout for:
- Space planning
- Material library
- Design consultation
- Delivery & assembly
The demo uses custom icon sizing of approximately:
30px
and center-aligns the Column content.
16. Add Title and text content
Each Column can contain content such as:
- Subheading
- Title
- Description
- Rich text
- Text
Use Title for the main label of the Column.
For example:
Title:
Material library
Text:
Every fabric, leather, wood and stone we use, in hand, to take home.
You can configure the individual Title or Text block's typography, alignment, spacing, and other supported Maison settings.
17. Add Buttons and links
A Column can contain:
- Button
- Button group
Use these when each Column should lead to a different destination.
For example:
Column 1 → Shop sofas
Column 2 → Shop chairs
Column 3 → Shop lighting
Configure the Link inside each Button.
This is useful for category navigation or feature cards with individual CTAs.
18. Add Video to a Column
A Column can also contain a standard Maison Video block.
Use Video when the content benefits from:
- Product demonstrations
- Craftsmanship clips
- Brand storytelling
- Short feature explanations
Video behavior and playback options are controlled by the Video block itself.
19. Use the Image overlay block
In addition to a regular Image block, Multicolumn provides an Image overlay block.
The Image overlay supports:
- Image
- Image on mobile
- Aspect ratio
- Accessibility
- Image fit
- Link
- Open in new tab
- Corner radius
- Overlay opacity
- Overlay color
- Spacing
- Size
It can also contain one Content container.
Structure:
Column
└── Image overlay
└── Content container
├── Title
├── Rich text
├── Text
└── Spacer
Use Image overlay when you want text to sit over an image rather than below it.
20. Configure the Image overlay Content container
The Content container inside Image overlay is positioned over the image.
It can contain:
- Title
- Rich text
- Text
- Spacer
The Content container also supports:
- Link
- Open in new tab
- Accessibility
- Color override
- Layout
- Spacing
The default Content container is centered and uses approximately:
10px top/bottom
20px left/right
spacing.
If a Link is added to the Content container, the Content container itself becomes clickable.
21. Make the Image overlay clickable
The Image overlay itself includes a Link setting.
When a Link is added, the Image becomes clickable.
You can also enable:
Open in new tab
The Content container inside the Image overlay can have its own separate Link as well.
22. Configure Image overlay Aspect ratio and Image fit
Available Aspect ratio options include:
- Auto
- 1:1
- 2:3
- 4:3
- 3:4
- 3:2
- 5:4
- 16:9
Default:
4:3
Available Image fit options are:
- Cover
- Contain
Use Cover for most card-style Image overlays.
Use Contain when the entire image must remain visible.
23. Configure Image overlay Corner radius and Overlay
The Image overlay includes:
-
Corner radius:
0–100px -
Overlay opacity:
0–100% - Overlay color
Use Corner radius to create softer card edges.
Use Overlay when text inside the Content container needs more contrast against the image.
For example:
Overlay opacity: 25%
Overlay color: Black
24. Configure section Color override
The Multicolumn section includes Color override.
When enabled, you can configure:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
These colors apply to the overall Multicolumn section.
Individual supported blocks can still have their own styling where available.
25. Configure Section width
Available Section width options are:
- Narrow
- Page
- Fluid
- Full
Default:
Page
The Maison Product and Store locations Multicolumn examples use:
Page
Use Page for most feature grids.
Use Fluid or Full when you need more horizontal room for many Columns.
26. Configure the section Layout
The Multicolumn section itself includes a Layout setting.
Default:
Direction: Column
Align items: Start
Justify content: Start
Row gap: 20px
Column gap: 20px
This Layout controls the relationship between section-level content, such as the Heading, and the Column list.
It does not replace the individual Column Layout settings.
27. Add a Section divider
Enable Section divider when you want to visually separate Multicolumn from the surrounding sections.
The Maison Store locations services section enables the Section divider.
The default Multicolumn preset keeps it disabled.
28. Configure section Spacing
The Multicolumn section includes Spacing controls.
Default spacing is approximately:
Desktop:
60px top
60px bottom
Mobile:
40px top
40px bottom
Maison Product templates commonly use approximately:
Desktop:
80px top
80px bottom
Mobile:
40px top
60px bottom
The Store locations services example uses approximately:
Desktop:
96px top
96px bottom
Mobile:
56px top
56px bottom
Use section Spacing to match the visual rhythm of the surrounding page.
Maison demo examples
Maison uses Multicolumn in different ways across its templates.
Example 1: Product features
The Product templates use four image-based Columns.
Structure:
Multicolumn
└── Column list
├── Column
│ ├── Image
│ ├── Title
│ ├── Divider
│ └── Text
├── Column
├── Column
└── Column
Main behavior:
Section width: Page
Columns: 4
Image Aspect ratio: 1:1
Column content: Left aligned
This layout is used to highlight product qualities and craftsmanship.
Example 2: Store services
The Store locations template uses icon-based Columns.
Structure:
Multicolumn
├── Subheading: In every showroom
├── Heading: What to expect
└── Column list
├── Space planning
├── Material library
├── Design consultation
└── Delivery & assembly
Main settings:
Layout type: Grid
Desktop columns: 4
Mobile columns: 2
Carousel on mobile: Disabled
Custom spacing: Enabled
Horizontal spacing: 24px
Vertical spacing: 40px
Section width: Page
Section divider: Enabled
Each Column uses:
Icon
Title
Text
with centered content.
How Multicolumn works
Multicolumn
│
├── Optional section content
│ ├── Subheading
│ ├── Heading
│ └── Other supported blocks
│
└── One Column list
│
├── Grid or Carousel
├── Desktop Columns: 1–5
├── Mobile Columns: 1–2
├── Optional mobile Carousel
├── Optional Column dividers
│
└── Up to 12 Columns
└── Flexible content blocks
Recommended setup
For a clean Maison-style Multicolumn section:
- Use 3–4 Columns for most desktop feature layouts.
- Use consistent content structure across Columns.
- Use images with the same Aspect ratio when image-based Columns should align evenly.
- Use Icons for short service or benefit content.
- Keep Title lengths similar where possible.
- Use Custom spacing when the default gaps are too large or too small.
- Use Carousel for browseable content and Grid when customers should see all Columns together.
- Use 1 mobile column for image-heavy or text-heavy content.
- Use 2 mobile columns for short icon-based content.
- Disable Carousel on mobile when you want a fixed mobile grid.
- Test Column height, spacing, and text length on both desktop and mobile.
Notes and limitations
Please note the following behavior:
- Each Multicolumn section supports only 1 Column list.
- A Column list supports up to 12 Columns.
- Desktop Columns can be set from 1 to 5.
- Mobile columns can be set to 1 or 2.
- Layout type supports Grid and Carousel.
- Carousel on mobile is enabled by default.
- Desktop Carousel arrows appear only when there are more Columns than the selected desktop Columns value.
- Show column dividers adds dividers between neighboring Columns.
- Each Column has its own Layout and Spacing settings.
- Columns can contain Image, Icon, Video, text, buttons, Divider, Spacer, and other supported content.
- Multicolumn also provides a special Image overlay block.
- Image overlay supports one Content container.
- The section supports Narrow, Page, Fluid, and Full widths.
- Multicolumn cannot be added to Header or custom Overlay groups.
Troubleshooting
If the Multicolumn section does not display correctly:
- Make sure the Column list is present.
- Make sure at least one Column has been added.
- Maison supports a maximum of 12 Columns.
- If too many or too few Columns appear per row, check Columns.
- If the mobile layout is incorrect, check Mobile columns.
- If mobile swipes horizontally when you do not want it to, disable Carousel on mobile.
- If the desktop carousel does not scroll, make sure Layout type is Carousel and there are more Columns than the selected Columns value.
- If carousel arrows do not appear, confirm that the number of Columns exceeds the visible desktop Columns.
- If spacing looks incorrect, check both Custom spacing in Column list and Spacing inside each Column.
- If dividers are missing, enable Show column dividers.
- If image-based Columns have uneven heights, use matching image Aspect ratios and similar text lengths.
- If an Image overlay text is difficult to read, adjust its Overlay opacity or Content container colors.
- If an Image overlay link does not work, check the Link setting and Open in new tab option.
- If section colors are unexpected, check Color override.
- Save your changes and test Grid, Carousel, desktop, and mobile behavior.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Image with Text Section in Maison
How to Set Up the Rich Text Section in Maison