Hero Unit Block

Hero Unit block

Hero Unit blocks are large visual elements that are meant to grab attention and showcase key content. Many options for layout make it extremely versatile. You can enter any amount of text, and have any quantity of linked buttons at the bottom. It will stretch or shrink to fit the region in which it is placed. The background can be an image or a block of color.

Demo: Hero Unit Block

1

Create a Hero Unit Block

  1. Go to the Shortcuts toolbar and select Blocks.
  2. Click on Add Block at the top of the page.
  3. Select Hero Unit from the list of options.

Add a Hero Unit block

2

Add Hero Unit Content

Label: a name used to uniquely identify the block.
Title (optional): a title that will display at the top of the Hero Unit block when placed on a page.

Text Tab

  1. Headline (required): the large text.
  2. Text (optional): the small text.
  3. Link (optional): text and URL (can have several); will be displayed as buttons.

Text fields for Hero Unit

Design Tab

  1. Background Image: Visitors on older browsers will see a cropped version of the image, while visitors on newer browsers will see an image scaled to the size of your content. Background images will cover the background color. If your background image does not have enough contrast with the text color, apply an overlay to improve readability.
  2. Background Color: create a block of color.
  3. Size Priority: choose Text or Image to control the overall size of the hero unit. Selecting text as the priority may crop the image.
  4. Size: Large or Small. This choice affects text size. Use Large if block will be placed in wide areas such as Intro, Slider or Content region. Use Small for narrower areas, such as the sidebar or After Content columns.
  5. Text Color: choose one that contrasts with your graphic.
  6. Link Color: this is the button color. Choose a color that contrasts with your graphic.
  7. Text Align: left, right, center, left half or right half.
  8. Click Save.

Design fields for Hero Unit

3

Place Hero Unit Block

Hero Unit blocks work just like other blocks and can be placed in one of the various  Content/Layout Regions on the site page.

Related: How to Place Blocks

Related Articles