Banner images enhance your site's visual appeal and can be added in several ways depending on your template. Here's how to effectively implement them in version 7.0:

Types of Banner Images

1. Page Banner

• Displays at the top of individual pages
• Added as the page's featured image
• Ideal for highlighting specific page content

2. Collection Item Banner

• Shows over blog posts, products, and events
• Added as the featured item's featured image
• Creates consistency across collection items

3. Sitewide Banner

• Appears on every page
• Added through Site Styles
• Available in Five template and select others

Image Requirements

• Width: 1500-2500 pixels
• Aspect ratio: Wider than tall
• Format: Abstract patterns without borders
• No text in images (add text overlays instead)
• File formats: JPG, PNG, GIF

Adding Banner Images

To add a page banner:

1. Open Pages panel
2. Hover over page title and click Media
3. Choose Add Image or Search Images
4. Adjust focal point for proper cropping
5. Save changes

For collection items:

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

Styling Options

• Text overlays: Add titles, descriptions, or custom content
• Size adjustments: Control banner height through template settings
• Mobile responsiveness: Banners automatically adapt to screen sizes
• Color schemes: Customize overlay colors and transparency
• Special effects: Some templates offer parallax scrolling or fade effects

Template-Specific Features

Different templates offer various banner capabilities:

• Adirondack: Fade effects on scroll
• Bedford: Slideshow options, stacked index banners
• Brine: Parallax scrolling, behind-header display
• Five: Sitewide banner support, logo overlay options
• York: Index banners with fade effects

Best Practices

1. Text Display

• Use overlay text instead of text in images
• Ensure readable contrast between text and background
• Maintain consistent text placement across pages

2. Mobile Optimization

• Test banner appearance on different devices
• Consider mobile cropping when selecting images
• Adjust text placement for smaller screens

3. Performance

• Optimize image file sizes
• Use appropriate image dimensions
• Consider loading times when adding multiple banners

Related Articles

Previous Articles