To add a banner image to your webpage:

1. Image Requirements

• Width: 1,500 - 2,500 pixels
• Landscape orientation (wider than tall)
• Use abstract patterns without margins
• Avoid text within image files
• Don't include image margins

2. Types of Banners

• Page Banner: Displays at top of individual pages
• Collection Item Banner: Shows above blog posts, products, or events
• Site-wide Banner: Appears on all pages (available in Five template and some dropdown templates)

3. Adding a Page Banner

4. Open "Pages" panel

5. Click page title > Media

6. Select "Add Image" or "Browse Images"

7. Adjust focal point for cropping

8. Click Save

9. Style using Site Styles panel

10. Adding a Collection Item Banner

• Open item editor
• Add featured image in Options tab
• Follows template-specific display rules

5. Text Overlay Options

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

6. Styling Tips

• Adjust fonts and colors in Site Styles
• Banner size varies by template
• Mobile responsiveness automatically handled
• Use buttons for calls-to-action

7. Troubleshooting

• Refresh page if changes don't appear
• Verify template compatibility
• Check Site Styles for display options
• Ensure proper image formatting

To remove a banner:

• Page Banner: Delete from Media tab
• Collection Item: Remove from Options tab
• Site-wide Banner: Delete in Site Styles

Related Articles

Previous Articles