Carousel example

What is a Carousel?

The Carousel allows you to create a slideshow gallery of images, a stationary text box, and an optional button. We recommend using a maximum of four images so the Carousel does not become too busy.

How to add a Carousel

  1. Click the edit link at the top of the page

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 
  3. Click the plus icon.

    Example of the plus icon with a red square around the icon
  4. Select Carousel from the menu

    Choose a carousel component

Content 

  1. Click Add media. Select the appropriate images or upload the images to the Image Library. Recommended Image Dimensions: 21:9 - Maximum image size is 4MB

    Add media
  2. Add a Title.

    Slider title
  3. Add Text.

    Slider text
  4. Add a URL (internal page or external link).
    Note: This is optional. 

    Slider URL
  5. Add the Link text.
    Note: This is optional.

    Link text


     

Styles 

  1. Toggle to the Styles tab. 

    Example of the Styles option selected
  2. Select the appropriate Styles based on your desired layout.  (see below for examples).
  3. For the Overlay option, select No if you would like most of the text to appear below the image.

    Select an overlay
  4. For the Placement option, select Top if you would like the button to appear below the title. 

    Choose the placement
  5. Select the amount of additional space you would like above the component. 
  6. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Select the top and bottom margin

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined

Style Options

Example of a Carousel with no button 

Example of a Carousel with button

Example of Carousel with overlay

Example of Carousel with button placement on top