Banner Images Guide: How to Add & Style in Version 7.0
When adding banner images to your site, follow these essential guidelines to create visually striking headers that engage visitors.
Image Requirements:
- Width: 1500-2500 pixels
- Orientation: Landscape format (wider than tall)
- Style: Abstract patterns without borders
- Text: Avoid text in image files; add overlays instead
Types of Banners:
- Page Banners
- Display at individual page tops
- Added as featured images
- Customizable through Site Styles
- Collection Item Banners
- Show above blog posts, products, and events
- Added through item's featured image
- Styling varies by template
- Site-wide Banners
- Display across all pages
- Available in Five template and select others
- Configured in site styles
Adding Banner Text:
- Use page titles and descriptions
- Add collection item text
- Create intro area overlays
- Avoid embedding text in images
Styling Options:
- Adjust fonts and colors in Site Styles
- Modify banner height (template-dependent)
- Control transparency for PNG backgrounds
- Customize mobile display
Mobile Considerations:
- All banners experience some cropping
- Responsive design adjusts automatically
- Text overlays adapt to screen size
To remove banners:
- Page banners: Remove via Media tab
- Collection items: Delete in Options tab
- Site-wide: Remove through site styles
Template Support: Different templates offer varying banner features including video support, parallax scrolling, and overlay options. Check your specific template's capabilities for available features.
Remember to test your banner display across different devices and screen sizes to ensure optimal viewing experience.
Related Articles
How to Recover Deleted Pages and Posts: A Complete Restoration Guide
