A banner image draws attention to the top of your webpage by adding a striking visual element. This guide explains how to implement banner images in version 7.0.

Image Requirements

• Width: 1500-2500 pixels
• Width should exceed height
• Use abstract patterns without borders
• Avoid text in image files (add overlay text instead)

Types of Banners

1. Page Banners (individual pages)
2. Collection Content Banners (blog posts, products, events)
3. Sitewide Banners (all pages)

Adding a Page Banner

1. Open Pages menu
2. Hover over page title, click "Media"
3. Upload or search for image
4. Set focal point by dragging
5. Save changes
6. Style using Website Style

Adding Collection Banners

1. Open content editor
2. Select Options tab
3. Add selected image
4. Style as needed

Adding Sitewide Banners

1. Access Website Style
2. Locate Header: Background Image (Five template)
3. Upload image
4. Apply styling options

Text Overlay Options

• Page Title and Description
• Collection Content Text
• Index Page Banner Text
• Intro Area Content

Banner Sizing

• Most templates have fixed width
• Height adjustments vary by template
• Mobile devices show slightly cropped versions

Troubleshooting Tips

1. Reload page after changes
2. Verify template compatibility
3. Check Website Styles settings
4. Confirm banner image presence
5. Review template guidelines

Removing Banners

• Page Banners: Remove via Media tab
• Collection Content: Delete in Options tab
• Sitewide Banners: Remove in Website Styles

For best results, consider your template's specific features and limitations when implementing banners.

Related Articles

Previous Articles