Point: What is Studio CMS?
Studio CMS is a CMS (Content Management System) feature that lets you structure, manage, and update content right inside Studio.Design. By combining models, items, and properties, you can manage frequently updated content—like blog posts and news—all in one place.
To learn how Studio CMS works and how to get started, see these articles as well.
A CMS List is a dynamic list connected to data managed in Studio CMS.
With a CMS List, you can link properties managed in the CMS Dashboard to elements inside the list, so article lists and news lists are displayed dynamically.
Feature | Description |
Connecting variable data (properties) | You can connect CMS properties set up in the CMS Dashboard to box elements inside the list. |
Dynamic list display settings | Set how items in the list are displayed. |
Conditional style | Use the "First item" conditional style to apply a special style to only the first item in the list. |
Display conditions | You can set elements inside a dynamic (CMS) list or dynamic page to appear only under certain conditions. By using a Boolean property, you can show or hide elements—or change their design—for specific items based on a condition. |
Sort | Use CMS properties to change the order of your articles. |
Create a CMS List
To create a CMS List, first prepare your data in Studio CMS, then connect it to a dynamic list in the Design Editor.
1. Prepare your content data in the CMS Dashboard
Create your content, such as CMS article items, in the CMS Dashboard.
For details, see Creating a CMS article item in the CMS Dashboard.
2. Add a dynamic list in the Design Editor
In the Design Editor, add a dynamic list to the page you want.
To convert a list you've already placed into a dynamic list, connect a CMS model from the [Data] tab in the right panel.
Check the connected CMS model and, if needed, change the connected data.
3. Connect properties to box elements
In the right panel, connect CMS properties to the box elements inside the CMS List. If the panel is closed, open the right panel.
* If you're using a preset dynamic list, the properties are already connected to the box elements.
4. Set up filters to narrow down the items shown
If needed, set a filter to narrow down which CMS items appear.
5. Adjust the list display settings
Set options such as the number of items shown, empty state (0 items), Read more button, and hide duplicate items.
Sort items in a CMS List
Note: Sorting doesn't work on CMS Lists that use a search keyword condition.
CMS Lists with a search keyword added to their filter conditions can't be sorted. Even if you specify a sort order, items won't appear in that order.
You can use the sort feature to change the order of the CMS items shown.
Of the available CMS properties, you can sort by Published date, Last updated date, Title, Text, and Number.
* Sorting can't be set on lists connected to a CMS collection.
Property | Sort order |
Published date | Newest first, oldest first |
Last updated date | Newest first, oldest first |
Title | Alphabetical order, reverse order |
Text | Alphabetical order, reverse order |
Number | Highest first, lowest first |
Adjust the layout and appearance
You can adjust the appearance of a CMS List just like a regular list.
Use the help articles below as a reference when editing the list's layout and appearance.
Make the most of conditional styles and display conditions
By using the "First item" conditional style or display conditions based on Boolean properties, you can show or hide elements—or change their style—for specific items based on a condition.
If it's hard to select the list or elements inside it
Here's what to check when you can't select the element you intended while editing.
In a CMS List, there are two things you can select: the whole list, or an individual list item.
Select the whole list to change display settings, and select a list item (or an element inside it) to adjust the design of individual elements.
1. Select the entire CMS List
Select the whole list when changing display settings or the connected data.
1-1. What it looks like when the whole list is selected
If the list icon 
and the <div> tag appear at the top left of the box, and the whole list is highlighted in light blue, the entire list is selected.
Clicking once more while it's highlighted puts the list into editable mode.
1-2. Select it directly on the screen
Click anywhere inside the CMS List you want.
If the whole list doesn't get selected, try clicking the same spot a few times.
1-3. Select it from the Layers panel
Open the Layers panel and select the CMS List you want from the layers.
1-4. Deselect the whole list
Click anywhere outside the CMS on the screen to deselect it.
2. Select a list item in a CMS List
Select a list item or an element inside it when adjusting the design of individual elements.
2-1. What it looks like when a list item is selected
The list item number 
and the <div> tag appear at the top left of the box. Numbers are assigned in order, starting from 0.
2-2. Select it directly on the screen
Click the CMS List item you want.
Once the whole CMS List is highlighted, double-click again to select the list item.
2-3. Select it from the Layers panel
Open the Layers panel and select the list item you want from the layers.
2-4. Deselect the list item
Click anywhere outside the CMS on the screen to deselect it.