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 most pages and overlay them with customizable headers, text, buttons, and colors. On certain pages, you can also create slideshow banners to display multiple images.

Before you begin

  • You can stack multiple Regular 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 Regular, Album, Blog, Event, and Products Pages.

  1. In the Pages panel, add an Album, Blog, Event, Regular, 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).
  5. Save and refresh the page.
Tip: Video banners don't display in mobile. Set a mobile fallback image to display in its place.

Text overlay

How you format the description field 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.
Note: If the link includes bold text, or there are other lines below the link, it won’t format as a button.

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 Regular Page by adding a Slideshow Gallery Block as the first block on the page.

  1. In the Pages panel, click the + icon, then click Page (or select an existing Regular Page).
  2. Hover over the page preview and click the Edit annotation.
  3. Click an Insert Point at the top of the page, above all other page content, and add a Slideshow Gallery Block.
  4. In the Content tab, add your images.
  5. To add overlay text for each image added in the Upload Media tab, click the image's and add text to the description field (see formatting tips below). If you connected an existing gallery, you'll need to update the images within the Gallery Page.
  6. In the Design tab, choose your slideshow's settings. For best results, ensure Automatically Crop Images is checked.
  7. Click Apply, Save, and refresh the page.
Note: Slideshow banners will override banner images and videos.

Use the options in the Design tab to show navigation arrows, automatically crop images, and determine how the images transition between slides. Titles will always be centered. Thumbnail navigation doesn't display.

Note: Only the Gallery Block's Autoplay, Controls, and Auto Crop settings are obeyed. Image titles don'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
  • Mobile - 300 pixels

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 Regular, Album, Blog, Event, and Products Pages.
  • Video banners don't display in mobile. Set a mobile fallback image to display in its place.
  • Will display the special text overlay (text added to the page description).

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

  • Regular 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 in place of video banners in mobile if 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 Style Editor tweaks.

Was this article helpful?
32 out of 67 found this helpful
Bedford special banners