Documentation Index

Fetch the complete documentation index at: https://www.civicplus.help/llms.txt

Use this file to discover all available pages before exploring further.

Add & Manage the Carousel Widget on a Page

Prev Next

The Carousel Widget allows you to group and display together different widgets that your residents can intuitively navigate with arrows. Each group can contain up to 3 widgets, which allows you to present more impact information in less space. The carousel can transition through these widgets automatically.

Important Note:

The performance of a page may be affected if a large number of widgets are included. We recommend limiting your page to no more than 20 widgets. The initial 'Choose a layout for this group of widgets' message for the Carousel widget with suggested layout icons populated.

Note:

Using the image widget inside the carousel widget has a max limit of 10 image widgets (if using the single layout).

Who can use this feature?

System Admin | Owner | Publisher | Author  

  1. Log in to your site

  2. Navigate to the page that the carousel widget should be on

    Note:

    The Carousel Widget is commonly used on Home Pages.

  3. Turn on Live Edit:The Live Edit status for a page is toggled to ON and highlighted.

  4. Navigate to the Widgets tab:The Live Edit tabs with the Widgets tab highlighted.

  5. Drag and drop the Carousel Widget onto your page:The Carousel widget being drag-and-dropped onto a page.

  6. In the Widget Options pop-up window, set your preferences:The Carousel widget's Widget Options pop-up window with various fields and toggles displayed.

    • Header Text: This text displays 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 on to 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

      Note:

      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

    • Advanced - Widget Breakpoint: The Advanced options of the Carousel Widget Options, with the Widget Breakpoint field displayed.

      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 when content goes to the next line on the screen.

  7. Select the Close (X) icon to exit the Widget Options pop-up window:The Carousel Widget Options pop-up window with the Close (X) icon highlighted.

  8. Pick your layout as prompted on the screen:The initial 'Choose a layout for this group of widgets' message for the Carousel widget with suggested layout icons populated.

  9. Drag and drop your widget or widgets to the chosen layout fields:Calendar widget added to Carousel widget.

  10. Set the appropriate properties to best match with the area that is being placed on it (will vary with widgets):The Container Options button of a Carousel widget is highlighted.

    Note:

    If there is already an existing widget on the page, you can hover over it, select the three bullet points on the top of it, and see what the settings are already set to, to match.

  11. If necessary, relate your desired Category for the widget you’ve dropped into the Carousel widget. Categories only populate for module widgets:The Category section of the Calendar Widget Options screen is highlighted for selection.

  12. Repeat steps 8 to 11 for slots in the carousel widget

    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.The Add button to add a new layout for additional widgets in the Carousel widget is highlighted.

  13. Select Save:The Save button in the top right corner of the page.


Examples

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

An example of a Carousel widget displaying two Info Advanced spotlights and a Quick Links category displayed together.

Showcase a Calendar and News Flash Side-By-Side

An example of a Carousel widget displaying a Calendar widget and a News Flash widget side-by-side.

Showcase Three Info Advanced Spotlights Side-By-Side

Three Info Advanced spotlights are displayed in a Carousel widget, side-by-side.