Point: What is Studio CMS?
Studio CMS is a CMS (Content Management System) feature that lets you structure, manage, and update your content directly within Studio.Design. By combining models, items, and properties, you can manage frequently updated content like blogs and news in one place.
For more on how Studio CMS works and how to get started, check out the articles below.
A CMS List is a dynamic list connected to data managed in Studio CMS.
By using a CMS List, you can link properties managed in the CMS Dashboard to elements within the list, allowing you to dynamically display things like article lists or announcement lists.
Feature | Description |
Linking variable data (properties) | You can link CMS properties set up in the CMS Dashboard to box elements inside the list. |
Display settings for dynamic lists | Configure how items appear inside the list. |
Conditional styles | You can apply a unique style to just the first item in the list by using the "First item" conditional style. |
Display conditions | You can set elements inside a dynamic (CMS) list or dynamic page to only appear under certain conditions. By using a boolean property, you can show, hide, or change the design of specific item elements based on conditions. |
Sorting | You can reorder articles using CMS properties. |
Creating a CMS List
To create a CMS List, first prepare your data in Studio CMS, then link it to a dynamic list in the Design Editor.
1. Prepare your content in the CMS Dashboard
Create your content, such as CMS article items, in the CMS Dashboard.
For details, see Creating CMS article items in the CMS Dashboard.
2. Add a dynamic list in the Design Editor
In the Design Editor, add a dynamic list to the page where you want it to appear.
If you want to use an existing list, you can convert it into a dynamic list by linking data from the [Data] tab.
Check the linked CMS data and, if needed, change the linked data.
3. Link properties to box elements
Select a text or image box inside the list, then use the [Data] tab in the right panel to link CMS properties to box elements in the CMS List.
If the panel is closed, open the right panel.
Note: If you're using a preset dynamic list, properties and box elements are already linked for you.
4. Filter the items shown
If needed, set up a filter to narrow down which CMS items appear.
5. Set up the list display
Configure list display options such as number of items shown, empty state display, Read more button, and hiding duplicate items.
Sorting items in a CMS List
You can use the sort feature to change the order of CMS items displayed.
Sorting is available based on the following CMS properties: publish date, last updated date, title, text, and number.
Property | Order |
Publish date | Newest first, oldest first |
Last updated | Newest first, oldest first |
Title | Alphabetical, reverse alphabetical |
Text | Alphabetical, reverse alphabetical |
Number | Largest first, smallest first |
Adjusting layout and appearance
You can style a CMS List the same way you would style a regular list.
Use the following help articles as a reference for editing the layout and appearance of your list.
Using conditional styles and display conditions
By using the "First item" conditional style or by setting display conditions based on a boolean property, you can show, hide, or change the style of specific item elements based on conditions.
Trouble selecting the list or elements inside it
Here are some things to check if you can't select the element you want while editing.
In a CMS List, there are two types of selections: selecting the entire list, and selecting a list item.
Select the entire list when you want to change display settings, and select a list item (or an element inside it) when adjusting individual designs.
Selecting the entire CMS List
Select the entire list when changing display settings or linked data.
How it looks when the entire list is selected
When the list icon 
and the <div> tag appear in the upper-left of the box and the entire list is highlighted in light blue, the entire list is selected.
Clicking once more from the highlighted state makes the list editable.
Selecting directly on the screen
Click anywhere inside the target CMS List.
If the entire list isn't selected, try clicking the same spot a few more times.
Selecting from the Layers panel
Open the Layers panel and select the target CMS List from there.
Deselecting the entire list
Click anywhere outside the CMS on the screen to deselect.
Selecting a list item in a CMS List
When adjusting individual designs, select a list item or an element inside it.
How it looks when a list item is selected
A list item number 
and the <div> tag appear in the upper-left of the box. Numbers are assigned in order starting from 0.
Selecting directly on the screen
Click the target CMS list item.
If the entire CMS List is already highlighted, double-click to select the list item.
Selecting from the Layers panel
Open the Layers panel and select the target list item from there.
Deselecting a list item
Click anywhere outside the CMS on the screen to deselect.