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 Regular Page on any template. The Poster layout works particularly well as a banner with text overlay.

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 Regular 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. From 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 Description fields in the Basic tab. 

add-title-desc.png

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 Style Editor 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:

  • Refresh the page.
  • Check the template list to confirm your template supports banner text for that page type.
  • Open the Style Editor and check if your template has style options that hide the banner or banner text.
  • Review your template's Structure and style guide

Format special description text

These templates let you format the page description with headers and buttons for certain page types:

  • Bedford, Anya, Bryant, Hayden - Regular, Album, Blog, Events, and Products Pages
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued) - Regular, Blog, Products, and Events Pages

In these templates, use the steps in the previous section to add a description. How you format the 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.
  • The Extra Description Formatting tweak is checked in Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift.

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 the Style Editor:

  • Bedford, Anya, Bryant, Hayden - Use the Banner Section section of the Style Editor. The page title doesn't display.
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued) - Use the Page Title & Description section of the Style Editor. Ensure Extra Formatting is checked. Use the Hide Page Title tweak to hide or display the page title. 

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, 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 templates, 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. Depending on your template, either the page description or the page content displays as an overlay.

  • Bedford, Anya, Bryant, Hayden - Page description displays over the banner. Format it with headers and buttons.
  • 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 - Page content displays over the banner. To add banner text, add a Regular Page section and customize it with blocks.
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued) - Page description displays over the banner. Format it with headers and buttons
  • Pacific, Charlotte, Fulton, Horizon, Naomi - Page content displays over the banner. To add banner text, add a Regular Page section and customize it with blocks.

Style the text

Use the tweaks in the Style Editor 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

Every template has different options and style settings.

This list details the type of banner text available for each banner type. Templates are grouped by family.

Tip: For general information about each template's banner options, visit Adding a banner image.

Template

Page banner

Collection item banner

Adirondack

No text overlay

Blog posts, events, products - No text overlay

Bedford, Anya, Bryant, Hayden

Page description with special formatting options (buttons, headers).

Slideshow banners and Blog Page banners have other options.

Blog posts - Title, one metadata element.

Events - No text overlay

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

Open blocks area ("intro area")

Header content (such as site title and navigation links) can display over the banner.

 

Farro, Haute

 

Blog posts - Post title and up to four metadata elements

Five

Page title and description, the site title/logo and tag line, or just the banner image. Learn more.

 

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

(Discontinued)

Page title and description with special formatting options (buttons, headers).

Blog posts - Title, date, author

Events - Title, date, time

Products - Product name, description. Description has special formatting options (buttons, headers).

Montauk, Julia, Kent, Om

Page title and description.

 

Pacific, Charlotte, Fulton, Horizon, Naomi

Page title and description. Can also include site title and navigation.

 

Skye, Foundry, Indigo, Ready, Tudor

 

Blog posts - Date can display in a callout

Supply

 

Blog posts, events - No text overlay

Tremont, Camino, Carson, Henson

Page title and description as a page overlay.

 

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

Page title and description.

 
Was this article helpful?
14 out of 58 found this helpful