Banner Images

Banner Images allow you to highlight an image, either at the very top of your page known as the full-width region, or intermingled with other content in the main region. They can be formatted in several ways, including various options for overlays as well as different amounts of additional information, such as text and/or links. This guide explains how to add a Banner Image to your page, and what the various styling options can do.
To see all of the formatting variations in action, visit our  Colorful Theme  and  Traditional Theme  Reference Pages.  
All of these Banner Image styles can be added to the full-width region of your page, which will display at the very top above the page title.  Spotlight(s)  are the only other type of component that can also be used in the full-width region. 
Jump to: 
﻿ Banner Image⁠ ﻿
﻿ Banner Image with Full Overlay and Text⁠ ﻿
﻿ Banner Image(s) with Partial Overlay and Text⁠ ﻿
﻿ Banner Image with a Text Box⁠ ﻿
﻿ Video Tutorial⁠ ﻿
Banner Component TypesBanner ImageThis is the simplest type of media banner. It is just an image or video that spans the entire width of your page, with no text or links. The Banner Image can be tall or short and has the same appearance on all sites, regardless of theme or color palette.
﻿
A Banner Image is shown with with the "short" option. A Banner Image is shown with with the "short" option. 
﻿
﻿
The same Banner Image is shown with with the "tall" option. The same Banner Image is shown with with the "tall" option. 
Formatting and Styling a Banner Image﻿
The editing interface showing a Banner Image. The dropdown option for "height" is shown below the button to "add media."The editing interface showing a Banner Image. The dropdown option for "height" is shown below the button to "add media."
Add MediaThis is where you'll upload your image or video. Only one media item is allowed in this component style.
Height You can format Banner Images as "tall" or "short" by using the dropdown menu. Choose a style based on the  image size and proportions⁠ . 
Banner Image with Full Overlay and TextThis type of Component includes a single image with a semi-transparent overlay covering its entirety. If desired, text and/or a link can be added. 
On  Colorful  sites, the text will be left-aligned with an oval link button; on  Traditional  sites it will be center-aligned with a square link button.
﻿
Banner Image with Full Overlay and Text on the Colorful Theme. The title, additional text, and link are left aligned.Banner Image with Full Overlay and Text on the Colorful Theme. The title, additional text, and link are left aligned.
﻿
Banner Image with Full Overlay and Text on the Traditional Theme. The title, additional text, and link are centered.Banner Image with Full Overlay and Text on the Traditional Theme. The title, additional text, and link are centered.
Formatting and Styling a Banner Image with Full Overlay and Text﻿
Editing interface of the Banner Image with Full Overlay and Text component. From top to bottom, the options include: Add media, title, body, and link.Editing interface of the Banner Image with Full Overlay and Text component. From top to bottom, the options include: Add media, title, body, and link.
Add MediaThis is where you'll upload your image or video. Only one media item is allowed in this component style.
TitleText here is optional, but if included will render as a Heading 2.  
BodyAdditional text is also optional. A limited text toolbar is available to help you style your text with options for: bold, italic, heading level (which should start at H3 if used at all), vertical line, linked text, and bullet or list styling. Text in this area is limited to 200 characters.
LinkOne link can be added here and will be styled as a button. Be descriptive but concise, and don't use "click here" or "more info." 
Banner Image(s) with Partial Overlay and TextThe Partial Overlay Banner style displays as a large image with optional text and/or a link. It has a gradient overlay that fades from black to transparent across the image, providing enough contrast for the text to be legible while allowing a large portion of the image to also remain visible. The gradient can begin from the left or the right. This Component can include a single or multiple images that a user can scroll through.
The link appearance differs slightly between the Colorful and Traditional themes. Check out all of the various styling options for this Component on our  Colorful  or  Traditional  theme reference sites. 
﻿
Banner Image(s) with Partial Overlay shown with additional text and a link, on the Colorful Theme. The gradient is styled right to left.Banner Image(s) with Partial Overlay shown with additional text and a link, on the Colorful Theme. The gradient is styled right to left.
﻿
Banner Image(s) with Partial Overlay shown with additional text and a link, on the Traditional Theme. The gradient is styled right to left.Banner Image(s) with Partial Overlay shown with additional text and a link, on the Traditional Theme. The gradient is styled right to left.
Formatting and Styling a Banner Image(s) with Partial Overlay and Text﻿
The editing interface of a Banner Image(s) with partial overlay and text. Top to bottom, the fields are: image, Title, Body, Link, Content alignment, and a button to add another image.The editing interface of a Banner Image(s) with partial overlay and text. Top to bottom, the fields are: image, Title, Body, Link, Content alignment, and a button to add another image.
Add MediaThis is where you'll upload your image or video. If you have multiple pieces of media, you will upload them one at a time. Add additional media by clicking " Add banner image with overlay and text⁠ " at the bottom of the component.
TitleText here is optional, but if included will render as a Heading 2.  
BodyAdditional text is also optional. A limited text toolbar is available to help you style your text with options for: bold, italic, heading level (which should start at H3 if used at all), vertical line, linked text, and bullet or list styling. Text in this area is limited to 200 characters.
LinkOne link can be added here and will be styled as a button. Be descriptive but concise, and don't use "click here" or "more info." When multiple Banner Images(s) with Partial Overlay and Text are used, it is critical that the link text of each be unique. For example, if you are highlighting two upcoming talks, you would not want them to both read, "RSVP here." Instead, use more descriptive language, such as "RSVP to the Distinguished Lecture" and "RSVP to the Department Seminar."
Content AlignmentChoose if the text should be aligned on the left or right of the image. Whichever side is chosen will have the darkest overlay that gradually fades out across the image.
"Add Banner Image with overlay and text" Button: Option to create a carousel of imagesIf you'd like to add additional images or information to this component, click the button to "Add Banner Image with overlay and text." This will create another section where you can add information. If multiple are created, they will be stacked in a carousel so users scroll between them. 
Banner Image(s) with Text BoxThis type of Component includes one or more media items that the user can scroll between. There is a partially transparent text box covering a portion of the image. If desired, a link can be added. 
There are considerable differences in the appearance between the Colorful and Traditional themes. Check out all of the various styling options for this Component on our  Colorful  or  Traditional  theme reference sites. 
Banner Image(s) with Text Box: Colorful Theme﻿
Banner Image(s) with a Text Box is shown on the Colorful theme, A box of text appears over the left corner of the image, and extends past the bottom of the image. An additional gray layer with accent color appears behind the image. Banner Image(s) with a Text Box is shown on the Colorful theme, A box of text appears over the left corner of the image, and extends past the bottom of the image. An additional gray layer with accent color appears behind the image. 
Banner Image(s) with Text Box: Traditional Theme﻿
Banner Image(s) with a Text Box is shown on the Traditional theme, A box of text appears inside the image on the left.Banner Image(s) with a Text Box is shown on the Traditional theme, A box of text appears inside the image on the left.
Formatting and Styling a Banner Image(s) with Text Box﻿
The editing interface for a Banner Image(s) with Text Box is shown. From top to bottom, the fields are: add media, title, body, link, and a button to "add banner image with text box."The editing interface for a Banner Image(s) with Text Box is shown. From top to bottom, the fields are: add media, title, body, link, and a button to "add banner image with text box."
﻿
Add MediaThis is where you'll upload your image or video. If you have multiple pieces of media, you will upload them one at a time. Add additional media by clicking " Add banner image with text box⁠ " at the bottom of the component.
TitleText here is optional, but if included will render as a Heading 2.  
BodyAdditional text is also optional. A limited text toolbar is available to help you style your text with options for: bold, italic, heading level (which should start at H3 if used at all), vertical line, linked text, and bullet or list styling. Text in this area is limited to 200 characters.
LinkOne link can be added here and will be styled as a button. Be descriptive but concise, and don't use "click here" or "more info." When multiple Banner Images(s) with Text Box are used, it is critical that the link text of each be unique. For example, if you are highlighting two upcoming talks, you would not want them to both read, "RSVP here." Instead, use more descriptive language, such as "RSVP to the Distinguished Lecture" and "RSVP to the Department Seminar."
"Add Banner Image with text box" Button: Option to create a carousel of imagesIf you'd like to add additional images or information to this component, click the button to "Add Banner Image with text box." This will create another section where you can add information. If multiple are created, they will be stacked in a carousel so users scroll between them. 
Video TutorialThe relevant section spans from 6:09-10:32.
﻿
https://youtu.be/vlapRoM5thU?si=qBDnoZEFVmRNqlpv&t=369
Video tutorial demonstrating how to add a Banner Image to the full-width region.Video tutorial demonstrating how to add a Banner Image to the full-width region.
﻿