The Image with text section in Maison combines one visual image with a flexible content area in a side-by-side layout.
It is useful for:
- Brand storytelling
- About-us content
- Designer introductions
- Product or collection highlights
- Store or showroom information
- Editorial content
- Campaign messaging
Maison supports a maximum of:
- 1 Image block
- 1 Content container block
The Image and Content container can be reordered to place the image on either side of the content.
Section overview
The default structure is:
Image with text
├── Image
└── Content container
├── Heading
├── Rich text
└── Button
The Content container can contain standard Maison content blocks such as:
- App
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
- Email signup
- Social media
The section also includes controls for:
- Transparent header
- Section width
- Section divider
- Color override
- Layout
- Spacing
- Size
STEPS:
1. Add the Image with text section
To add the section:
- Open the Maison theme editor.
- Open the template where you want to display the content.
- Click Add section.
- Select Image with text.
- Configure the Image block.
- Configure the Content container block.
- Adjust the section Layout and spacing.
- Click Save.
Maison allows only one Image block and one Content container block in each Image with text section.
2. Understand the Image and Content container structure
The section is built from two main blocks:
Image
Content container
The Image block displays the main visual.
The Content container holds the supporting text and other content.
For example:
Image with text
├── Image
└── Content container
├── Subheading
├── Heading
├── Rich text
└── Button
This keeps the image and content independent, so you can control their width, spacing, and order separately.
3. Choose whether the Image appears on the left or right
On desktop, the section uses a horizontal Layout by default.
The order of the Image and Content container blocks determines which side they appear on.
Image on the left
Use:
Image
Content container
Result:
Desktop:
┌────────────────────┬────────────────────┐
│ Image │ Content │
└────────────────────┴────────────────────┘
Image on the right
Use:
Content container
Image
Result:
Desktop:
┌────────────────────┬────────────────────┐
│ Content │ Image │
└────────────────────┴────────────────────┘
You can change this simply by reordering the blocks in the Theme Editor.
4. Understand the mobile layout
The default Maison Layout changes from a row on desktop to a column on mobile.
The mobile order follows the block order.
For example:
Image
Content container
becomes:
Mobile:
┌────────────────────┐
│ Image │
├────────────────────┤
│ Content │
└────────────────────┘
While:
Content container
Image
becomes:
Mobile:
┌────────────────────┐
│ Content │
├────────────────────┤
│ Image │
└────────────────────┘
You can further customize the mobile Layout in the section settings.
5. Add the main Image
Open the Image block and select the main image.
The Image block includes:
- Image
- Image on mobile
- Aspect ratio
- Accessibility
- Image fit
- Link
- Open in new tab
- Corner radius
- Overlay opacity
- Overlay color
- Spacing
- Size
The default Aspect ratio is:
4:3
6. Choose the Image Aspect ratio
Available Aspect ratio options are:
- Auto
- 1:1
- 2:3
- 4:3
- 3:4
- 3:2
- 5:4
- 16:9
Use Auto when you want the Image block to follow the source image ratio.
Use a fixed ratio when you want a more consistent editorial layout.
For example:
| Use case | Suggested ratio |
|---|---|
| General editorial image | 4:3 |
| Portrait photography | 3:4 or 2:3 |
| Square product/lifestyle image | 1:1 |
| Wide landscape image | 16:9 or 3:2 |
7. Choose Cover or Contain
Use Image fit to control how the image fills its area.
Available options:
- Cover
- Contain
Cover
The image fills the available area.
Cropping can occur if the source image ratio does not match the selected Aspect ratio or Size.
Contain
The full image remains visible.
Empty space can appear around the image when the ratios differ.
The default is:
Cover
8. Add an Image on mobile
Each Image block includes Image on mobile.
Use this when the desktop image does not crop well on smaller screens.
For example:
Desktop:
Wide interior photograph
Mobile:
Portrait crop focused on the furniture
If Image on mobile is empty, Maison uses the main Image on mobile as well.
9. Add Accessibility text (Alt text)
Use Accessibility to describe the meaningful content of the image for screen readers.
For example:
Maison workshop with handcrafted furniture
or:
The Paris flagship interior
Keep the description concise and relevant.
10. Make the Image clickable
The Image block includes a Link setting.
You can link the image to:
- A Product
- A Collection
- A Page
- Another storefront destination
- An external URL
You can also enable:
Open in new tab
When a Link is added, the complete Image block becomes clickable.
11. Add Corner radius
Use Corner radius to round the Image corners.
Available range:
0–100px
Default:
0px
12. Add an Image Overlay
The Image block includes:
- Overlay opacity
- Overlay color
Overlay opacity supports:
0–100%
For example:
Overlay opacity: 20%
Overlay color: Black
Because Image with text normally places content in the separate Content container, an Image overlay is usually optional.
13. Configure the Image Size
The Image block includes a Size setting.
Use this together with the Content container Size to define how much of the horizontal layout each block occupies.
For example:
Image width: 60%
Content container width: 40%
or:
Image width: 52%
Content container width: 48%
On mobile, a common setup is:
Image width: 100%
Content container width: 100%
A balanced starting point is:
Image: 50–60%
Content container: 40–50%
14. Configure the Content container
The Content container is the main text and content area.
The default preset includes:
Content container
├── Heading
├── Rich text
└── Button
You can also add:
- App
- Subheading
- Icon
- Description
- Text
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
- Email signup
- Social media
The Content container includes its own:
- Background media
- Color override
- Layout
- Spacing
- Size
15. Add a Subheading, Heading, text, and Button
A common Content container setup is:
Subheading:
Our story
Heading:
Crafting Furniture That Looks Stylish & Feels Comfortable
Rich text:
We believe that great design is not only what meets the eye but, just as importantly, how it is created — and how it makes us feel.
Button:
Read About Us
You can add, remove, or reorder the blocks depending on the content you want to display.
16. Configure the Content container Layout
Use Layout to control how content inside the Content container is arranged.
You can adjust:
- Flex direction
- Horizontal alignment
- Vertical alignment
- Row gap
- Column gap
- Desktop behavior
- Mobile behavior
The default Content container Layout is vertical.
For example:
Subheading
↓
Heading
↓
Rich text
↓
Button
The preset uses approximately:
Row gap: 24px
Column gap: 24px
17. Configure Content container Spacing
Use the Content container's Spacing settings to add internal breathing room around the content area.
Spacing can be configured separately for desktop and mobile.
For example:
Desktop:
60px top
60px bottom
80px left
60px right
Mobile:
0px
Use these values only as a starting point and adjust them to match the surrounding page layout.
18. Configure Content container Size
The Content container has its own Size setting.
Use it together with Image Size to define the desktop proportions.
For example:
Content container width: 40%
Image width: 60%
or:
Content container width: 48%
Image width: 52%
For mobile, a common setup is:
Content container width: 100%
Image width: 100%
19. Add Background media to the Content container
The Content container can optionally use Background media.
Available options are:
- None
- Image
- Video
Background image
When Image is selected, you can configure:
- Image
- Accessibility
- Image fit
Background video
When Video is selected, you can choose the Video source:
- Uploaded
- URL
Additional video settings include:
- Video
- External video URL
- Video cover image
- Accessibility
- Video fit
The Content container background video automatically uses Maison's background-media behavior:
- Autoplay
- Muted
- Loop
- No standard controls
- No play button
20. Configure Content container Color override
Enable Color override inside the Content container when the content area should use its own visual treatment.
Available controls include:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
- Overlay color
- Overlay opacity
This is especially useful when the Content container uses a background Image or Video and needs additional contrast.
21. Configure the section Layout
The Image with text section has its own Layout setting.
The default desktop Layout is:
Direction: Row
Align items: Center
Justify content: Center
Row gap: 60px
Column gap: 60px
The default mobile Layout is:
Direction: Column
Align items: Start
Justify content: Center
Row gap: 20px
Column gap: 20px
Use Layout to control:
- Whether Image and Content container appear horizontally or vertically
- Their alignment
- The gap between them
- Desktop and mobile behavior
22. Adjust the gap between Image and Content container
The section Layout controls the space between the Image and Content container.
The default gap is approximately:
Desktop: 60px
Mobile: 20px
Reduce the gap for a tighter layout.
Increase it when you want stronger visual separation between the Image and content.
23. Configure Section width
Available Section width options are:
- Narrow
- Page
- Fluid
- Full
Default:
Page
Use:
- Narrow for compact content
- Page for the standard Maison content width
- Fluid for a wider responsive layout
- Full for the maximum available width
24. Configure the section Size
The section includes a Size setting.
Default:
Width: 100%
Height: Auto
For most Image with text layouts, leaving Height on Auto allows the content and image to determine the required height naturally.
25. Configure section Color override
The section itself includes Color override.
When enabled, you can configure:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
These settings apply to the overall section.
The Content container can still use its own Color override when you need a different treatment inside the content area.
26. Add a Section divider
Enable Section divider to visually separate the Image with text section from surrounding content.
The setting is disabled by default.
27. Configure section Spacing
The section includes Spacing controls.
Use them to add space around the complete Image with text section.
This is separate from:
- Image Spacing
- Content container Spacing
- Section Layout gap
Use section Spacing for the distance between Image with text and surrounding sections.
28. Configure Transparent header
The Image with text section supports Transparent header.
This setting only applies when Image with text is the first section on the page.
When enabled, additional settings become available:
- Transparent header color
- Solid header on mobile
29. Configure Transparent header color
Enable Transparent header color when you want Maison to apply its transparent-header color treatment over the first Image with text section.
Use this only when the content behind the Header provides enough contrast.
30. Use a Solid header on mobile
Enable Solid header on mobile when you want:
- Transparent Header behavior on desktop
- A normal solid Header on smaller screens
When enabled, the Header does not overlay the section on mobile.
How Image with text works
Image with text
│
├── One Image block
│ ├── Main Image
│ ├── Optional Image on mobile
│ ├── Aspect ratio / Image fit
│ ├── Optional Link
│ ├── Overlay
│ └── Size / Spacing
│
└── One Content container
├── Optional Background media
├── Content blocks
├── Color override
├── Layout
└── Size / Spacing
Section Layout
│
├── Desktop → Row by default
└── Mobile → Column by default
Recommended setup
For a balanced Maison-style Image with text section:
- Use one strong Image and one focused Content container.
- Use approximately 50/50, 60/40, or 52/48 desktop proportions.
- Set both blocks to 100% width on mobile.
- Use a dedicated Image on mobile when the desktop crop does not work well.
- Use the block order that matches the desired desktop and mobile storytelling flow.
- Keep the Content container focused on one message and one primary CTA.
- Use Page width for most editorial layouts.
- Add meaningful Accessibility text.
- Test Image cropping, text width, block order, and spacing on both desktop and mobile.
Notes and limitations
Please note the following behavior:
- Each Image with text section supports a maximum of 1 Image block.
- Each section supports a maximum of 1 Content container block.
- Image and Content container order can be changed in the Theme Editor.
- The default desktop Layout is horizontal.
- The default mobile Layout is vertical.
- Mobile block order follows the configured block order.
- The Image block supports a separate Image on mobile.
- Image Aspect ratio supports Auto, 1:1, 2:3, 4:3, 3:4, 3:2, 5:4, and 16:9.
- Image fit supports Cover and Contain.
- The complete Image can be linked.
- The Content container can use Image or Video as Background media.
- Content container background videos autoplay, loop, and remain muted.
- Section, Image, and Content container each have their own Size and Spacing controls.
- The section supports Color override and the Content container can independently override its own colors.
- Transparent header behavior only applies when Image with text is the first section on the page.
- The section cannot be added to Header or custom Overlay groups.
Troubleshooting
If Image with text does not display correctly, check the following:
- Make sure both the Image and Content container blocks are present.
- Maison supports only one Image and one Content container per section.
- If the Image appears on the wrong side, reorder the Image and Content container blocks.
- If the mobile content appears in the wrong order, remember that mobile follows the block order.
- If desktop proportions look wrong, check the Image and Content container Size settings.
- For a standard mobile layout, set both blocks to 100% width.
- If the Image crops poorly, change Aspect ratio, Image fit, or add a separate Image on mobile.
- If the Image link does not work, check the Image block's Link setting.
- If rounded corners are unexpected, check Corner radius.
- If the Image appears tinted, check Overlay opacity and Overlay color.
- If content spacing looks too large or too small, check Content container Spacing and the section Layout gap.
- If Content container colors are unexpected, check both section Color override and Content container Color override.
- If a Content container background Video does not appear, check Background media, Video source, Video or External video URL, and Video fit.
- If the transparent Header does not work, make sure Transparent header is enabled and Image with text is the first section.
- Test the section on desktop and mobile after changing block order, Size, Layout, or images.
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 Banner Section in Maison
How to Set Up the Multicolumn Section in Maison