Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Pacific banners

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.

Adding banners

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 gear-icon.
  • 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.

All these options open Page Settings. Within Page Settings, click the Media tab and add a thumbnail image or video URL.

  • 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

Page banners display at the top of these page types:

  • Regular Pages
  • Album
  • Blog
  • Events
  • Gallery
  • Products

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.

Banner text

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.

Banner height

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

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.

Color overlay

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 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.

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.

Next step

Learn about the Blog Page.

Was this article helpful?
7 out of 32 found this helpful