Banner images in version 7.0 serve as powerful visual elements at the top of your pages. Here's how to effectively implement them:

Types of Banner Images:

• Page Banner: Appears on individual pages as featured images
• Collection Item Banner: Shows on blog posts, products, and events
• Site Banner: Displays across all pages (available in specific templates)

Image Formatting Guidelines:

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

Adding Banner Images:

For Page Banners:

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

For Collection Items:

1. Open editor
2. Navigate to Options tab
3. Add featured image

For Site Banners (Five template):

1. Access Site Styles
2. Locate Header background image
3. Upload and adjust settings

Text Overlay Options:

• Page title and description
• Collection item text
• Index Page banner text
• Intro area overlay text (Brine family)

Banner Styling Tips:

• Use Site Styles to modify fonts and colors
• Adjust banner height through template-specific options
• For transparent PNGs, customize background colors
• Maintain proper image proportions for responsive design

Troubleshooting:

1. Refresh page after changes
2. Verify template compatibility
3. Check Site Styles settings
4. Confirm banner image presence
5. Review template-specific guidelines

To remove banners:

• Page Banner: Delete via Media tab
• Collection Item: Remove in Options tab
• Site Banner: Clear through Site Styles

Each template family offers unique banner capabilities and customization options. Choose features that align with your site's design goals while maintaining optimal visual impact and user experience.

Related Articles

Previous Articles