Slider

Creating Components

On this page:

Slider example

  • EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
    Custom Title 1

    Description or teaser for slider gallery of images.

    Slider Link
  • SEO Line Chart
    Custom Title 2

    Description or teaser for slider gallery of images example 2.

    Carousel Link 2

What is a Slider?

The Slider component enables you to create a slideshow with images, a text box and button for each image. We recommend using a maximum of four images so the Slider does not become too busy. 

How to add an Slider

  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  Slider from the menu

    Choose a slider from the menu

Content 

  1. Add your first slide.

  2. Click Add media in the Image Section.

    Add slider item by adding media
  3. Select the appropriate image or upload the image to the Image Library.
    Recommended Image Dimensions: 21:9 - Maximum image size is 4MB

  4. Add a Title.

    Slider title

  5. Add any additional information into the WYSIWYG Content Editor.
    Note: Visit this page to learn more about how to use the WYSIWYG Content Editor.

    Slider text

  6. Add an internal page or external link (optional).

    Slider URL

  7. Add the Button text (optional).

    Link text

  8. Click Add slider item.

    Add slider item
  9. Repeat steps 2 to 7 for each Slider.

  10. You can click on the all directions arrow and drag the Slider into the desired order.

    Drag to reorder slides

  11. For the Image Overlay option, select No if you would like most of the text to appear below the image.

    Image overlay for slider

  12. Select the Button placement if you added a button in Steps 6 and 7

    Button placement for layout options

Styles 

  1. Toggle to the Styles tab. 

    Example of the Styles option selected
  2. Select the amount of additional space you would like above the component. 

  3. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Example of the top and bottom margin drop-down section with a red box around it

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 

  1. Layout Options settings used to create this component are: Image overlay: None,  Button placement: None
  • EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
    Custom Title

    Description or teaser for slider gallery of images.

    Slider Link
  1. Layout Options settings used to create this component are: Image overlay: No,  Button placement: Top
  • EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
    Custom Title
    Slider Link

    Description or teaser for slider gallery of images.

  1. Layout Options settings used to create this component are: Image overlay: Yes,  Button placement: Bottom
  • EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
    Custom Title

    Description or teaser for slider gallery of images.

    Slider Link