Full Width Callout Component

The Full Width Callout component inserts an image that occupies the entire width of your page overlaid with a short abstract and optional call to action link, both of which will scroll into view with a special transition effect.

Elements

1. Title (required, not displayed)

2. Image (required)

3. Abstract

4. Call to Action Link

Examples

Step-by-step Instructions

4. Provide a Title for the component. Note: This is used for internal purposes only and is not displayed to visitors.

5. Add the Image. Landscape orientation is optimal. Additionally, since the image is going to be stretched across the entire width of the screen, make sure the image quality is sufficient enough to look good on larger screens. If after previewing your component you notice that your image looks grainy or pixelated, try uploading a higher quality version.

   1. If using an existing image already in the system:

      1. Click Insert an Image button to launch the browser pop-up window.

      2. Navigate to the image under Select Image, clicking on the radio button to the left of the thumbnail to select it.

      3. Press the Select Image button in the bottom left.

   2. If using a new image:

      1. If you’re adding a new image to the system, click the Insert an Image button to launch the browser pop-up window button.

      2. Click Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.

6. Add an Abstract that will serve as the primary text appearing over the full width image.

7. Optionally, add a Call to Action Link that will appear beneath your Abstract.