• Purpose and use
• Best practices
• Adding an image carousel
• Adding content to your image and content carousel
• Image size recommendations

Purpose and use

The Image and Content Carousel is a responsive photo slideshow that allows for navigating between different images with text and a link included. This page element is not to be confused with the Image Only Carousel or the Hero Carousel.

This feature is only available in the One Column Content Layout option. The space and images required would not translate to the smaller two and three column layouts.

Best practices

• Images used should be the same size (height x width) to ensure consistent display. The maximum width x height to fill the space is 900x600 pixels.
• Images smaller than 900x600 pixels or larger dimensions that are not proportionate will automatically scale to fit the 588x392 space.
• Image heavy carousels can be slow to load on slower mobile networks, creating a poor user experience. We recommend only using them on a few, primary pages.
• Research shows carousel images beyond the first three receive very few clickthroughs. We do not recommend using a carousel with more than three images.
• Note: The Image and Content Carousel does not automatically rotate. This is a theme decision to address accessibility concerns that a carousel element can create.

Adding an Image and Content Carousel

1. Navigate to the page on which you want to add an Image and Content Carousel.
   
   
2. Scroll to the Primary Content Area and the Layout on which you want to add an Image and Content Carousel.
   
   
3. At the bottom of the Layout, click on Add Page Element
   
   
4. On the Page Element list, click on Image and Content Carousel
   
   
   
   

Adding content to your Image and Content Carousel

Once the Image and Content Carousel is added, you will see the following options on your screen:

• Image: Click the Add Image button. You can select an image from your Media Library by navigating to the image and clicking on it and then clicking the Select button in the lower right corner. You can also add a new image from your computer by clicking on the Upload Image tab in the upper left-hand corner. In the image below, the image appears on the left (cranberries).
  
  
• Content Title: You can add text here and it will be the title for the carousel image. It appears to the right of the image, at the top of the panel. In the image below, the title appears as "Test."
  
  
• Content Panel: You can add up to 150 characters of text here to describe your image. It appears to the right of the image, below the title. In the image below, the panel appears as "test 2".
  
  
• Button Link: Adding a URL here will create a button. It appears to the right of the image, below the content panel. In the image below, it is the "Learn More" button.
  
  
• Button Text: This is a customizable text field that allows you to change the text of the button from "Learn More" to whatever you want. We recommend keeping button names short and concise. 

Image size recommendations

The recommended image size for the Image and Content Carousel is: 900x600 pixels