Section reference
Image banner
Open a page with one large image and a short message using Vellmar's image banner.
Image banner places an eyebrow, a heading, text and up to two buttons over one large image. You choose the height, from Small to Full screen, where the text sits, and how strong the overlay between the image and the text is. The color scheme sets both the overlay color and the text color.
You add the text as blocks, so you can reorder them or leave any of them out.
Best practices
- Use a 2400 × 1200 px image with a calm area where the text will sit. Set a focal point so the subject stays in view on phones, where the banner is taller than it is wide.
- Check readability. If the text is hard to read, raise Overlay opacity or choose a scheme with more contrast. See Colors and color schemes.
- One clear action. A single solid button is easier to act on than two equal ones. Use the second, outline button for a softer option.
- Use it first. As the first section on a page, its image loads with high priority, which helps the page appear quickly.
- Heading size. Extra large makes a strong statement on a home page. Medium or Large suits landing and about pages.
Preset tips
- Sorrel opens its home page with a large image banner, using its clay scheme with a light 25% overlay.
- The About page template in every preset also starts with an image banner.
- Handle
image-banner- Group
- Heroes and banners
- Where
- Add it to any template with Add section in the theme editor. Up to 8 blocks. Accepts app blocks.
Settings
| Setting | Type | Default | Options |
|---|---|---|---|
| Layout | Drop-down | Full width | Full width, Split |
| Height | Drop-down | Full screen | Small, Medium, Large, Full screen |
| Content positionWith the split layout, start places the text before the image and end after it. | Drop-down | Start | Start, End, Bottom |
| Text alignment | Drop-down | Start | Start, Center |
| Scroll effectTurns off for customers who prefer reduced motion, and when scroll effects are off in theme settings. | Drop-down | Shrink into a card | Shrink into a card, None |
| Show scroll cue | Checkbox | On | — |
| Color schemeSets the text color and the shade behind the text. | Color scheme | Scheme 1 | — |
Padding
| Setting | Type | Default | Options |
|---|---|---|---|
| Top padding | Slider | 0px | 0px to 200px, in steps of 4px |
| Bottom padding | Slider | 0px | 0px to 200px, in steps of 4px |
| Top padding on mobile | Slider | 0px | 0px to 200px, in steps of 4px |
| Bottom padding on mobile | Slider | 0px | 0px to 200px, in steps of 4px |
Blocks
Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 8 blocks.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
App blocks
Apps you install can add their own blocks here. Their settings come from the app.