Add the List Widget to a Page

Prev Next

This article shows how to add a List Widget to your page. This widget lets you create lists on the page.

Important Note:

We recommend using the List tool in the Editor Widget instead of the List Widget. The List Widget is a simple tool. It is not as robust as the List tool in the Editor Widget.

Who can use this feature?

System Administrators | Owners | Publishers | Authors

Instructions

  1. Sign in to your site.

  2. Navigate to your desired page.

  3. Ensure that the Live Edit state is toggled to ON:

    CivicPlus Municipal Websites Central interface showing live edit status and navigation options. The Live Edit is On status is highlighted.

  4. On the Live Edit pane, click on the Widgets tab:

    CivicPlus interface showing modules including highlighted Widgets section for website management.

  5. Drag and drop a List Widget to the page:

    CivicPlus interface showing government content modules and a highlighted List option.

  6. Fill out the Widget Options:

    Widget options settings include header text, bullet style, and widget breakpoint configuration.

    • Header Text: Enter the text to display as the header for this widget

    • Header Style: Choose the heading level style to apply to the header text

    • Bullet Style: Choose whether list items should display with bullets

    • Number of Columns: Choose how many columns the list items should be arranged into

    • Auto-Alphabetize: Check this box to automatically re-arrange items in alphabetical order

    • Advanced:

      • Widget Breakpoint: Enter the width, in em units, at which this widget will switch from "narrow" to "wide" view. For example, vertically stacked columns will be positioned horizontally, and thumbnails will position themselves beside text instead of above

  7. Click the X button to exit  and save the Widget Options window:

    Widget options for volunteer opportunities, including settings for header and bullet styles. The X is highlighted for selection.

  8. Click inside the field and start typing to create a list:

    A section for adding volunteer opportunities with highlighted prompts for user input.

    • Formatting Options: Highlight text with your cursor to see formatting options:

      • B: Bold text

      • i: Italicize text

      • H2: Add header code to the selected text (not recommended)

      • Page Icon: Choose how to align the text. Options are Left, Center, Right, or Justify

      • Link: Add a link to the selected text

        Note:

        If you selected Auto-Alphabetize in the List Widget Options window, your items will automatically be put into alphabetical order as you add them.

  9. Click the Save button:

    Website section displaying volunteer opportunities for community engagement and service. The Save button is highlighted.

  10. View your list:

    A list of volunteer opportunities available for community engagement and support.