Callout example

EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Custom Title

Description or teaser for this particular Callout.

Callout Link

What is an Callout?

The Callout component allows you to place images and text either on alternating sides of the page or vertically.

How to add an Callout

  1. Click the edit link at the top of the page

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 
  3. Click the plus icon.

    Example of the plus icon with a red square around the icon
  4. Select Callout from the menu

    Example of the callout menu select

Content 

  1. Click Add media. Select the appropriate image or upload the image to the Image Library. Recommended Image Dimensions: 3:2 - Maximum image size is 4MB.

    Add media
  2. Add a Title.

    Example of the title field on a callout component
  3. Add Teaser text.

    Example of the Teaser text filed on a callout component
  4. Add an internal page or external link.
    Note: This is optional. 

    Example of the URL field
  5. Add the Button text.
    Note: This is optional.

    Example of the link text field


     

Styles

  1. Toggle to the Styles tab. 

    Example of the Styles option selected
  2. Select the appropriate Layout Option based on your desired layout.  (see below for examples).

    Example of the options under styles for a callout
  3. Select the amount of additional space you would like above the component. 
  4. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Example of the callout margin section

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined

Style options 

Example of a Standard Callout Component

  1. Layout Options settings used to create this component are: Callout style: Normal,  Orientation: Stacked and Direction: Normal
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Custom Title

Description or teaser for this particular Callout.

Callout Link
  1. Layout Options settings used to create this component are: Callout style: Normal,  Orientation: Horizontal and Direction: Normal
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Custom Title

Description or teaser for this particular Callout.

Callout Link

Example of a Quote Callout Component

  1. Layout Options settings used to create this component are: Callout style: Quote,  Orientation: Stacked and Direction: Normal
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Custom Title

Description or teaser for this particular Callout.

Callout Link
  1. Layout Options settings used to create this component are: Callout style: Quote,  Orientation: Horizontal and Direction: Normal
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Custom Title

Description or teaser for this particular Callout.

Callout Link

Example of Direction Normal Vs Reverse

EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Custom Title

Description or teaser for this particular Callout.

Callout Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Custom Title

Description or teaser for this particular Callout.

Callout Link