Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi share the same underlying structure and functionality. This guide applies to all these templates.
In Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi, you can create banners at the top of any page, or stack multiple banners vertically within an Index Page.
There are several ways to add banner images or videos to your site:
- In the Home Menu, click Pages. Hover over the page title and click the .
- View the individual page and use the Add Banner Image annotation.
- Click the Add Background Image annotations that appear while hovering over an Index page.
- Gallery Pages don't support video banners.
- Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
Page banners display at the top of these page types:
- Layout Pages
They can show the page title and description as an overlay.
Note: Page banners don't display at the top of collection items, such as blog posts, product items, or individual events.
The page title and description from Page Settings can display over page banner images or videos.
To hide the title on all pages, uncheck the Show Page Title tweak.
To remove a title or description on one page, delete it from Page Settings.
- If you do this, ensure you add an SEO title or description. These won't display on your site, but are helpful for SEO.
- The page description affects the banner height. To remove the description without affecting the banner height, replace the text with line breaks.
Use the tweaks in the Page Banner section of Site Styles to adjust the overlay fonts and add a color filter.
To change the height, you can:
- Adjust the padding tweak in the Page Banner section.
- Add height to the page description by pressing Return or Enter to add additional line breaks.
Gallery banners don't support video.
If a Gallery Page doesn't have a thumbnail image, the first image in the gallery becomes the banner automatically whenever you make a change in the Gallery. If you don't want a banner on your Gallery Page, open Page Settings to remove the thumbnail.
Site title and navigation overlay
The site title and Main Navigation can overlay page banners. To display these elements over a background color above your site's banner images instead, uncheck the Transparent on Banner Images tweak.
To learn more about adjusting the style of the site title and navigation, visit Structure and style.
Add a color filter to all banners using Site Styles tweaks:
- Use the Overlay Color tweak for per-page banners.
- Use the Color tweak for Layout Page and Album Page banners within an Index.
- Use the Galley Overlay Color tweak for galleries within an Index. The overlay color only displays on images with an image title or description. When set to Design: Grid, the overlay color shows with the title and description on hover.
If you want the color filter to be consistent throughout your site, ensure all three tweaks are set to the same color.
Note: For general information about styling your site, visit Structure and style.
Index Page banners
Any page added to an Index creates a section. These sections stack vertically on a single page.
For sections within the Index, the page banner becomes a full-bleed image or video behind the page content or image information. Index sections don't display the page title or description.
To learn more, visit Index Pages.
Learn about the Blog Page.