A banner image adds visual impact to your website's top section. Here's how to add and optimize one in version 7.0:

Image Requirements:

• Width: 1500-2500 pixels
• Landscape orientation (width > height)
• Borderless with abstract patterns
• Avoid text within images (add text overlays instead)

Types of Banners:

1. Page Banner: Displays at the top of individual pages
2. Collection Item Banner: Shows above blog posts, products, or events
3. Sitewide Banner: Appears on all pages

Adding a Page Banner:

1. Open Page Panel
2. Click Media under page title
3. Upload or search for an image
4. Set focal point for optimal cropping
5. Save changes
6. Style through site settings

Adding a Collection Item Banner:

1. Open item editor
2. Add featured image in Options tab
3. Save changes

Adding a Sitewide Banner:

1. Access style adjustment options
2. Select Header Background Image
3. Upload image
4. Customize styling options

Text Overlay Options:

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

Best Practices:

• Use proper image dimensions
• Optimize for mobile viewing
• Consider SEO implications
• Test across different devices
• Ensure text readability

Banner images automatically adjust for mobile devices. Remove banners by accessing the relevant settings panel and clicking Remove Image.

Banner styling, sizing, and overlay options vary by template. Consult your template's documentation for specific features and limitations.

Related Articles

Previous Articles