A Hero image is designed to be the first item on your page. They are typically used for homepage and landing page designs. To use a Hero image, make sure ‘No Sidebar’ is selected in the dropdown under ‘Sidebar’. Do not add content to the Body field.  

Image
screenshot of blank body field
Students cheering at a football game

This is a title. It is required

To see more examples of the Hero image paragraph in action, visit the Hero image demo page.

  1. In the Paragraph section, click "Add Paragraph" then select "Hero" from the Paragraphs menu. 
     

    Image
    Paragraph section with Add paragraph button
  2. Select an option from the ‘Theme’ dropdown. This will set the colors for your buttons and text. 
  3. Select an option from the ‘Text and Button Alignment’ dropdown. This option will set the position of your title and button elements. 
  4. Add a title.
  5. Upload an image. Images must be larger than 1152x768 pixels. Keep in mind that the Hero image will extend across the entire width of your browser screen. High resolution images can be found in the Illinois Image Database. You are required to add Alternative text to your image, this text should describe what the image is for screen readers. Next, you can adjust the position of the image crop or you can click on the image to keep the default settings.
    Screenshot of image upload field
  6. Buttons are optional and you can add up to three. Buttons require both a link and Link Text. You can link to an internal page by typing the title, then selecting it when the field autocompletes. To link to an external page, paste the entire URL into the URL field. 
    Screenshot of button settings with autocomplete field highlighted