Widgets


 





Add the Carousel Widget to Your Page

Who can use this feature?

System_Admin.png Slash.png Owner.png Slash.png Publisher.png Slash.png Author.png


Overview

The Carousel Widget allows you to group and display together up to 10 different widgets that your citizens can intuitively navigate with arrow. It can also let them page allow the carousel to transition automatically. Each group can contain up to 3 widgets, which allows you to present more impact information in 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
    LiveEditOn.png
  3. Navigate to the Widgets tab
    Widgets.png
  4. Drag-and-drop the Carousel Widget onto your page
    CarouselWidget.png
  5. In the Widget Options pop-up, set your preferences
    carousel_widget_options.png
    • Header Text: Text at the top of the widget
    • Gap Between Widgets: Spacing that displays in-between the widgets within the template
    • Transition: Set what transition you want to use when a user navigates between pages of the carousel widget
    • Transition Timing: Set how fast you want the transition to be when a user navigates between pages of the carousel widget
    • Groups Advance: Choose automatic or manual content rotation
    • Group Timing: Determines how long content is on the screen before it moves onto the next group
      • Note: This option is only available if you select Automatic Groups Advance. 
    • Next/Previous Arrows: Determines if arrows manually move to the next group
      • Next: If you do not check the box, that means it is unavailable to the user. 
    • Pagination: 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
    • 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.
      Carousel_Breakpoint.png
  6. Select the X in the upper right of the menu prompt
    close_carousel_widget_options.png
  7. Pick your layout as prompted on the screen
    Carousel_ChooseLayout.png
  8. Drag-and-drop widget(s) to the chosen layout
    Carousel_MoveWidgets.png
  9. Set appropriate properties to best match with the area that is being placed on it (will vary with widgets)
    • 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.
      WidgetOptions.png
  10. Relate your desired category
    relate_widget_to_category.png
  11. Repeat steps 8-10 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.
      Carousel_AddSlots.png
  12. Select Save
    Carousel_Save.png

Examples

Users most commonly apply the Carousel Widget on homepages to showcase many items that share throughout several departments or categories. For instance:

  • Showcase 2 Info Advanced spotlights and a Quick Links category side-by-side:
    carouseal_widget_example.png
  • Showcase a Calendar and News Flash side-by-side:
    carousel_widget_example_2.png
  • Showcase 3 Info Advanced spotlights side-by-side:
    carousel_widget_example_3.png



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback