Blum Image Banner
Theme: Blum · Section type: All-template section
The Image banner section shows one large image with a heading, text, and up to 2 buttons on top. Use it as a hero at the top of a page or to announce a collection, a sale, or a story.
Note: You can add this section to any template, except the header and footer. The section has one Content block for the text and buttons.
What you can do
- Add the section and your image
- Add the heading, text, and buttons
- Add a parallax effect
- Link the whole banner to a page
- See what customers see
- Change the height, overlay, and badge
- Fix common problems
Add the section and your image
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Image banner.
- Under Image, select a Background image. A 2880 x 1200 px .jpg works best.
- Optional: select a Mobile background image (optional). A 750 x 1400 px .jpg works best. If you don't add one, phones show the main image.
- Under Layout, choose the Section height on large screen and Section height on small screen.
- Click Save.
Tip: Keep the subject of your photo away from the side where the text sits, and check the mobile preview. A wide image is cropped a lot on a tall phone screen, which is why a separate mobile image often looks better.
Add the heading, text, and buttons
- Under Image banner, click the Content block.
- Choose a Content position: Center, Left center, or Left bottom.
- Under Text, enter a Subheading, Heading, and Description.
- Under Buttons, enter a Primary button label and Primary button link. Add a secondary button the same way, or clear a label to hide that button.
- Click Save.
Add a parallax effect
- Click the Image banner section.
- Under Image, turn on Enable parallax effect.
- Choose a Parallax direction: Vertical, Horizontal, or Zoom.
- Click Save.
Tip: Parallax looks best with a tall banner (70% or Fill screen height) and an image with space around the subject, because the image moves inside the banner.
Link the whole banner to a page
- Click the Image banner section.
- Under Link, enter a Link.
- Click Save.
The whole banner becomes clickable only when no button has both a label and a link.
What customers see
- Banner: the image fills the section, with the text and buttons on top. A mask overlay darkens the image so the text stays readable.
- Parallax: when parallax is on, the image moves up and down, sideways, or zooms as customers scroll.
- Phones: screens up to 768 px wide show the mobile background image when you add one, and use the small-screen height.
- Banner link: clicking the banner opens the link in a new browser tab.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
Enable large heading | Shows the heading in the larger headline size. Useful when the banner is the first section on the page. |
Enable full-width banner | Stretches the banner to the full screen width. Turn it off to keep it inside the page margins. |
Mask overlay opacity | Sets how dark the mask over the image is, from 0% to 90%. |
Mask overlay | Sets the color of the mask. The color picker sits right below Mask overlay opacity. |
Content overlay | Sets the color of the text on the banner. |
Layout
Setting | What it does |
|---|---|
Section height on large screen | Sets the height on desktop: Adapt to content, 30% screen height, 50% screen height, 70% screen height, Fill screen height, or Adapt to image (the height follows the image ratio). The section grows if the content needs more space. |
Section height on small screen | Sets the height on phones: Adapt to content, 50% screen height, 70% screen height, Fill screen height, or Adapt to image. |
Remove padding top | Removes the space above the section. |
Remove padding bottom | Removes the space below the section. |
Image
Setting | What it does |
|---|---|
Enable parallax effect | Moves the image as customers scroll. |
Parallax direction | Vertical, Horizontal, or Zoom. Appears when Enable parallax effect is on. |
Background image | The banner image. 2880 x 1200 px .jpg recommended. |
Mobile background image (optional) | A different image for phones. 750 x 1400 px .jpg recommended. |
Prominent badge
Setting | What it does |
|---|---|
Text | The badge text. Leave it empty to hide the badge. |
Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. |
Position | Places the badge on the Left or Right. Appears after you enter text. |
Shape | Star, Diamond, or Asterisk. Appears after you enter text. |
Link
Setting | What it does |
|---|---|
Link | Makes the whole banner clickable. Works only when no button has both a label and a link. |
Content block settings
Setting | What it does |
|---|---|
Content position | Places the text and buttons at Center, Left center, or Left bottom. |
Subheading, Heading, Description | The text on the banner. |
Primary button label, Secondary button label | The button text. Leave a label empty to hide that button. |
Primary button link, Secondary button link | Where the button goes. Appears after you enter the button label. |
Troubleshooting
The image is cropped on phones.
A wide image is cut to fit a tall phone screen. Add a Mobile background image (optional), or set Section height on small screen to Adapt to image.
The banner link doesn't work.
The banner link is turned off when a button has both a label and a link. Remove the button link, or let customers use the button.
I don't see the Parallax direction setting.
Parallax direction appears only after you turn on Enable parallax effect.
The text is hard to read.
Increase Mask overlay opacity, or change the Content overlay color.
Related articles
Updated on: 23/10/2026
Thank you!