Skip to main content

Adding a Banner Component to a Page

To create a Banner Image block component on a basic page, navigate to the "Edit Details" tab, and then down to the "Banner Region" to select "Add New Banner".

Preparing your Banner Image

This new banner block component will be saved in the Custom Block Library.  Prior to uploading the images you will be asked to provide a description to label the block, making it easy to find in the library as needed.

A new window will open to allow you to customize your block by adding a Title (uncheck the box "Display title" if you don't want it to display it on the page) and by clicking "Add Media".  

In order to make the Banner Image responsive to be seen well on any device, you will be asked to upload two different sizes of image.  The size requirements are provided here for both the Desktop and the Mobile images.

  • Desktop Images -  need to be at least 1200px by 360px to properly show on screens larger than 767px wide.
  • Mobile Images - need to be at least 767px wide by 431px tall to work with smaller screens.

Adding Text to your Banner Image

If you would like your banner image to include text that is different from the name of the current page (the default behavior), enter a Title and Subtitle for your image.  You can also choose how you would like this text to justify.  You can see below how the Title and Subtitle show on a Banner in the example below.

Adding your Banner Image Media

To continue, click "Add Media", then "Choose File".  This new Banner Image will also be saved to the Media Library for future use.  You will be required to add alternative text and a "Name" so you can easily locate this Banner image again in the Media Library for future use.