You can display a full-width banner at the top of each page on your Five site.
There are two types of banners in Five:
- Page banners - Displays on individual pages. Added in Page Settings. Supports video.
- Site-wide banner - Displays on any page that doesn't have a page banner. Added in the Style Editor. Image or color only, doesn't support video.
To set how banners display, open the Style Editor and scroll down to the Header section.
- If Page Thumbnail As Banner is unchecked, the site-wide banner image or color will display on every page. Page banners won't display.
- If Page Thumbnail As Banner is checked, page banners will display. The site-wide banner image or color will display on all pages that don't have a page banner.
Note: The shopping cart page displays the site banner. There is no page banner for this page.
Add a page banner
In Five, you can add page banners on the following page types:
- Banner images - Album, Blog, Events, Gallery, Products, and Regular Pages.
- Video banners - Album, Blog, Events, and Regular Pages.
To set a page banner image or video:
- Add a thumbnail image or video URL to the page in Page Settings.
- Use the focal point to center the image. (Video banners don't have focal points.)
- Ensure the Page Thumbnail As Banner tweak is checked in the Style Editor.
Any pages without a thumbnail image or video display the site-wide banner image or color.
Add a site-wide banner image
To set a site-wide banner image:
- Open the Style Editor and scroll down to the Header section.
- Click the Header Background Image tweak in the Style Editor.
- In the popup that appears, click Image to add an image from your computer, or click Getty to license a stock image for $10. (Site-wide banners don't support video.)
- Style the image using the available tweaks.
- Click Save to publish your changes.
When you add a site-wide banner image, options for styling it appear. You can style a site-wide banner image to repeat, display at the banner height or width, or fill the banner container completely.
We recommend adjusting the settings in this order:
Choose how your banner fits within the banner area. Options are:
Repeat your banner image. This works with the Size: Auto and Size: Contain settings. Repeating is most effective for patterns and less effective for photographs.
Set the position of the banner image.
When checked, the image's position remains stationary behind scrolling content. When unchecked, it scrolls up and down with the page.
This effect won't appear on some mobile devices, including iOS.
Tip: Site-wide banner images have the same style options as background images.
Mobile vs. desktop
The same tweaks apply to both mobile and desktop. Since responsive design resizes banners on your site for different browser widths, it's a good idea to compare how your site looks on a desktop with how it looks on mobile devices. Experiment with the style tweaks until you find the combination that works for all browser widths.
Here's how you can use the tweaks to fix common mobile display issues:
- Zoomed-in or distorted image - Set the image to Size: Contain or Size: Auto. You may also need to upload a larger image, up to 2500 pixels along its longest edge.
- Image centered incorrectly - Use the Position options to adjust where your image displays on the page.
- Image not covering the whole banner - Select Size: Auto or Size: Contain and Repeat the image to cover any blank areas.
Tip: The Fix Position effect won't appear on some mobile devices, including iOS.
Add a site-wide banner color
To display a solid color instead of an image for your site-wide banner:
- Ensure the Header Background Image tweak doesn't have an image loaded. (To remove one, click the tweak and then click Remove.)
- Set the color with the Header Background tweak.
Banner overlay text
Use the Header section of the Style Editor to choose what displays over all banners on your site:
- Banner Content: Site Title Logo Tagline - Displays the site title or logo and tag line.
- Banner Content: Page Title Description - Displays the page title and page description. Page descriptions don't display on mobile.
- Banner Content: Empty - Displays the banner with no text. You can then set the Banner Area Height.
Use the Site Title, Site Tagline, and Page Title tweaks to adjust the colors and fonts of the text.
Banner overlay color
Use the Banner Overlay Color tweak to add a color filter to all your site's banners.
Five doesn't support collection item banners for individual blog posts, events, or products.
- If page banners are enabled, the Blog Page, Events Page, or Products Page banner displays.
- If page banners aren't enabled, or if there is no page thumbnail, the site-wide banner image or color displays.
Adjust the height
How you adjust the banner height depends on what content displays over the banner, set by the Banner Content tweak.
- Banner Content: Empty - Adjust the Banner Area Height tweak. This tweak doesn't affect mobile.
- Banner Content: Page Title Description - Adjust the Banner Spacing tweak, or add extra spaces to the page description.
- Banner Content: Site Title Logo Tagline - Adjust the Banner Spacing tweak.
Hide all banners
You can hide banners in desktop view by setting the Banner Area Height tweak to 0px. However, this can cause issues on mobile.