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

Bedford, Anya, Bryant, and Hayden share the same underlying structure and functionality. This guide applies to all these templates.

In the Bedford, Anya, Bryant, and Hayden templates, you can add banner images or videos to the following pages and overlay them with customizable headers, text, buttons, and colors:

  • Layout Pages
  • Album Pages
  • Blog Pages and posts
  • Events Pages and individual events
  • Products Pages

Some pages also have slideshow options:

Before you begin

  • You can stack multiple Layout Page banners vertically in an Index Page.
  • The header content (site title, logo, navigation links) displays over the banner when the Transparent on Banner Images tweak is checked.

Page banners

You can add a banner image or video to the top of Layout, Album, Blog, Event, and Products Pages.

  1. In the Pages panel, add an Album, Blog, Event, Layout, or Products Page.
  2. Click the for that page to open Page Settings.
  3. Add a thumbnail image or video URL for the page in the Media tab.
  4. Add the text overlay in the Description field of the Basic tab (see formatting tips below). Title text doesn't display.
  5. Save and refresh the page.

Text overlay

How you format the description field text determines how it displays:

  • Bold text formats as a header.
  • Layout text formats as description text.
  • Links in the last line format as buttons.
Note: If the link includes bold text, or there are other lines below the link, it won’t format as a button.
Tip: To use different text for search results, add an SEO description.

Height and cropping

To add extra height to the page banner, add blank spaces to the overlay text by pressing the Return or Enter key above or below your page description. This can help fix cropping issues and expands the overall size of the banner on the page for a dramatic effect.

Note: To add blank spaces under a button, press Shift + Enter or Shift + Return for every line you want to add. If you add line breaks by pressing Return or Enter without Shift, the link will display as a regular link in the banner instead of a button.

Slideshow banners

You can create a slideshow banner at the top of a Layout Page by adding a Slideshow Gallery Block as the first block on the page.

  • Slideshow banners override page thumbnail banners.
  • The Gallery Block won't display on the page after it creates the banner. You'll only see it when you're logged in and editing the page.

To add a slideshow banner:

  1. In the Pages panel, click the + icon, then click Page (or select an existing Layout Page).
  2. Click an Insert Point at the top of the page, above all other page content, and add a Slideshow Gallery Block.
  3. In the Content tab, add your images, or connect to a Gallery Page.
  4. In the Gallery Block editor's Design tab, choose your slideshow's settings. For best results, ensure Automatically Crop Images is checked.
  5. To add overlay text, click the image's and add text to the Description field (see formatting tips below). Title text doesn't display. If you connected an existing gallery, update the descriptions within the Gallery Page.
  6. Click Apply, Save, and refresh the page. (While logged in, the slideshow banner may not appear until you refresh the page.) 


Use the other options in the Design tab to show navigation arrows, automatically crop images, and determine how the images transition between slides:

  • Only the Gallery Block's Autoplay, Controls, and Auto Crop settings are obeyed. 
  • Titles will always be centered.
  • Thumbnail navigation doesn't display.

To edit the slideshow banner, open the Page Editor and edit the Gallery Block. 


Slideshow banner text overlay

As with banner images, how you format the image description text determines how it displays:

  • Bold text formats as a header.
  • Regular text formats as description text.
  • Links in the last line format as buttons.

Check Show Title and Description in the Design tab of the Gallery Block Editor to ensure the text displays. 

There are a few exceptions:

  • If a link includes bold text, or there are other lines below the link, it won’t format as a button. 
  • Adding line breaks before the header text might remove its formatting.

Slideshow banners have a fixed height:

  • Desktop - 600 pixels. If the header is transparent on banner images, the fixed image height extends to 700 pixels. 
  • Mobile - 300 pixels. (Devices taller than 640 pixels display the desktop banner height.)

If the text on a slideshow banner is too long to fit within the fixed height, non-bold description text won't display. Bold description text will crop.

Note: Blog Pages have an additional featured posts slideshow banner.

Video banners

To create a video banner that plays automatically and doesn't include sound, use a video URL in a page banner.

  • Can be used with Layout, Album, Blog, Event, and Products Pages.
  • Will display the special text overlay (text added to the page description).
  • Won't always 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.

To create a video banner that doesn't play automatically and includes sound, add a video to a slideshow banner

  • Layout Pages only.
  • Within the Gallery Block, click the + icon to add a video or videos
  • The video will follow the Slideshow Gallery Block's settings for auto-transition and navigation arrows.
  • Will display the special text overlay (text added to the image description).

Blog Page slideshow banners

The Blog displays the five most recently published featured posts as a slideshow in the banner area. Visitors can click on the slideshow banner to navigate through the different featured posts. The banner doesn’t automatically scroll.

Tip: To set a blog post as featured, check Featured in the Options tab of the post editor.
  • The blog post title, one metadata element (date, category, author, or none), and a View Post link display for each post. Choose which metadata element appears with the Meta Priority tweak.
  • The thumbnail image for each featured post displays behind the text. If the post doesn't have a thumbnail image, the text displays over the Banner Overlay Color.
  • Use the Banner Slideshow Controls tweak to control the navigation elements on your blog's slideshow banner.
  • If none of your posts are marked as Featured, the page banner displays on the Blog Page instead of the slideshow.

Slideshow banners have a fixed height:

  • Desktop - 600 pixels
  • Mobile - 300 pixels

Blog posts and events

Collection item thumbnails display at the top of blog posts and individual events. These banners have a fixed height.

  • Events - No text displays in the banner.
  • Blog posts - The post title and one metadata element (date, category, author, or none) display over the banner image. Choose the metadata element with the Meta Priority tweak.

Styling and color overlay

For all banners, use the Banner Section tweaks to adjust the fonts, colors, and style for the buttons and text overlays.

The Banner Overlay Color tweak adds a color filter to all banner images or videos. It also appears on mobile if the video banner can't load and you haven't set a mobile fallback image.

Note: The Banner Overlay Color displays in the banner area while the banner image loads. This color displays even if the tweak is transparent.

More help with special banners

You may need to save and refresh the page for banner changes to appear.

As a best practice, page descriptions shouldn't be used for adding SEO-based content, as this content will display on the page. Visit Increasing your site’s visibility to search engines for alternate ways to increase site visibility.

For troubleshooting tips and best practices, visit Mobile display for background and banner images.

Next steps

Review our troubleshooting FAQ or see a list of all Site Styles tweaks.

Was this article helpful?
49 out of 119 found this helpful