Image Hero Banner with Overlay

Optional Subtitle Available

This is where you can put content you would like to display in the jumbotron.

Create Banner Using Components

Component
You can add this content using a component. Learn about components

The page uses a jumbotron component. If you want your jumbotron to span the full width of the page (like the one on the top of this page) reach out to the IT Web team. We will add an editable region to the top of the page where you can still edit your jumbotron if needed. After we have changed your page follow these steps:

  1. Click the first green edit button on the page
  2. Delete the Jumbotron component already in place (this is a place-holder component and must be replaced or your page won't function properly and has the potential to break down the road)
  3. Add a new Jumbotron component and select your options (height, text location, heading/subheading/content/button) and save; please note that "partial darkening" creates a darker bar across the bottom of the image where the text will be placed, not checking this puts a light grey overlay over the entire image (these measures are to ensure accessibility)
  4. Save the edits you've made
  5. Click the second green edit button on the page and add your content (starting with H2 headings since your H1 heading is in the image overlay
  6. Save and publish

Create Banner Using an Asset

Asset
You can add this content using an asset. Learn about assets

If you want to create this banner using an asset reach out to the IT Web team. We will add an editable region to the top of the page where you can still edit your jumbotron if needed. After we have changed your page follow these steps:

  1. Create a gallery asset and only upload a single image
    • The title field for the image becomes the first heading in the banner
    • The description field for the image becomes the subtitle in the banner
  2. Save and Publish the asset
  3. Go to the page properties of the page you want to publish to and select "jumbotron" in the dropdown for banner type
  4. Click save at the bottom of the screen.
  5. Click the edit button and then click the green "banner" edit button
    • If there is no green "banner" edit button reach out to the IT Web team and we can add that to the page
  6. This will open a popup where you can select the gallery asset you previously created
  7. Save and Publish
jumbotron gallery options