Full-Width Image Carousel

For use in Full-Width containers only.

The Full-Width Image Carousel will scroll through up to five slides to tell your story. It includes the option for one or two links within the text overlay to the right of an 1800x720 image.

Full-Width Image Carousel screenshot

Visual demo

Widget standards

A layout is needed for this widget.

Do:

Desktop Image Size: 1800x720 – Ratio: 5:2.
- The focal point of the image should be to the left to allow room for text and links to the right.
Use 2-5 slides per carousel.

Do NOT:

Stack multiple carousel layouts/sets on top of each other.
- For example, a carousel with 5 slides then another carousel with 5 slides directly below.

Written instructions

1. Drag the "Full-width-background-carousel-layout" into a full-width container.

Screenshot of: Drag the

2. Add the Carousel widget. Add up to five Carousel widgets to the "Full-width-background-carousel-layout."

Screenshot of: Add the Carousel widget. Add up to five Carousel widgets to the

3. Click "Create content."

Screenshot of: Click

4. Template: Select "Carousel."

Screenshot of: Template: Select

5. Heading: Enter heading text. (Recommended max = 75 characters)

Screenshot of: Heading: Enter heading text. (Recommended max = 75 characters)

6. Description: Enter description text. (Recommended max = 150 characters)

Screenshot of: Description: Enter description text. (Recommended max = 150 characters)

7. Image: Select an 1800x720 image that has been optimized and uploaded to the Digital Asset Management system (DAM).

Screenshot of: Image: Select an 1800x720 image that has been optimized and uploaded to the Digital Asset Management system (DAM).

8. Primary Link Text: Enter your "Call To Action" link text. (Recommended max = 30 characters)

Screenshot of: Primary Link Text: Enter your

9. Link ADA title: Enter your link text for compliance with the Americans with Disabilities Act (ADA).

Screenshot of: Link ADA title: Enter your link text for compliance with the Americans with Disabilities Act (ADA).

10. Link to: Choose the appropriate selection. For pages within CMU's website, click "Select" to search for or navigate to the page you want to link to...

Screenshot of: Link to: Choose the appropriate selection. For pages within CMU's website, click

11. OR for an external URL, enter the full URL of an external page. NOTE: links to external pages also require that "Display Speedbump" is checked.

Screenshot of: OR for an external URL, enter the full URL of an external page. NOTE: links to external pages also require that

12. Repeat steps 8-11 for the secondary link.

Screenshot of: Repeat steps 8-11 for the secondary link.

13. Save your changes.

Screenshot of: Save your changes.

Tip: Repeat steps 1-13 for each additional slide added to the carousel.

Save and send

If you'd like to continue working on this page, but need to save your progress, click Save as Draft.
If you're finished making changes to the page, and the page is ready for review, click Send for Approval.

Screen capture of the buttons for Send for Approval and Save as Draft in Sitefinity

Table of Contents