Banner images add immediate visual impact to the top of your pages. Here's how to add and customize them in version 7.0:

Image Requirements:

• Width: 1500-2500 pixels
• Wider than tall aspect ratio
• Abstract patterns without borders
• No text within images (add text overlays instead)

Types of Banner Images:

1. Page Banners

• Appears at top of individual pages
• Added as page's featured image
• Set via Pages panel > Media section

2. Collection Item Banners

• Shows on blog posts, products, events
• Added as item's featured image
• Set in Options tab of item editor

3. Site Banners

• Displays across all pages (Five template only)
• Added through Site Styles
• Called "Header Background Image" in settings

Adding a Page Banner:

1. Open Pages panel
2. Click Media on page settings
3. Upload image or choose existing
4. Adjust focal point if needed
5. Save changes
6. Style through Site Styles panel

Banner Text Options:

• Page title & description overlay
• Collection item details overlay
• Index page text overlay
• Custom intro area text (Brine family)

Key Style Considerations:

• Banners auto-crop on mobile
• Most templates have fixed banner widths
• Height adjustable via line breaks or style settings
• Transparent PNGs show background color
• Text overlay formatting varies by template

For best results:

• Use high-quality images
• Test on mobile devices
• Adjust focal points for cropping
• Keep text overlays minimal
• Consider template-specific features

Follow template-specific guides for detailed styling options and advanced features like video banners, slideshows, and parallax effects.

Related Articles

Previous Articles