The Full Width Callout pane 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 (see screen recording below). 

  1. Under the YOUR SITE - Site Administration dropdown, hover over Add new pane and select Full Width Callout to create a new pane.
  2. Provide a Title for the pane. Note: This is used for internal purposes only and is not displayed to visitors.
  3. 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 pane you notice that your image looks grainy or pixelated, try uploading a higher quality version.
    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).
    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. Add an Abstract that will serve as the primary text appearing over the full width image (see screen recording below for location).
  5. Optionally, add a Call to Action Link that will appear beneath your Abstract.
  6. Click Save to create your new pane.
  7. 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 > Full Width Callout 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. 

Screen recording of the Full Width Callout pane on a departmental page


  • No labels

Ways you can contact ITS or find information:

ITS Support Portal: https://support.swarthmore.edu
Email: support@swarthmore.edu
Phone: x4357 (HELP) or 610-328-8513
Check out our remote resources at https://swarthmore.edu/remote
Check our homepage at https://swarthmore.edu/its