Banner images in Squarespace 7.0 serve as visually striking focal points at the top of your pages. Here's how to add and customize them effectively:

Image Format Requirements:

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

Adding Banner Images:

1. Page Banners:

• Open Pages panel
• Click Media in page settings
• Upload image or choose from existing
• Adjust focal point
• Save changes
• Customize via Site Styles panel

2. Collection Item Banners:

• Open item editor
• Add featured image in Options tab
• Appears above blog posts, products, and events

3. Site Banners (Five template):

• Access Site Styles panel
• Locate Header Background Image
• Upload and customize settings

Text Overlay Options:

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

Customization Tips:

• Adjust banner height through template settings
• Use Site Styles for fonts and colors
• Maintain proper image proportions
• Consider mobile display requirements

Troubleshooting:

• Refresh page after changes
• Verify template compatibility
• Check Site Styles settings
• Ensure banner image is properly uploaded

Mobile Considerations:

• Images will crop on mobile devices
• Test responsiveness across devices
• Adjust focal points for optimal mobile display

Removal Process:

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

This streamlined approach ensures optimal banner implementation while maintaining professional aesthetics and functionality across all devices.

Related Articles

Previous Articles