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:
- From 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 aren't supported on mobile. Set a mobile fallback image to replace the banner video on mobile or the Overlay Color will display.
Page banners display at the top of these page types:
- Regular Pages
The page description displays over the banner. Choose whether to also display the page title with the Show Page Title tweak.
Use the tweaks in the Page Banner section of the Style Editor to adjust the overlay fonts and add a color filter.
To change the height:
- Adjust the padding tweak in the Page Banner section.
- You can also add height to the page description by pressing Return or Enter to add additional line breaks.
Note: Page banners don't display at the top of collection items, such as blog posts, product items, or individual events.
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.
Index Page banner images
Index Pages display multiple Regular Pages, Album Pages, and Gallery Pages stacked vertically. Each section can display a full-bleed image or video behind the page content or image information. They don't display the page name or description.
To learn more, including how to style the banners, text, and navigation elements, visit Index Pages.
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 Style Editor tweaks:
- Use the Overlay Color tweak for per-page banners.
- Use the Color tweak for Regular 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.
Learn about the Blog Page.