How to Add an Announcements Slider

Note: You must be an advanced author to gain access to this functionality. Please contact the Director of Web Development or the Web Developer to get access.

An announcements slider is a great way to draw visual attention to upcoming events and links to important information on your webpage.

Examples

Note: The 50% width slider cannot have content next to it. Other text and images on the page will always go above or below the slider.

Important Notes

  1. Each page can only have one announcement slider on it. Adding more than one to the same page will break the functionality of the component.
  2. The slider must have at least two announcements in order to work. There is no limit on how many announcements you can add, but for best results we recommend adding a maximum of five.

Step-by-Step Instructions

  1. Place your cursor in the area that you would like to insert the announcements slider, and then click on the component icon in the 2nd row of the toolbar.
    A screenshot of the CMS toolbar with the component icon circled
  2. Click on Announcements Slider from the component list, and then click "Insert."
    A screenshot of the component list with Announcements Slider circled
  3. Choose whether you want the slider to take up 50% of the screen or 100% of the screen on desktop devices. All sliders will resize to take up the full width of the screen on mobile.
  4. Fill out the details for the first announcement.
    A screenshot of the announcement details
  5. Scroll down and fill out the details for the second announcement - this is labeled "Group 1" underneath the Additional Announcements header.
  6. If you want to add another announcement, scroll down and click "Add New Group." Then fill out the details for that announcement.
    A screenshot of the Add New Group button
  7. Repeat Step 6 until you have entered all of your announcements, and then click "Save."
  8. A blue placeholder bar will appear on your page. The slider will appear normally after you save the page.
    A screenshot of the blue placeholder bar that says Announcements Slider
  9. Once you are done editing, save and publish your page normally.

Frequently Asked Questions

    Click on the blue placeholder bar and then click the pencil icon.

    A screenshot of the blue placeholder bar with the pencil and delete icons circled

    Click on the blue placeholder bar and then click the X icon.

    A screenshot of the blue placeholder bar with the pencil and delete icons circled

    Note: Remember that the slider must always have at least two announcements. You cannot delete the first announcement or the second announcement (Group 1). You can only replace these two announcements by editing the details.

    To delete other announcements (Group 2+):

    1. Click on the blue placeholder bar and then click the pencil icon to open the slider details.
    2. Scroll down to the announcement that you want to delete and click the X next to its group number.
      A screenshot of the announcement detail with the group number and delete icon circled
    3. Click "Save" at the bottom.

    The slider will automatically resize if you use images with different heights or descriptions that are different lengths (e.g. one line or two lines of text). To keep all the announcements the same size, upload photos that have been cropped to the same size and edit your main text to be about the same length.