Hero Blocks

Page

Hero blocks are an easy and attractive way to feature an image with the option to add a short caption. In this tutorial, you will learn how to edit Hero blocks. 

How to edit 

  1. Find the Hero Block you wish to edit
  2. Hover over the upper right hand corner and a gear icon will appear
    Gear highlight
  3. Click “Edit Block”
    Hero edit block option
  4. Edit the field(s) you wish to change. You can edit the Label, Title, URL, Image, Icon, Caption Color, Caption Position, and Text Size. If you have questions about the Label, Title, Icon, or Text Size fields, please refer to our Content Cards guide.
    Below, you will find more information about the caption options provided to you. 
    Hero edit page
  5. Click “Save.”

Image and Captioning Options

Image

Hero blocks are meant to feature an image which will always be displayed at full size.They can have a small caption that will display as a button (as seen above). If you would rather feature more text with a picture as the background, consider instead using a Hero Expanded block
Due to the nature of these blocks, the recommended image width is 1500px. If you need guidance on how to add an image, please refer to our Images and Photos page

Captioning Options

While the caption is not the star of this show, there are a variety of different options to display your them in relation to your hero image. At the bottom of this page, you will find the styling options for Hero blocks.

The caption color indicates what the caption's box will look.


The caption position indicates where on your image the caption will appear. 


You also have the option to change the text size if you wish. 

 Here is a preview of the available options. 

If you’re unsure of the differences between Hero blocks and Hero-Expanded blocks, check out our comparison page to find out which will work best for you.

If you have questions about this tutorial, please contact websupport@iastate.edu.

Category: