Image Banner Paragraph

The Image Banner paragraph is a great way to add visual impact to a page.

The Image Banner paragraph comes with optional fields for a superhead, headline, short body, and button. The Image Banner displays a long, wide image with text in a container on top of the image that is called an "overlay."  On mobile, the overlay moves below the image for better legibility.

You can use it as an image alone (with no text overlay) or you can use it to introduce page topics, to highlight important events or news, or to make an important statement about the page.

There are two different ways to use the Image Banner:

• In the Top Banner area. The Image Banner is one of two banner types that can be used in the Top Banner section of a Basic Page (the other banner type possible in this location is the Page Title Banner). The Top Banner always spans the full width of the page and appears above the page title on Stanford Sites and Stanford Sites Intranet.
• In any one-column section. Editors can use the Image Banner Paragraph together with other paragraphs to create visual interest and divide a page into sections. Banner Paragraphs placed inside the page will span the full width of the content area, which may be less than the entire browser window depending on other page elements such as sidebar menus.

This guide covers both uses of the Image Banner.

Image Banner editing basics

The Image Banner editing interface has two sections:

• Content. The Content section is where you will add all content for your banner It could be as simple as just an image, or you can add text and links to create an overlay. The fields are described below.
• Styles/Behavior. This section is where you will control some settings about the appearance of the banner and control the heading level of the banner. The appearance is described in this section. The header level options are described in the sections about using the Image Banner in different contexts. 

When adding an Image Banner to a section, both Content and Styles/Behavior appear on the same edit screen. When using the Image Banner in the Top Banner section, Content and Behavior are in separate tabs.

Content fields

• Image. We recommend an image that is at least 3000px wide. This image behaves responsively based on screen size. The ideal size for this image is 3000px by 1000px. 
• Superhead. This is an optional field. We recommend your superhead be 20 characters or fewer.
• Headline. This is an optional field. We recommend your headline be 70 characters or fewer.
• Body. This is an optional field. We recommend this be 250 characters or fewer. This field supports some formatting, like links and lists.  Learn more about working with text.
• Button. The banner supports a button link which can link to an internal or external web page.
  • URL. Add a URL by either typing in a complete URL for an external site (like https://www.stanford.edu) or start typing the name of any page on the site to select a page on the site.
  • Link text. Write description text for the link. This will appear on the button. Learn about writing accessible link text.
• Published. By default, the Image Banner is published. If you wanted to unpublish a banner while still keeping the rest of the page published, you can uncheck the box.

Styles/Behavior

In the Styles/Behavior section or Behavior tab you can modify the behavior of the Image Banner.

• You can change the heading level of Headline. By default, the Image Banner has a Heading 2 (h2). Cases where you should change the heading level are described in sections below.
• You can hide the Headline (it will still appear in the page markup).
• You can set the overlay to appear on the left or the right of the image.

If you have a subtheme on Stanford Sites, this tab might also contain other options for your Image Banner.

Add an Image Banner in a layout section

Image Banners can be used on any content that has a 1-column layout option (Basic Page, News, Events, etc.). On a Basic Page, if you have the Full-Width Layout selected, the banner will span the full width of the browser window. For Basic Pages with a sidebar and all other content types, it will span the full width of the content area.

To add an Image Banner to layout section:

1. Go to an existing 1 column layout section or create a new one

2. Select Image Banner from the palette of paragraph options
    

   
3. Add the image and any of the optional fields you wish to use
4. Click Save

How to choose a heading level for your Image Banner in a layout section

Layout sections all appear under the page title. By default, Image Banners use a Heading 2 (h2) for the Headline field. The following are cases where you would want to change that behavior in the Styles/Behaviors section:

• If the Image Banner is part of content below an already existing Header 2 (h2) you should select Heading 3 (h3)
• If the Image Banner is part of content below an already existing Header 3 (h3) you should select Heading 4 (h4)
• If the Image Banner has only a headline and no subhead, description, and/or button, you should select Splash Text
• If the Image Banner has a description and/or button, and you do not wish to display the Headline, you can choose the option to Visually Hide Heading

Please note: heading levels are important for the accessibility and readability of your content. The heading level should only be changed to improve the structure of your page, never for size/style reasons.

Add an Image Banner in the Top Banner area on a Basic Page

The Top Banner area on a Basic Page appears above the page title and sidebar navigation, which means that a banner in that section will appear full-width even if your page has a sidebar. If you use an Image Banner in this area, you will need to change the behavior of the header so that it is appropriate for the position on the page.

To add an Image Banner in the Top Banner area:

1. Select Add Image Banner from the drop-down 

1. Add the image and any of the optional fields you wish to use
2. Go to the Behaviors tab and select "Splash Text." This will remove the Heading 2 (h2) tag around the Headline and replace it with a similarly-sized style. This will ensure proper heading order for your page.