Note: What is Studio CMS?
Studio CMS is a built-in content management system (CMS) that lets you structure, manage, and update content directly within Studio.Design. By combining models, items, and properties, you can centrally manage frequently updated content like blog posts and news articles.
To learn more about how Studio CMS works and how to get started, check out the articles below.
A CMS List is created by linking data managed in Studio CMS to a dynamic list.
With CMS Lists, you can connect properties managed in the CMS Dashboard to elements within the list, dynamically displaying article listings, news feeds, and more.
Feature | Description |
Linking variable data (properties) | You can link CMS properties set in the CMS Dashboard to box elements within the list. |
Dynamic list display settings | Configure how items in the list are displayed. |
Conditional styles | You can use the "First item" conditional style to apply a unique style to the first item in the list. |
Display conditions | You can set elements within a dynamic (CMS) list or dynamic page to only appear under specific conditions. By using Boolean properties, you can show or hide specific item elements, or change their design based on conditions. |
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 data 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're using an existing list, you can convert it into a dynamic list by linking data from the [Data] tab.
Check the linked CMS data, and change the linked data if needed.
3. Link properties to box elements
Select a text or image box within the list, then go to the [Data] tab in the right panel to link CMS properties to box elements within the CMS List.
If the panel is closed, open the right panel.
* If you're using a preset dynamic list, properties and box elements are already linked by default.
4. Set up filters to narrow down displayed items
If needed, set up filters to narrow down which CMS items are displayed.
5. Configure list display settings
Configure display settings for the list, such as Display count, Empty state display, Load more button (Read more), and Hide duplicate items.
Adjusting layout and appearance
You can adjust the appearance of a CMS List just like a regular list.
Refer to the following help articles to edit the layout and appearance of your list.
Using conditional styles and display conditions
By setting up the "First item" conditional style or display conditions using Boolean properties, you can show, hide, or change the style of specific item elements based on conditions.
Having trouble selecting the list or elements within it?
Here are some tips for when you can't select the element you want while editing.
With CMS Lists, there are two types of selections: selecting the entire list and selecting a list item.
Select the entire list when changing display settings, and select individual list items (or elements within them) when adjusting their design.
Selecting the entire CMS List
Select the entire list when you need to change display settings or linked data.
What it looks like when the entire list is selected
A list icon
and a <div> tag appear in the upper-left corner of the box, and the entire list is highlighted in blue — this means the whole list is selected.
Clicking again from this highlighted state puts the list into edit mode.
Selecting directly on the screen
Click anywhere within the 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 CMS List from the layer tree.
Deselecting the entire list
Click anywhere outside the CMS List on the screen to deselect it.
Selecting a list item within a CMS List
Select individual list items or elements within them when adjusting their design.
What it looks like when a list item is selected
A list item number
and a <div> tag appear in the upper-left corner of the box. Items are numbered starting from 0.
Selecting directly on the screen
Click on the CMS List item you want to select.
If the entire CMS List is highlighted, double-click to select an individual list item.
Selecting from the Layers panel
Open the Layers panel and select the list item from the layer tree.
Deselecting a list item
Click anywhere outside the CMS List on the screen to deselect it.