How to use the CMS list element

CMS lists are one of the basic building blocks for any CMS project.

They are designed to display the data from multiple items from an imported collection, in the form of a list.

Lists can be found by default in CMS List pages, but they can be added to non-cms pages as well.

Adding a CMS list to a project
CMS list options
Adding elements to list items
Styling CMS lists
Styling CMS list items

Adding a CMS list to a project

CMS lists can be added either to a CMS page or a regular page.

To add list to a project:

Go to the Left panel -> Elements tab -> CMS section
Drag the CMS List element to a page
Go to the Right panel -> Collection settings
Select a Source from one of the collections that you imported

The sources available to set up the List will be the collections imported when establishing the CMS connection.

CMS list options

From the Right panel -> Collection settings where you also set the source for the CMS list you have several options to customize the list.

Pagination - Read more
Sorting - Read more
Filtering - Read more
UI States - Read more

Adding elements to list items

To add new elements to a CMS list item:

From the Left panel -> Elements
Drag any element to the Success layer of the CMS List
Select the element
Go to the Right panel
Click on the Bind property icon to bind dynamic data to the element

Check out this article to learn more about How to bind dynamic data to elements.

Styling CMS lists

To make styling changes to the list itself:

Go to the Left panel - Layers and Files
Expand the Main list element
Expand the Success layer
Select the List layer
From the Right panel you can style the list like any other container

Styling CMS list items

To style a CMS list element:

Select the elements in Success -> List -> Items
Style the elements using the Right panel, like any other element

The most important thing to remember is that editing one CMS item in a list will affect all of the other elements in the list as well.

Updated on: 27/03/2024