Banner Images in Version 7.0 - Essential Guide

Banner images create visual impact and set your site's tone. Here's how to effectively use them in version 7.0.

Key Image Requirements:

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

Types of Banners:

1. Page Banner

   • Displays at the top of individual pages
   • Added as featured image
   • Customizable through Site Styles

2. Collection Item Banner

   • Shows on blog posts, products, and events
   • Added as featured image in Options tab
   • Template-specific display options

3. Site-wide Banner

   • Appears on all pages (Five template)
   • Added through Site Styles
   • Consistent branding across site

Adding a Page Banner:

1. Open Pages panel
2. Click Media option
3. Upload or search for image
4. Adjust focal point
5. Save changes

Text Overlay Options:

• Page title and description
• Collection item text
• Index page banner text
• Intro area overlay text

Optimization Tips:

• Use proper image dimensions
• Ensure mobile responsiveness
• Consider load times
• Test across devices

Banner Style Customization:

• Adjust fonts and colors
• Modify transparency
• Set banner height
• Control overlay opacity

Mobile Considerations:

• Images will crop differently
• Test responsive behavior
• Optimize for smaller screens
• Consider text readability

Removal Instructions:

• Page banners: Remove via Media tab
• Collection items: Delete in Options tab
• Site-wide: Remove through Site Styles

Template Support:

• Adirondack: Layout, Blog, Events, Products
• Bedford: All page types, video support
• Brine: Full layout support, parallax effects
• Five: Site-wide options, overlay features
• York: Multiple index options, fade effects

Remember to keep mobile optimization in mind and test across different devices for optimal display.

Related Articles

Previous Articles