Double Image Callout Component

About

The Double Image Callout is a full-width component type used to display a set of two clickable images with overlaid text. This component type is great for grabbing users' attention and driving traffic to a particular part of your site. 

Elements

1. item

2. item

3. item

Examples

Step-by-step Instructions

1. Under the YOUR SITE - Site Administration dropdown, hover over Add new pane and select Callout on Image to create a new pane.

2. Provide a Title for the Callout on Image.

3. This pane type is designed to support two images side-by-side (see above). To add the left callout to your new pane:
   

   1. Enter Callout Title to provide a title to your callout (e.g., "Callout on Image Title" in the example above).

   2. Add the Image (landscape orientation is optimal).

      1. If your image has already been uploaded to the system:

         1. Click the File Browser tab to launch the browser pop-up window.

         2. Navigate to the file, clicking on the title to select it.

         3. Double click the title or use the Insert file button in the upper left.

         4. Enter Alternate text describing the contents of the image (used by screen readers, search engines, or when the image cannot be loaded).

   3. 1. If you’re adding a new image to the system:

         1. Click the Choose File button to browse your local system for the file, select it, and click the Upload button

   4. Optionally, add a short Label to give further context to the callout. Example: “Sustainability” for a callout about composting on campus.

   5. Optionally, add an Abstract that will appear at the bottom of the image (see example above).

   6. Optionally, add a Call to Action Link that will drive traffic to some part of your site. 

4. Complete the above steps for the right callout. 

5. Click Save to create your new pane.

6. To place the newly created pane on your page:

   1. Click Arrange Panes.

   2. Click the little grey gear icon in the upper left-hand corner of the Additional Content region of your page, and then click Add content.

   3. Find and click on your newly created pane under Existing Site Panes > Callout on Image Panes. You can now arrange the order of your panes by dragging and dropping the item. 

   4. Click Save to save a draft of your page. You can set the Moderation state to Published if you would like to publish the pane to your page.