Page Comparison

The Double 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

...

item

...

item

...

1. Title (required)

2. Double Image Callout Item - Callout Title

3. Double Image Callout Item - Image

4. Double Image Callout Item - Label

5. Double Image Callout Item - Abstract

6. Double Image Callout Item - Call to Action Link

...

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 component type is designed to support two images side-by-side (see above). To add the left callout to your new panecallouts items (repeat below twice for left and right items):

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

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

      1. If your using an existing image has already been uploaded to in the system:

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

         2. Navigate to the fileimage under Select Image, clicking on the title the radio button to the left of the thumbnail 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).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

         :

         1. Click the Choose File button , 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 Upload the Select Image button.

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

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

   5. 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.