ºÚÁÏÍø

Skip to main content
School of Medicine IT Web Guide

Content Boxes

Creating A Content Box

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: Repeatable Boxes
  6. Box Category: Image Boxes
  7. Box Style: Content Boxes
  8. Define the base settings
    1. Include Image Padding:  adds padding between the images and the edge of the box.
    2. Include Link (Global): selecting Yes will provide you with the choice of adding an optional link per box.
    3. Column Layout: choose the number of columns in which the icon boxes will be arranged.
      • °Õ³ó±ðÌýfour column layout only works on pages without left-hand navigation (e.g.: a web site’s home page). This is to prevent the content from getting too squished. Look at the examples to see what it looks like on a page with and without left-hand navigation.
  9. For each box:
    1. Select the Add New Box button.
    2. Image: Upload an image. This option only appears if you chose to include images in the base settings. Note: parts of the image may appear cropped due to the responsive design of the cell.
    3. Image Alt Text: this should be a short description about the appearance or function of an image. It is required for all images that provide meaningful information. View our accessibility documentation for more information.
    4. Include Link: include the url that you wish the box to link to. This option only appears if you chose to Include Link (Global) option in the base settings. It is strongly recommended to either link all boxes or none at all, to ensure a consistent user experience. In cases where both linking and non-linking boxes are present, a link icon will appear in the upper right-hand corner, indicating which boxes have links. This practice promotes accessibility by clearly distinguishing between linked and non-linked content.
    5. Use Rich Text Editor: enabling this option will provide a different editor that allows you to style text (bold, italic), create lists and add links.
  10. Click the Create Cell button.
  11. If you’re ready, you can display the Cell on your website.

 

Using the “Original Size” Setting

The following video covers the different image aspect ratio options available in Content Boxes. It assumes you already have a general understanding of how Cell placement and responsive design impact a Cell’s appearance, as well as why image clipping can occur. If you’re not familiar with these concepts, we recommend watching our Responsive Design video first.