Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Adding a banner image

Banner images display near the top of the page, adding a visual element that can set the tone for your site. Many templates create banner images automatically from page thumbnails, but how they display and their style options vary by template.

This guide walks you through the steps for adding, formatting, and styling a banner image.

Tip: As an alternative to our built-in banner options, you can add an Image Block to the top of a Regular Page on any template.

Watch a video

Image formatting tips

  • We recommend uploading images that are at least 1500 pixels wide.
  • We don't recommend using an image that has text within the actual image file. Instead, most templates support a text overlay.
  • You can use .jpg, .png, and .gif images. For more image requirements, visit formatting images for the web.
  • For help choosing an image that will look great in all browsers, review our responsive design tips.
  • If your banner doesn't look right, visit our cropping troubleshooting tips.
  • To display a custom message at the top of your site, add an Announcement Bar.
  • In all templates, you can add an Image Block to the top of a Regular Page to create the look of a banner.

Types of banners

How you add your banner image depends on what types of banners your template supports:

  • Page banner - Displays at the top of individual pages. Added as the page thumbnail.
  • Video banner - Can replace the page banner in some templates. Added as the page thumbnail.
  • Collection item banners - Displays above individual blog posts, products, and events. Added as the item's thumbnail.
  • Site-wide banners - Can display on every page. Added in the Style Editor.

See a comparison table of banner options by template.

Add a page banner

To add a page banner:

  1. Open the page and click the Settings annotation in the site preview. You can also open Page Settings.
  2. In the Media tab, click Add an image.
  3. Click Image to add an image from your computer, or click Getty to license a stock image for $10.
  4. Click and drag the focal point to set the center point of the image. This helps with cropping in most templates.
  5. Click Save to publish your changes.
  6. Use the Style Editor to style your banner.
Tip: To edit an existing banner, click the Banner annotation, or re-open Page Settings.

editor.png

Supported templates

Page banners are supported in these templates:

  • Adirondack - Regular, Blog, Events, and Products Pages
  • Bedford, Anya, Bryant, Hayden - Regular, Album, Blog, Events, and Products Pages
  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West - Regular, Album, Blog, Events, Gallery, and Products Pages
  • Five - Regular, Album, Blog, Events, Gallery, and Products Pages
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued) - Regular, Blog, Events, and Products Pages
  • Montauk, Julia, Kent, Om - Regular, Blog, Events, and the Main Index Page
  • Pacific, Charlotte, Fulton, Horizon, Naomi - Regular, Album, Blog, Events, Gallery, and Products Pages
  • Supply - Regular, Blog, Album, and Events Pages
  • Tremont, Camino, Carson, Henson - Regular, Album, Blog, Events, Gallery, and Products Pages
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori - Regular, Album, Blog, Events, Gallery, Project, Products, and the main Index Page

Add a collection item banner

Collection item banners display above individual blog posts, products, and events.

To add a collection item banner, open the editor for that item, then add a thumbnail image in the Options tab. For detailed steps, visit Adding thumbnail images.

Here's how the blog post banner looks in Skye:

Tip: Some collection item banners support overlay text.

skye-blog-post-header.png

Supported templates

Collection item banners are supported in these templates:

  • Adirondack - Blog posts, events, products
  • Bedford, Anya, Bryant, Hayden - Blog posts, events
  • Farro, Haute - Blog posts
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued) - Blog posts, events, products
  • Skye, Foundry, Indigo, Ready, Tudor - Blog posts
  • Supply - Blog posts, events
Note: In some templates, collection items display the page banner instead; for example, a blog post displays the Blog Page banner.

Add a site-wide banner

Site wide banners are available in the Five template and some discontinued templates. They display on any pages that don't have a page banner.

To add a site-wide banner, follow the steps in Five banners. If you're using a discontinued template, the same steps apply, but the banner image tweak may have a different name.

Note: Site-wide banners should never be larger than 2500 pixels, as this can cause issues on mobile.

Add a text overlay

Use the options built into your template to create an overlay of text that displays in front of the image. To learn more, visit Adding text to banners.

Note: We don't recommend uploading an image that has text or words in it. Text within an image file can cut off when the image crops and isn't indexed by search engines.

Here's an example of overlay text in the Pacific template:

pacific-page-banner.png

Style the banner

To learn about the style options for your template's banners, visit your template's guide:

Change the banner height

This is an overview of how to set the height for banners in each template. For detailed styling help, see the template guides linked in the previous section.

Adirondack

Height tweak

Bedford, Anya, Bryant, Hayden

Page and video banners - Add line breaks to the page description. Learn more.

Slideshow banners, Blog slideshow banners, and Collection item banners - Fixed height

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West

Add line breaks to the intro area.

Index banners have separate height options.

Farro, Haute

Use the Header tweak in the Blog: Item section to adjust the banner size.

Five

Use the Banner Area Height or Banner Area Spacing tweaks. (Banner Area Height doesn't affect mobile.)

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift.

(Discontinued)

Page and video banners - Add line breaks to the page description. Learn more.

Events and product banners - Add line breaks to the item description.

Blog posts - Fixed height.

Index banners have separate height options.

Montauk, Julia, Kent, Om

Fixed height, set by the original image. Page banners always display at the width of the site content. They don't crop vertically.

Pacific, Charlotte, Fulton, Horizon, Naomi

Add line breaks to the page description or use the Padding tweak. Learn more.

Index banners have separate height options.

Skye, Foundry, Indigo, Ready, Tudor

Use the Banner Image Width tweak to adjust the banner width. The height is set by the original image, proportional to the width.

Supply

Page width is fixed, so the banner fills the remaining width of the browser.

Tremont, Camino, Carson, Henson

Page Banner Image Height tweak

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

Height tweak

Banners on mobile

  • Banner images will always experience some cropping on mobile devices.
  • Video banners don't display in mobile. Set a mobile fallback image to display in its place.
  • Banner height settings don't always apply to mobile.
  • Parallax scrolling works on mobile in most instances.
  • For site-wide banners, the Fix Position setting won't appear on some mobile devices, including iOS.
  • Site-wide banners should never be larger than 2500 pixels, as this can cause issues on mobile.

Banners that display behind the header

Banners in the following templates can display behind the site header content, such as the site title and page navigation. Click any link for more information.

Note: Banners in Five always display below the header, but the site title, logo, and tag line can display as a text overlay on the banner.

Here's how that looks in Bedford:

bedford-transparent-header.png

Stacking banners in an Index

Some templates support an Index Page that displays multiple banners stacked vertically on one page, creating a long scrolling effect.

Here's a list of templates that support this option. Templates are grouped by family.

Note: Banners in an Index typically have their own style settings.

Banners that don't crop

Most banner images experience some cropping, especially as they adjust to different screen sizes. This helps your images look their best within your site's layout and in different browser sizes.

In some templates, you can create banners that won't crop:

  • Banners in Montauk, Julia, Kent, and Om don't crop vertically. They always display at the width of the site content. Note that tall, skinny banners may pixelate as they stretch to fill the width.
  • In the Pacific, Charlotte, Fulton, Horizon, and Naomi templates, you can create a banner image that doesn't crop by adding a Gallery Page within an Index Page.
  • For more help with cropping, visit our troubleshooting tips.
Tip: Changing the focal point of the thumbnail might help with cropping in page and collection item banners.

What happens when you switch templates

Page thumbnails, collection item thumbnails, and video thumbnails carry over when you switch templates. If you switch from one template that supports any of these banners to another, the same banner image displays in the new template.

Creating banners in other templates

Create the effect of a banner in any template by adding an Image Block at the top of a Regular Page.
Each layout has its own text overlay options.

Image Blocks display within the padding of the main content area. They don't have built-in full bleed options.

Tip: Some templates have page header areas that support blocks, including Image, Text, and Video Blocks.

image-block-as-a-banner.png

Banner options by template

The following templates support one or more banner types. Templates are grouped by family.

Template

Page banners: supported pages

Video banners

Collection item banners: supported items

Other options

Adirondack

Regular
Blog
Events
Products

yes

Blog posts
Events
Products

Fade effect on scroll (desktop view)

Bedford, Anya, Bryant, Hayden

Regular
Album
Blog
Events
Products

yes

Blog posts
Events

Slideshow banners

Blog Page slideshow banners

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West

Regular
Album
Blog
Events
Gallery
Products

yes

 

Parallax scrolling

Farro, Haute

   

Blog posts

 

Five

Regular
Album
Blog
Events
Gallery
Products

yes

Page banners display on blog posts, events, products

Site-wide banners

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

(Discontinued)

Regular
Blog
Events
Products

yes

Blog posts
Events
Products

Parallax scrolling

Montauk, Julia, Kent, Om

Regular
Blog
Events
Index

yes

Page banners display on blog posts, events

 

Pacific, Charlotte, Fulton, Horizon, Naomi

Regular
Album
Blog
Events
Gallery
Products

yes

   

Skye, Foundry, Indigo, Ready, Tudor

   

Blog posts

 

Supply

Regular
Blog
Album
Events

 

Blog posts
Events

Banner displays on the right, except on mobile.

Tremont, Camino, Carson, Henson

Regular
Album
Blog
Events
Gallery
Products

yes

  Page overlay

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

Regular
Album
Blog
Events
Gallery
Project
Products
Main Index

   

Fade-in effect

Transparent images

If you use a .png file with a transparent background, the following tweaks adjust the color that displays behind the banner. This list groups templates by family.

  • Adirondack - Content Background Color
  • Bedford, Anya, Bryant, Hayden - Banner Overlay Color
  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, and West - Overlay Color in the Main: Overlay section
  • Farro, Haute - Post Background Color. The Overlay Color also affects the color.
  • Five - Header Background
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued) - Content Background Color
  • Montauk, Julia, Kent, Om - Canvas Background
  • Pacific, Charlotte, Fulton, Horizon, Naomi - Overlay Color
  • Skye, Foundry, Indigo, Ready, and Tudor - Site Background
  • Supply - Page Color
  • Tremont, Camino, Carson, Henson - Site Background Color
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori - Background Color in the Banner section.
Tip: In most cases, the color displays at 100% opacity. If you're having trouble getting the color you want, adjust the transparency.
Was this article helpful?
7 out of 38 found this helpful