Banner images enhance your website by adding visual impact at the top of pages. Here's how to effectively implement them in version 7.0:

Image Requirements:

• Width: 1500-2500 pixels
• Width must exceed height
• Use abstract patterns without borders
• Avoid text within images
• Compatible file formats: JPG, PNG, GIF

Types of Banner Images:

1. Page Banners

• Display at top of individual pages
• Added as featured image
• Set via Pages menu > Media

2. Collection Content Banners

• Show above blog posts, products, events
• Added as featured image in Options tab
• Managed through collection item settings

3. Site-wide Banners

• Available in Five template and select others
• Display on all pages without specific banners
• Configured in website styles

Adding a Page Banner:

1. Open Pages menu
2. Click page title > Media
3. Add or search for image
4. Set focal point for cropping
5. Save changes
6. Style through website settings

Text Overlay Options:

• Page title and description
• Collection content text
• Index page banner text
• Intro section overlay

Styling Tips:

• Use website styles for fonts and colors
• Adjust banner height through template settings
• Consider mobile responsiveness
• Transparent PNG backgrounds allow color customization

Supported Template Groups:

• Adirondack
• Bedford
• Brine
• Five
• Montauk
• Pacific
• Supply
• Tremont
• York

Each template offers unique features and customization options for banner implementation. Check template-specific guidelines for detailed functionality.

For best results:

• Test banner display across devices
• Ensure text readability over images
• Maintain consistent sizing across pages
• Consider load time impact

To remove banners, use the appropriate removal option based on banner type (page, collection, or site-wide) through respective settings menus.

Related Articles

Previous Articles