Pages


CivicEngage
®

Carousel Widget

 

Download the Video

Overview

The Carousel tool allows you to group and display together up to 10 different widgets that your citizens can intuitively navigate using arrows, or by paging, or by allowing the carousel to transition automatically. Each group can contain up to 3 widgets, allowing you to present more impact information while using less space.

Instructions

  1. Navigate to the page that the carousel widget should be on
    • Note: This is most common on Home Pages.
  2. Turn on Live Edit
    1.png
  3. Select Widgets from the tabbed menu on the screen
    2.png
  4. Locate the Carousel Widget
    3.png
  5. Drag and drop the widget you would like to place
  6. In the menu that pops ups, set the settings to your preference
    4.png
    • Header Text: This is the text that appears at the top of the widget.
    • Gap Between Widgets: This is spacing that will display in-between the widgets within the template.
    • Transition: Set what transition you want to be used when a user is navigating between pages of the carousel widget.
    • Transition Timing: Set how fast you want the transition to go when a user is navigating between pages of the carousel widget.
    • Groups Advance: This determines if you want the content to rotate between pages automatically or manually.
    • Group Timing: If the group is set to change automatically, the timing determines how long it will be on the screen before it moves onto the next group.
    • Next / Previous Arrows: This determines if arrows to manually move to the next group is available to the user. Unchecked means it is not available, checked means it is.
    • Pagination:  This determines if dots are available to the user at the bottom of the carousel widget in order to proceed to any of the groupings within the carousel widget instead of having to go in order.
    • Note: You should not need advanced options, as this is the breakpoint. If your widget is not stacking correctly when in live edit, ensure the breakpoint is set to 25. The breakpoint determines at what point content goes to the next line on the screen.
  7. Select the X in the upper right of the menu prompt
    5.png
  8. Pick your layout as prompted on the screen
    7.png
  9. Pick your desired widget under the Widgets tab
  10. Drag and drop the widget to the desired space
    8.png
  11. Set appropriate properties to match best with the area that is being placed onto it
    • Note: If there is already an existing widget on the page, you can hover over it and select the three bullet points on the top of it and see what the settings are already to match.
  12. Relate your desired category
    9.png
  13. Repeat steps 10-13 for all desired slots
    • Note: To add more slots, you will select the + at the bottom corner of the Carousel Widget. You can add a new layout to the left or right of an existing layout. Keep in mind, the more widgets you add the more your site performance can be affected.
  14. Select to save your page
    • Save: Save over the existing copy of the page
    • Save and Submit: This is only available to Authors. This will save the draft and await action from designated publishing users before it is available to the public. If this option is grayed out, this means you will need to save as copy first.
    • Save and Publish: Only available if you are working on a draft page, this saves and then publishes the page for the public.
    • Save as Copy: Save the page but do not overwrite the existing page, this will add this version as a draft and in order for it to be public you will need to select Save and Publish when you are ready.

Examples

The carousel widget is most commonly used on homepages to showcase many items that are throughout several departments or categories. For instance:

  • Showcasing 2 Info Advanced spotlights and a Quick Links category side-by-side
    1.png
  • Showcasing a Calendar and News Flash side by side-by-side
    2.png
  • Showcasing 3 Info Advanced spotlights side-by-side
    3.png
?



I'd Like to Request an Enhancement

0 out of 1 found this helpful

Updated:
Follow