Let's help you add an impactful banner image to your site while following best practices and technical requirements.

A banner image creates a strong visual focal point at the top of your page. Here's how to implement one effectively:

Image Requirements:

• Width: 1500-2500 pixels
• Orientation: Landscape (wider than tall)
• Style: Abstract patterns without borders
• No text embedded in images (add text overlays instead)

Types of Banner Images:

1. Page Banner: Displays on individual pages as featured image
2. Collection Item Banner: Shows on blog posts, products, or events
3. Site-wide Banner: Appears across all pages (available in Five template)

Adding a Page Banner:

1. Open Page Panel
2. Click page title > Media
3. Choose Add Image or Search for Images
4. Adjust focal point for optimal cropping
5. Save changes
6. Style through site settings

Adding a Collection Item Banner:

1. Open item editor
2. Navigate to Options tab
3. Add featured image
4. Save changes

Adding a Site-wide Banner:

1. Access site style settings
2. Look for Header Background Image (Five template)
3. Upload image
4. Adjust styling options

Text Overlay Best Practices:

• Use page title and description fields
• Add introduction area overlay text (Brine family)
• Implement collection item text settings
• Avoid embedding text in images

Banner Sizing Tips:

• Most templates have fixed width
• Adjust height through line breaks or style settings
• Mobile devices will crop banners automatically
• Check template-specific sizing options

Removing Banners:

• Page Banner: Remove Image in Media tab
• Collection Item: Delete from Options tab
• Site-wide: Remove through style settings

Remember to refresh your page after making changes to see updates, and always check mobile responsiveness after implementation.

Related Articles

Previous Articles