Lists: Expanded List

Layout Views

The widget component template

Learn how to do it:

Expanded List

  • Who does (List Item) Number 2 work for?

  • List Item three - w/out hyperlink

    List Item Three!

    Etiam molestie nulla id sagittis convallis. Cras quis metus sit amet metus scelerisque gravida. Donec rutrum tellus sit amet luctus sollicitudin.

  • Jose' Quatro, you are a list item of mine

    Proin id urna posuere, ullamcorper nisi at, auctor ligula. Aenean non aliquam nibh, facilisis mattis libero. Mauris euismod magna euismod pulvinar mollis. Curabitur eu porttitor tellus.
    Curabitur purus quam, finibus eu porta eget, tincidunt vel tellus.

Customizations

Customize with CSS Classes.

Learn how to do it:

Title Styles

Medium: item-title-medium

Large: item-title-large

Center Text: text-center

Hide Title: item-title-hide

Ordered & Unorderded Lists

Bulleted: list-bullet

  • Who does (List Item) Number 2 work for?

Numbered: list-numbered

  • Who does (List Item) Number 2 work for?

Content Dividers

Divider: list-divider

  • Who does (List Item) Number 2 work for?

Striped: list-striped

  • Who does (List Item) Number 2 work for?

Display Categories/Tags on items

Content items should have categories/tags applied to them before they will be displayed.

Display Categories: cats-show

Categories are displayed below the title and above the content.

Display Tags: tags-show

Tags are displayed below the content.

Training

Create and Edit Lists

  • Create a List and List items

    Create a List

    You can create multiple lists with multiple list items within each list.

    1. Click the Content navigation menu item and then select Lists
      screenshot of lists in the content menu
    2. Click the Create a list button

    3. screenshot showing the create a list button
    4. Type a title and click the Create button

    After you have created a list, you can now create list items.

    Create List items

    1. Within a list, click the Create a list item button

    2. screenshot showing the create a list item button
    3. Add a title. This will be displayed as your list item title
      screenshot showing title field
    4. Click the Publish button
  • Add content to a list item

    Within the edit view of a list item, you have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar.
    screenshot showing the formatting toolbar

    Examples of how this content displays on a page:

  • Add Categories and Tags

    Adding categories/tags allows the user to click on a desired category/tag to filter the content on the page. It can also filter specific items to be displayed on a page. You can add multiple categories and tags to content items such as lists, blogs, events, and images.
    screenshot showing categories and tags sections

    Adding Categories

    1. Click the plus symbol under the Categories section.
    2. Begin typing a category name to choose a predefined category, select create a category* (see note below), or select show all categories to select from the category list 
      screenshot showing categories options
      *NOTE: Any new category created should be saved under the site's parent category. Email sitefinity@utmb.edu for assistance in organizing new categories.

    Adding Tags

    1. Click the plus symbol under the Tags section.
    2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
      screenshot of tag selection options
  • Make a list item a link
    1. Within the edit view of a list item, under the Custom fields section, type or paste the hyperlink into the Hyperlink field.

    screenshot showing hyperlink field

     

  • Add icons to list items
    1. Copy the class name inside the quotation marks from the selected icon available in the Font Awesome online library
      screenshot showing class name example on the Font Awesome website
    2. Within the edit view of a list item, paste the class name into the Icon field under the Custom fields section of the list item
      Screenshot showing the icon field of a list item
    3. Further customize the icon color by adding an icon color class to the CSS area. See Other Color Options.
      image of CSS field on list item options

    Need to add an icon to the HTML code? View the icons style guide

  • Add custom CSS classes to a list item
    1. Within the edit view of a list item, add the class name(s) into the Custom CSS Class(es) field under the Custom fields section of the list item.
    2. If multiple classes are being added list them single space separated as shown in the example below:
      Screenshot showing two classes added to the Custom CSS Class(es) field
  • Add Modal box content to a list item

    This content will display inside a modal box when the list item is selected.

    1. Within the edit view of a list item, under the Custom fields section, you must add # into the Hyperlink field.
      screenshot showing the hyperlink field
    2. Add content to the ModalBoxContent field. You can format content similar to the content area of a list item.
      screenshot of modal box content field
  • Add an image to a list item
    1. Within the edit view of a list item, under the Related media section click the plus symbol.
      screenshot of the related media section
    2. Click Upload an image from your computer or Select an image from your library

    Images can also be added to the content and modal box fields.

  • Scheduling to publish and/or unpublish

    Within the edit view of a page or content item, you can schedule a post to publish and/or unpublish on a specific date.

    1. Click the ellipses button (...) on the top-right of the page. Then select Schedule publish/unpublish from the drop-down menu.
      screenshot showing the ellipses button
    2. Type or select the date and time you would like to publish the page or item. You can also type or select the date and time you would like to unpublish. Click the Save changes button when complete.
      screenshot of blog post schedule date and time selectors
  • Delete or unpublish a List Item

    To remove a list item from a website you can delete or unpublish them. Unpublished items can be republished; deleted items cannot be recovered.

    1. Click the Content navigation menu item and then select Lists
      screenshot of lists in the content menu
    2. Click the List title that house the list items that you want to remove.
    3. Select delete or unpublish:
      1. To delete:
        • Click the ellipses button (...) on the top-right of the list item you want to remove. Then select Delete from the drop-down menu.
          Screenshot of how to delete a list item
          OR
      2. To Unpublish:
        • Click the ellipses button (...) on the top-right of the list item you want to remove. Then select Unpublish or Schedule publish/unpublish from the drop-down menu.
          Screenshot of unpublishing list items

Add List Items to a Page

  • Add CSS classes to a list widget on a page
    1. In the edit view of the page, click edit on the list widget.
      Screenshot showing the edit button on the list widget
    2. Click More options and insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. List widget helper classes can be found on the Sitefinity Cheatsheet
      screenshot showing css classes field
  • Add List widget to a page

    Within the edit view of a page, you can add lists to a page. You must create a list first.

    1. On the right side menu, click the Content tab, click the Content drop-down menu and find the List widget. Click, hold and drag the List widget onto the desired part of the page, and then release the list widget
      screenshot of list widget on a page

     

  • Selecting a List widget template to be displayed on a page
    1. In the edit view of the page, click edit on the list widget.
      Screenshot showing the edit button on the list widget
    2. Click the List items drop-down menu under the Templates section
      screenshot showing the list widget templates
    3. Select the desired list widget template.
    4. Click the Save button when complete.

    List widget template examples:

    Accordion List | Anchor List | Expandable List | Expanded List | Link List | Link Card List | Panel List | Simple List | Tabs List

  • Filtering list items with Categories & Tags

    You must add categories or tags to a list item before you can apply them to the list widget.

    1. In the edit view of the page, click edit on the list widget.
      Screenshot showing the edit button on the list widget
    2.  Under the Filter list items by section click the words Categories to filter by categories or Tags to filter by tags.
      screenshot showing the categories and tags section
    3. Click the Select button
    4. Search for and select the desired category or tag name. You can select multiple categories and tags.
      screenshot of categories and tags search
    5. Click the Done selecting button.
    6. Click the Save button when complete.

Explore Other List Options:

On this page: