The Image banner section in Maison lets you create a large visual banner using one or two images with text and call-to-action content placed over each image.
It is useful for:
- Homepage hero-style banners
- Campaign promotions
- Collection or product promotions
- Brand storytelling
- Store or showroom information
- Social media promotions
- Split promotional banners
Maison supports a maximum of 2 Image blocks in one Image banner section.
Section overview
The Image banner section contains:
Image banner
├── Image
│ └── Group
└── Image (optional)
└── Group
Each Image block can contain one Group block for overlay content.
A Group can contain standard Maison content such as:
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
- Email signup
- Social media
STEPS:
1. Add the Image banner section
To add an Image banner:
- Open the Maison theme editor.
- Open the template where you want to display the banner.
- Click Add section.
- Select Image banner.
- Open the default Image block.
- Select your banner image.
- Add or edit the Group content.
- Configure the section Size and layout settings.
- Click Save.
The section supports up to:
2 Image blocks
2. Choose between one or two images
Maison supports two common Image banner layouts.
One Image block
With one Image block, the image fills the available Image banner area.
This is useful for:
- Hero banners
- Large campaign images
- Brand storytelling
- Full-width promotional content
Two Image blocks
When two Image blocks are added:
- On larger screens, the two images are displayed side by side.
- On mobile, the images are displayed one above the other.
Example:
Desktop:
┌──────────────────┬──────────────────┐
│ Image 1 │ Image 2 │
└──────────────────┴──────────────────┘
Mobile:
┌──────────────────┐
│ Image 1 │
├──────────────────┤
│ Image 2 │
└──────────────────┘
This layout is useful when promoting two destinations, such as:
Follow us | Visit us
or:
Women | Men
3. Add the main Image
Open an Image block and use Image to select the desktop banner image.
Maison displays the image as background media inside that Image block.
By default, the image uses a cover-style presentation. This means the image fills the complete banner area, but cropping can occur when the source image ratio does not match the configured banner Size.
For the best result:
- Use a high-resolution image.
- Keep important subjects away from the extreme edges.
- Consider the configured desktop banner height when choosing the source image.
Recommended starting points:
| Banner type | Suggested image size |
|---|---|
| Single wide banner | Around 2400 × 1100 px |
| Two-image banner | Around 1600 × 1000 px per image |
These are practical recommendations rather than fixed theme requirements.
4. Add an Image on mobile
Each Image block includes a separate Image on mobile setting.
Use this when the desktop image does not crop well on smaller screens.
For example:
Desktop:
Wide lifestyle image
Mobile:
Portrait crop focused on the main subject
If Image on mobile is left empty, Maison uses the main Image on both desktop and mobile.
5. Add Alt text
Each Image block includes Alt text.
Use this field to describe the image for screen readers when the image itself does not already contain alt text.
For example:
Modern living room featuring Maison furniture
Keep Alt text concise and describe the meaningful visual content.
Avoid repeating nearby Heading text unless that information is genuinely part of the image.
6. Configure the banner Size
The Image banner section includes a Size setting.
The default size is:
| Device | Width | Height |
|---|---|---|
| Desktop | 100% | 600px |
| Mobile | 100% | 400px |
You can adjust desktop and mobile dimensions independently.
For example, the Maison homepage uses a large single Image banner with approximately:
Desktop height: 750px
Mobile height: 500px
Another Maison two-image banner uses approximately:
Desktop height: 550px
Mobile height: 300px
7. Add overlay content with a Group
Each Image block supports one Group block.
Use the Group to place content over the banner image.
The default Image banner preset includes:
Group
├── Heading
├── Description
└── Button
For example:
Heading:
Feel at Home with Maison
Description:
Curated furniture and timeless accessories designed to bring comfort and character into everyday living.
Button:
Shop all
You can add, remove, or reorder supported content inside the Group.
8. Position the overlay content
Use the Image block's Arrangement setting to position its Group content within the banner.
You can control settings such as:
- Horizontal alignment
- Vertical alignment
- Content direction
For example, Maison uses different arrangements across its demo:
Centered content
Horizontal: Center
Vertical: Start / Center depending on Group spacing
Useful for hero-style promotional banners.
Top-left content
Horizontal: Start
Vertical: Start
Useful for editorial banners or split banners.
The Group also has its own Arrangement, Spacing, and Size settings for more precise positioning.
9. Customize Group spacing
Use the Group's Spacing settings to create space between the banner edges and its content.
For example, Maison's split Image banner uses approximately:
Desktop:
72px top
72px bottom
72px left
72px right
Mobile:
40px top
40px bottom
40px left
40px right
This creates an inset editorial layout instead of placing text directly against the edges.
You can configure different spacing values for desktop and mobile.
10. Use Custom colors for each Image
Each Image block includes Custom colors.
When enabled, you can configure:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button background gradient
- Overlay color
- Overlay opacity
This is configured per Image block.
That means a two-image banner can use different colors on each side.
For example:
Image 1:
White text
Image 2:
Black text
The Maison homepage uses this approach in its two-image promotional banner.
11. Add an image Overlay
When Custom colors is enabled, you can configure:
- Overlay color
- Overlay opacity
Overlay opacity supports:
0–100%
Use an overlay when text does not have enough contrast against the banner image.
For example:
Overlay color: Black
Overlay opacity: 25%
A subtle dark overlay can make white Heading and Description text easier to read without significantly changing the image.
12. Add a Button or link
The Image block itself does not provide a direct banner Link setting.
To create a call to action, add a Button or Button group inside the Group.
For example:
Shop now
Explore collection
Visit us
Then configure the Button link to the required destination.
This approach keeps the image decorative while providing a clear and accessible call to action.
13. Configure Allow transparent header
The Image banner includes Allow transparent header.
This setting applies only when the Image banner is the first section on the page.
When enabled, the Header can overlay the Image banner instead of occupying a separate solid area above it.
This is useful for full-width hero banners.
Additional settings appear when Allow transparent header is enabled:
- Apply transparent text color
- Use solid header on mobile
14. Configure Apply transparent text color
When Apply transparent text color is enabled, Maison applies the transparent-header text treatment.
The theme also uses a white logo when this option is enabled.
Use this when the banner image is dark enough for light Header content.
For example:
Dark hero image
+ white navigation
+ white logo
15. Use a solid Header on mobile
Enable Use solid header on mobile when you want:
- Transparent Header behavior on desktop
- Normal solid Header behavior on smaller screens
When enabled, the Header does not overlay the banner content on mobile.
This is useful when the mobile crop does not provide enough contrast for transparent Header content.
16. Configure Section width
Available Section width options are:
- Narrow
- Page
- Wide
- Full
Default:
Full
The Maison demo commonly uses:
Full
for Image banners.
Use Full for large visual banners.
Use Page or Narrow when you want the banner aligned with the main content width.
17. Add a Section divider
Enable Show section divider when you want a visual divider around the section boundary.
The setting is disabled by default.
A divider can help separate the Image banner from surrounding sections when the images do not naturally create enough contrast.
18. Configure section Spacing
The Image banner includes Spacing settings.
Use these controls to add space around the banner.
For example, one Maison homepage banner uses:
Desktop top spacing: 100px
Mobile top spacing: 40px
while another banner uses no additional section spacing.
Spacing is separate from the Group spacing inside each Image block.
Use:
- Section Spacing for space outside the banner area.
- Group Spacing for positioning content inside the image.
Maison demo examples
Maison uses Image banner in several ways.
Example 1: Single large promotional banner
Structure:
Image banner
└── Image
└── Group
├── Heading
├── Description
└── Button
Approximate settings:
Section width: Full
Desktop height: 750px
Mobile height: 500px
The content is centered and displayed over a single large image.
Example 2: Two-image promotional banner
Structure:
Image banner
├── Image
│ └── Group
│ ├── Heading
│ └── Button
│
└── Image
└── Group
├── Heading
├── Description
└── Button
Approximate settings:
Section width: Full
Desktop height: 550px
Mobile height: 300px
On desktop, the two images appear side by side.
On mobile, they stack vertically.
Each Image uses its own text color and Group content.
How Image banner works
Image banner
│
├── 1 Image block
│ └── Display one full banner image
│
└── 2 Image blocks
├── Desktop → Display side by side
└── Mobile → Stack vertically
Each Image
│
├── Main Image
├── Optional Image on mobile
├── Optional Custom colors / Overlay
└── One Group
└── Heading, Description, Button, etc.
Recommended setup
For a strong Image banner:
- Use one Image for a large hero message.
- Use two Images when promoting two equal destinations.
- Upload a dedicated Image on mobile when the desktop crop does not work well.
- Keep important image subjects away from the edges.
- Use Custom colors separately for each Image when necessary.
- Add an Overlay when text contrast is too low.
- Use a Group to control content positioning and spacing.
- Keep the CTA clear and use a Button rather than relying on the image itself as a link.
- Use Allow transparent header only when the banner is the first section.
- Test both desktop and mobile before publishing.
Notes and limitations
Please note the following behavior:
- One Image banner supports a maximum of 2 Image blocks.
- Each Image block supports a maximum of 1 Group.
- One Image displays across the available banner layout.
- Two Images display side by side on larger screens and stack vertically on mobile.
- Each Image can have its own Image on mobile.
- The main Image uses cover-style rendering and can be cropped.
- Section Size can be configured separately for desktop and mobile.
- With two Image blocks, the configured height applies to each Image.
- Custom colors and Overlay are configured separately for each Image.
- The Image block itself does not include a direct Link setting.
- Use Button or Button group content for calls to action.
- Allow transparent header only applies when the Image banner is the first section.
- The Image banner cannot be added to the Header or custom Overlay groups.
Troubleshooting
If the Image banner does not display correctly, check the following:
- Make sure at least one Image block has been added.
- Maison supports a maximum of two Image blocks.
- If the image is cropped too much, adjust the section Size or use a more suitable source image.
- If the mobile crop looks poor, add a separate Image on mobile.
- If two images appear too tall on mobile, remember that each stacked Image uses the configured mobile height.
- If overlay text is difficult to read, enable Custom colors and configure Overlay color and Overlay opacity.
- If the content is in the wrong position, check the Image and Group Arrangement settings.
- If the content is too close to the edge, adjust Group Spacing.
- If a CTA does not navigate anywhere, check the Button link.
- If you want the entire image itself to be clickable, note that the current Image block does not provide a direct Link setting.
- If the transparent Header does not activate, make sure Allow transparent header is enabled and the Image banner is the first section on the page.
- If Header text is difficult to see, adjust Apply transparent text color or use a solid Header.
- If mobile Header readability is poor, enable Use solid header on mobile.
- Test the section on both desktop and mobile after changing Size, images, or spacing.
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:
Blogs Section vs. Blog Category Template in Maison
How to Set Up the Image with Text Section in Maison