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

Adding text to banners

Many templates support page banners, where you can add an image, color, or video to the top of the page to introduce your content.

In most templates, you can add separate text that displays over the banner image. Because it adapts to fit any screen size or mobile device, this is a great way to add text to your banner.

Tip: As an alternative to our built-in banner options, add an Image Block to the top of a Layout Page on any template. The Poster layout works particularly well as a banner with text overlay.

Watch a video

Before you begin

Before adding text to your banner, learn how to add a banner image.

We don't recommend using a banner image that has text within the actual image file for a couple reasons:

  • Computers can't read this text, so search engines won't index it for results.
  • When your banner changes shape to adapt to different browser widths, it's likely that parts of the text will crop, as shown below.

Types of banner text

Each template has its own banner options. Here, we'll show you the most common types of banner text and recommend a few templates for specific effects. See options by template below for the banner text your template supports.

Page banners

Page banners display at the top of pages, such as Blog Pages or Layout Pages. Most templates create an overlay from the page's title and description.

Recommended templates: Five, MontaukPacificYork (Banner options by template)

Special page banner descriptions

In some templates, you can add headers and buttons to banners using the page descriptions.

Recommended templates: Bedford (Banner options by template)

Collection item banners

Collection items are individual blog posts, events, and product items. In some templates, information about the item will display over the banner.

Recommended templates: Bedford, Farro, Skye (Banner options by template)

Intro area banners

Some templates support a header area you can customize with blocks. This is the most versatile header, allowing for a wide range of content and many header sizes.

Recommended templates: BrineMercer, Nueva (Banner options by template)

Index Page banners

For templates that support a stacked Index Page, each section creates a banner on the page. Depending on your template, either the page description or the page content displays as an overlay.

Recommended templates: BedfordMercerPacific (Banner options by template)

Add page banner text

Most templates with page banners display the page's title and description over each banner.

Note: For templates that display the page description in the banner, page descriptions shouldn't be used purely for adding SEO-based content (as can be done in other templates). Using page descriptions for the banner won't have a negative effect on SEO.

Step 1 - Add page title and description

  1. In the Home Menu, click Pages.
  2. Hover over the page title in the left panel and click the gear-icon.
  3. Add text to the Page Title and Page Description fields in the Basic tab.
Tip: To display a different title in search results and social shares, add an SEO title.

Step 2 - Add a thumbnail (recommended)

Some templates require a banner image or video for the text to display. In the Media tab, add a thumbnail image (or video URL in supported templates).

Step 3 - Save and refresh

Click Save, then refresh the page. Banner changes sometimes don't appear in the site preview until you refresh the page.

Step 4 - Preview

View your banner in your site's preview and, if needed, use the Site Styles panel to adjust the fonts and colors.

Tip: You can create extra height in most templates by adding blank spaces to the description. Press the Return or Enter key around the description text to expose more of the image. This can help fix cropping issues and expand the length of the banner for a dramatic effect.

If your banner doesn't display, try these troubleshooting steps:

  1. Refresh the page.
  2. Check the template list to confirm your template supports banner text for that page type.
  3. Open Site Styles and check if your template has style options that hide the banner or banner text.
  4. Review your template's Structure and style guide.

Format special description text

In the Bedford family you can format the page description with headers and buttons for certain page types:

  • Layout, Album, Blog, Events, and Products Pages

In these templates, use the steps in the previous section to add a description. How you format the Page Description text determines how it displays:

  • Bold text formats as a header.
  • Text without formatting creates regular description text.
  • To add a button to the banner, add a link or links to the last line.

Linked text only creates a button if:

  • The linked text isn't bolded.
  • There's no other text or line breaks below the link.

In the example below:

  • "Design is not a luxury" will turn into the header.
  • The "Good design..." text will turn into description text.
  • The "Learn More" link will turn into a button.

After you save and refresh, style the header, description, and button in Site Styles:

  • Use the Banner Section section of Site Styles.
  • The page title doesn't display.

Add collection item banner text 

Collection item banners typically create their overlay text from the settings for that blog post, event, or product. Use the links below to adjust the settings for each item type:

Add intro area overlay text

In the Brine family, the intro area content displays over the banner. You can customize this area with blocks, such as a Text Block or Button Block.

Add Index Page banner text

In a stacked Index, each section creates a banner on the page. Either the page description or the page content displays as an overlay in these template families:

  • Bedford - Page description displays over the banner. Format it with headers and buttons.
  • Brine - Page content displays over the banner. To add banner text, add a Layout Page section and customize it with blocks.
  • Pacific - Page content displays over the banner. To add banner text, add a Layout Page section and customize it with blocks.

Style the text

Use the tweaks in the Site Styles to adjust the fonts and colors. Banner style tweaks will usually affect every banner on your site.

For more information, review the "Structure and style" page in your template's guide.

Banner text options by template

Here are the banner text options in these template families:

Template family Page banners Collection item banners
  • No text overlay
  • Blog posts, events, products: No text overlay
  • Blog posts:  Title, one metadata element.
  • Events:  No text overlay


  • Open blocks area ("intro area")
  • Header content (such as site title and navigation links) can display over the banner.


  • Blog posts: Post title and up to four metadata elements


  • Page title and description, the site title/logo and tag line, or just the banner image. Learn more.
  • Same as page banners 


  • Page title and description.






  • Blog posts, events: No text overlay




  • Page title and description.
Was this article helpful?
4 out of 29 found this helpful