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.

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

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 Search For Image to add a stock image.
  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 Site Styles to style your banner.
Tip: To edit an existing banner, click the Banner annotation, or re-open Page Settings.

add_a_banner_image.jpg

Supported templates

Page banners are supported in the following templates. Templates are grouped by family.

Template Supported pages
Adirondack Regular, Blog, Events, and Products Pages

Bedford family

Anya, Bryant, Bedford, Hayden

Regular, Album, Blog, Events, and Products Pages

Brine family

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

Regular, Album, Blog, Events, Gallery, and Products Pages
Five Regular, Album, Blog, Events, Gallery, and Products Pages

Montauk family

Julia, Kent, Montauk, Om

Regular, Blog, Events, and the Main Index Page

Pacific family

Charlotte, Fulton, Horizon, Naomi, Pacific

Regular, Album, Blog, Events, Gallery, and Products Pages
Supply Regular, Blog, Album, and Events Pages

Tremont family

Camino, Carson, Henson, Tremont

Regular, Album, Blog, Events, Gallery, and Products Pages

York family

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

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 the following templates. Some collection items display the page banner; for example, a blog post displays the Blog Page banner. Templates are grouped by family.

Template Collection items What displays
Adirondack Blog posts, events, products Collection item thumbnail

Bedford family

Anya, Bryant, Bedford, Hayden

Blog posts, events Collection item thumbnail
 

Farro family

Farro, Haute

Blog posts Collection item thumbnail
 

Five

Blog posts, events, products Page banner

Montauk family

Julia, Kent, Montauk, Om

Blog posts, events Page banner

Skye family

Foundry, Indigo, Ready, Skye, Tudor

Blog posts Collection item thumbnail
Supply Blog posts, events Collection item thumbnail

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

Add content as an overlay

In some templates, you can add content blocks over a banner. For example, you could add a Video Block over a banner image, as shown in the screenshot below.

You can add content blocks over a banner image or video in the following templates. Templates are grouped by family.

Brine family

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

Add blocks to intro areas on page banners and content sections in an Index.

Pacific family

Charlotte, Fulton, Horizon, Naomi, Pacific

Add bocks to content sections in an Index.

video-block-on-background-image.png

Style the banner

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

  • Adirondack
  • Bedford family - Anya, Bryant, Bedford, Hayden
  • Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Farro family - Farro, Haute
  • Five
  • Montauk family - Julia, Kent, Montauk, Om
  • Pacific family - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Skye family - Foundry, Indigo, Ready, Skye, Tudor
  • Supply
  • Tremont family - Camino, Carson, Henson, Tremont
  • York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

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. Templates are grouped by family.

Template

How to change the height

Adirondack

Height tweak

Bedford family

Anya, Bryant, Bedford, 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 family

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

Add line breaks to the intro area.

Index banners have separate height options.

Farro family

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

Montauk family

Julia, Kent, Montauk, 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 family

Charlotte, Fulton, Horizon, Naomi, Pacific

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

Index banners have separate height options.

Skye family

Foundry, Indigo, Ready, Skye, 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 family

Camino, Carson, Henson, Tremont

Page Banner Image Height tweak

York family

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

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.

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.

Banners that display behind the header

Banner images and video 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. Templates are grouped by family.

  • Bedford family - Anya, Bryant, Bedford, Hayden
  • Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Pacific family - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Tremont family - Camino, Carson, Henson, Tremont
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.

  • Bedford family - Anya, Bryant, Bedford, Hayden
  • Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Pacific family - Charlotte, Fulton, Horizon, Naomi, Pacific
  • York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
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 the Montauk family (Julia, Kent, Montauk, 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 family (Charlotte, Fulton, Horizon, Naomi, Pacific), 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.

Slideshow banners

You can create a slideshow banner in the following templates. Templates are grouped by family.

Tip: In other templates, add a Slideshow Gallery Block at the top of a Regular Page for a similar effect.
Template Notes

Brine family

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

Create an Index Page with a slideshow as its top section. Learn more.

Bedford family

Anya, Bryant, Bedford, Hayden

Create a slideshow banner on Regular Pages with a promoted Gallery Block, or a Blog Page slideshow banner from Featured Posts. 

Pacific family

Charlotte, Fulton, Horizon, Naomi, Pacific

Create an Index Page with a slideshow as its top section. Learn more.

 

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 family

Anya, Bryant, Bedford, Hayden

Regular
Album
Blog
Events
Products

Yes

Blog posts
Events

Slideshow banners

Blog Page slideshow banners

Brine family

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

Regular
Album
Blog
Events
Gallery
Products

Yes

 

Parallax scrolling

Farro family

Farro, Haute

   

Blog posts

 

Five

Regular
Album
Blog
Events
Gallery
Products

Yes

Page banners display on blog posts, events, products

Site-wide banners

Montauk family

Julia, Kent, Montauk, Om

Regular
Blog
Events
Index

Yes

Page banners display on blog posts, events

 

Pacific family

Charlotte, Fulton, Horizon, Naomi, Pacific

Regular
Album
Blog
Events
Gallery
Products

Yes

   

Skye family

Foundry, Indigo, Ready, Skye, Tudor

   

Blog posts

 

Supply

Regular
Blog
Album
Events

 

Blog posts
Events

Banner displays on the right, except on mobile.

Tremont family

Camino, Carson, Henson, Tremont

Regular
Album
Blog
Events
Gallery
Products

Yes

  Page overlay

York family

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

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. Templates are grouped by family.

Tip: In most cases, the color displays at 100% opacity. If you're having trouble getting the color you want, adjust the transparency.
Template Tweak
Adirondack Content Background Color

Bedford family

Anya, Bryant, Bedford, Hayden

Banner Overlay Color

Brine family

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

Overlay Color in the Main: Overlay section

Farro family

Farro, Haute

Post Background Color. The Overlay Color also affects the color.
Five Header Background

Montauk family

Julia, Kent, Montauk, Om

Canvas Background

Pacific family

Charlotte, Fulton, Horizon, Naomi, Pacific

Overlay Color

Skye family

Foundry, Indigo, Ready, Skye, Tudor

Site Background
Supply Page Color

Tremont family

Camino, Carson, Henson, Tremont

Site Background Color

York family

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

Background Color in the Banner section.

Was this article helpful?
23 out of 113 found this helpful