Banner images appear at the top of your pages to visually enhance your site. Here's how to add and customize them in version 7.0:

Image Format Requirements:

• Width: 1,500 to 2,500 pixels
• Width should exceed height
• Use abstract patterns without borders
• Avoid embedded text (add text overlays instead)

Types of Banner Images:

1. Page Banner

• Appears at top of each page
• Added as page's featured image

2. Collection Item Banner

• Shows above blog posts, products, and events
• Added as item's featured image

3. Site Banner

• Displays on all pages
• Added through Site Styles panel

Adding a Page Banner:

1. Open Pages panel
2. Hover over page title and click Media
3. Upload or select image
4. Adjust focal point
5. Save changes
6. Customize via Site Styles panel

Adding Collection Item Banners:

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

Adding Site Banners:

1. Access Site Styles panel
2. Locate Header Background Image (Five template)
3. Upload image
4. Customize settings

Text Overlay Options:

• Page title and description
• Collection item text
• Index page banner text
• Introduction area text
• Avoid embedding text in image files

Customization Options:

• Adjust fonts and colors via Site Styles
• Modify banner size (template-dependent)
• Add buttons for calls-to-action
• Set transparent background colors

Mobile Considerations:

• Banners automatically crop on mobile devices
• Layout adjusts for different screen sizes

Optimization Tips:

1. Use high-quality images
2. Keep text overlay readable
3. Maintain proper image proportions
4. Consider mobile viewing experience
5. Test across different devices

Note: Specific features and options vary by template. Consult your template guide for detailed customization options.

Related Articles

Previous Articles