黑料网

Skip to main content
School of Medicine IT Web Guide

Hero Image

Creating A Hero Image

Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.

  1. Determine where the Cell will be used.
  2. In the Dashboard, select Cells in either the top or left-hand navigation.
  3. Select the Add New button.
  4. Cell Name: provide a descriptive name so that site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.
  5. Layout: Single Blocks
  6. Block Category: Image Blocks
  7. Block Style: Hero Image
  8. Cell Header: this is the main title of the Cell Text.
  9. Cell Text: this is the smaller text that displays below the Cell Header.
  10. Image: this is an optional, small, circular image that displays in front of the Background Image. A square image is ideal here. If a landscape or portrait image is used, cropping will occur and the center of the image will display.
  11. Background Image:聽 this is the larger background image that displays in the Cell.聽Parts of the image may appear cropped due to the聽responsive design of the cell.聽View our Image documentation for information on where to find images, image size recommendations and more.
    • Background images may become overly large if allowed to fill the entire space of their container (such as the main content area or featured content sections). To maintain an optimal visual balance, certain shape options鈥攍ike square, circle, and portrait鈥攚ill be constrained to 75% of the container鈥檚 width when displayed in the main content area, and 50% in full-width areas.
  12. Text Overlay: allows you to show/hide the Cell Header and Cell Content which appears in front of the Background Image.
  13. Foreground Image: allows you to show/hide the small circular image that appears in front of the Background Image.
  14. Background Image Shape:
    1. Original:聽this option uses the original aspect ratio of the image. For example, if you use a portrait image, it will display as such.
    2. Landscape:聽this option has 5 different aspect ratios to chose from.
      1. Background Image Vertical Alignment: parts of the background image may not display depending on the size of a viewers browser window. View our documentation on responsive images to learn more about this. This setting allows you to set the starting position of the image vertically. For example, setting this option to Top gives priority to the top part of the image. If any vertical clipping occurs, it will happen to the bottom portion of the image.
  15. Background Color: allows you to set the color of the box that the Cell Header and Cell Text display in.
  16. Click the Create Cell button.
  17. If you’re ready, you can display the Cell on your website.