Point: What is a List?
A List lets you manage a group of boxes that share the same layout.
You can manage data such as text and images all in one place. And if you connect it to a source like Studio CMS, it becomes a dynamic list that automatically reflects any updates you make.
By default, a list works as a static list.
For an overview of the List feature, see the List article.
A dynamic list is a list connected to variable data from outside the Design Editor — such as Studio CMS — so that updates are reflected automatically.
| Where data (properties) is managed / referenced from |
List | The property table in the Design Editor |
Dynamic list |
|
Features with limitations when using external data
The features available in a dynamic list differ between CMS Lists (which use Studio CMS data) and API / RSS Lists (which use external data retrieved from an API or RSS feed).
Feature | API List | RSS List | Notes |
○ | ○ | You can link variable data retrieved from an external source as properties. | |
△ | × | Some features aren't available. | |
△ | × | Not available for RSS Lists. | |
× | × | Not available. |
Add a dynamic list
Use one of the following methods to place a dynamic list on a page in the Design Editor.
*You need to prepare the data you want to link to the list beforehand.
Add a preset dynamic list
If your data is already connected, you can add CMS Lists and RSS Lists that already have data linked to them.
Note: For API Lists, use the Convert an existing list into a dynamic list method described below.
In the navigation on the left side of the screen, click the [Connect] icon
.Select either the [CMS] or [RSS] tab.
Choose the dynamic list you want from the list, then drag and drop it — or click it — to place it on the screen.
If you need to change the linked data, see the steps in Change the connected data.
Convert an existing list into a dynamic list
You can connect data to a list you created manually and turn it into a dynamic list. API Lists must always be created this way.
Select the list you want to convert into a dynamic list.
Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
Click [Link data] for the list.
Select the data you want to link to convert the list into a dynamic list.
Disconnect the data
When you disconnect the data, the dynamic list automatically becomes a regular list. The list's layout and design aren't affected.
Select the dynamic list you want to change.
A list icon
and an HTML tag appear in the upper left of the selected list, and the whole list is highlighted in light blue.Open the [Data] tab in the right panel. If the panel is closed, open the right panel.
At the top right of the [Data] tab, click the name of the model or collection linked to the list.
Select [Disconnect data] to remove the connection.
Change the connected data
You can change the data connected to a dynamic list you've already placed to a CMS model, CMS collection, API, or RSS feed at any time.
Changing the data doesn't affect the list's design.
Select the dynamic list you want to change.
A list icon
and an HTML tag appear in the upper left of the selected list, and the whole list is highlighted in light blue.Open the [Data] tab in the right panel. If the panel is closed, open the right panel.
Click the linked data field under [List].
Choose the new data from the list that appears.
Link variable data (properties) to box elements
Link the variable data (properties) from your connected data source to boxes inside the list to display it. The data type and the box type need to match.
For detailed steps on linking properties, see Link properties to boxes inside a dynamic list or carousel.
If you're connecting data retrieved through an API or RSS feed and linking properties to box elements inside the list, see these help articles as well:
Set up how list items are displayed
In a dynamic list, you can set things like how many items to show and what to display when there are no items.
The available display settings differ between CMS Lists (which use Studio's internal data) and API / RSS Lists (which use external data).
Select the dynamic list you want to adjust.
A list icon
and an HTML tag appear in the upper left of the selected list, and the whole list is highlighted in light blue.(If you're selecting the element in the Layers panel, select the layer with the list icon
.)Open the [Data] tab in the right panel. If the panel is closed, open the right panel.
Adjust each setting as needed.
If your site is already published, update it from the Publish panel after making your changes. Your changes won't appear on the live site until you do.
Feature availability
Feature | CMS List | API List | RSS List |
○ | × | × | |
○ | ○ | ○ | |
○ | ○ | ○ | |
○ | ○ | × | |
○ | × | × | |
○ | × | × |
(1) Filter (available for CMS Lists)
You can narrow down which items appear in the list by setting filter conditions based on CMS properties you've set up in advance, or on a search term.
For details, see Filter: Narrow down the items shown in a CMS List.
(2) Number of items
You can set the maximum number of items to show in the list. The limit is 100 items.
Note: Showing more items may affect performance
The more items you display, the more likely you are to notice the following:
The Design Editor becomes slower to work in
Your published site loads more slowly
How much this affects performance depends not only on the number of items, but also on how your CMS model is structured.
If things feel slow, try reducing the number of items displayed.
(3) Empty state display
You can adjust the design shown when the list contains no items.
Turn on the empty state display to edit the design while previewing how it looks.
(4) Load more button (available for CMS Lists and API Lists)
If there's more data than the item limit you set, a [Load more] button automatically appears at the bottom of the list.
Clicking it loads the number of additional items you've specified.
If there are no more items to load, the button doesn't appear.
You can check and adjust the button's design right on the screen.
Note: This can't be set for CMS Lists linked to a CMS Collection.
(5) Hide the current item (available for CMS Lists)
When you place a related articles list on a CMS article detail page, this setting keeps the article you're currently viewing out of the list.
The checkbox for this setting only appears when both of the following are true:
The CMS List is placed on a dynamic page or a dynamic modal.
The CMS List and the dynamic page or modal it's placed on are linked to the same CMS model.
Note: Requirements for "Hide the current item" in dynamic modals
To use [Hide the current item] in a dynamic modal, the page that links to the modal must be a dynamic page.
(5) Sort (available for CMS Lists)
You can use CMS properties to change the order of the CMS items shown in the list.
For details, see CMS List > Sort the items in a CMS List.
Set the list's layout and appearance
You can edit the design and styling of a dynamic list just like any other box element.
By using conditional styles and display conditions, you can also apply a special design or styling to specific items only.
Conditional styles (available for CMS Lists and API Lists)
You can apply a "First item" style to a list element to give just the first item in the list a different design.
For details, see Conditional styles > First item.
Display conditions (available for CMS Lists)
You can show a list or elements on a page only when certain conditions are met.
Example: Use a boolean property to show only articles where the flag is set to "true."
For detailed setup instructions, see the following help articles:
blog article index API RSS