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

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.

 

 

five-pagebanner.gif

Banner settings

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

To set a page banner image or video for any page:

  1. Add a thumbnail image to the page in Page Settings. You can also add a video URL to create a video banner.
  2. Use the focal point to center the image. (Video banners don't have focal points.)
  3. Ensure the Page Thumbnail As Banner tweak is checked.

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:

  1. Open the Style Editor and scroll down to the Header section.
  2. Click the Header Background Image tweak in the Style Editor.
  3. 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.)
  4. Style the image using the available tweaks.
  5. Click Save to publish your changes.

Style options

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.

site-wide-style-options.jpg

We recommend adjusting the settings in this order:

Size

Choose how your banner fits within the banner area. Options are:

  • Auto - The image retains its original width and height. This is good for smaller images you want to repeat.
  • Cover - Scales the image as large as needed to completely cover its container (full-bleed). As a result, the banner may look different between pages, depending on the length of the page content.
  • Contain - Scales the image so its longest edge fits inside the banner area.
Repeat

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.

  • No-repeat - Display the image only once.
  • Repeat - Repeat the image in all directions.
  • Repeat-x - Repeat in a row across horizontal axis.
  • Repeat-y - Repeat in a row down the vertical axis. 
Position

Set the position of the banner image.

  • Top Left, Top Center, Top Right
  • Center Left, Center Center, Center Right
  • Bottom Left, Bottom Center, Bottom Right
Fix Position

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.
  • 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-content.gif

Banner overlay color

Use the Banner Overlay Color tweak to add a color filter to all your site's banners.

five-banneroverlay.png

Collection items

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.

Was this article helpful?
5 out of 19 found this helpful