What is a list?
A list lets you manage a group of boxes that all share the same layout.
You can manage data like text and images in one place. And when you connect a list to a source like Studio CMS, it becomes a dynamic list that updates automatically as your content changes.
Lists are great whenever you want to repeat cards of the same shape — think product listings, staff profiles, or article indexes.
Tips: Carousels and components
Carousels and components are two other features that let you manage boxes with the same layout and design together.
What is a carousel?
A carousel displays items containing multiple elements — such as images and text — as slides you can switch between. You may also know it as a slider or slideshow.
Carousels in Studio.Design are built on top of the list feature. For details, see Carousel.
What is a component?
A component lets you manage design elements that are reused across pages, such as headers and footers.
For details, see Component.
How a list is structured
With a list, the design and layout are set up in one place, and the data — text, images, URL links, and so on — is set up in another. You configure each separately, then connect them so everything displays correctly.
Design and layout
Created directly on the screen.
Colors, sizes, and the placement and type of child boxes are basically the same across all items.
Content data
Created and managed separately from the design and layout, as "properties."
The properties applied to each box (images, text, URL links, and so on) are generally different from box to box.
Connecting the design and the content data
By connecting boxes to your content data (properties), images, text, URL links, and more show up in your layout.
Types of lists
With a regular box, you set text, images, and URLs directly on the box itself. With a list, the data is separated out and managed as "properties."
By default, a list works as a static list, and the data you connect is created and managed in the property table inside the Design Editor.
When you connect data from outside the Design Editor, the list works as a dynamic list. You can connect data from Studio CMS, or external content data retrieved via API or RSS.
Dynamic lists support filtering, sorting, and setting the number of items to display — options that aren't available with regular lists. For details, see Dynamic list.
Tips: If you're not sure which type a list is, see How to tell list and carousel types apart.
| Connected data | List behavior | Where data is managed |
List | List properties | Static | Property table |
CMS list | Studio CMS properties | Dynamic | Studio CMS dashboard |
API list | External properties retrieved via API or RSS | Dynamic | The external service the data comes from |
How a list's design and layout are built
A list's design is built from parent and child boxes: (1) a parent box that holds everything together (the list), and (2) a set of child boxes arranged with the same layout (the list items).
(1) List
The list is the parent box that holds the list items.
In the Layer panel, it's the layer above the list items, and a light blue list icon
appears before the layer name.The default HTML tag is <ul>, shown at the right end of the layer name.
(2) List items
List items are the group of child boxes inside the list that share the same layout.
You connect properties from your data to the boxes placed inside a list item, and the content appears there.
In the Layer panel, they sit below the list, and a light blue list item number
appears before the layer name.The default HTML tag is <li>, shown at the right end of the layer name.
Creating a list
There are two ways to create a list: use one of the ready-made list parts, or turn an existing box into a list.
Lists are created as static lists by default, but you can convert one into a dynamic list by connecting variable data from outside the Design Editor.
For details on how to convert, see Dynamic list > Adding a dynamic list > Converting an existing list into a dynamic list.
Creating a list from a list part
Here's how to use a list part that already has a design and layout in place. List parts come with sample properties already set and connected to their boxes.
Note: If you add boxes or properties, you'll need to connect them yourself.
In the navigation on the left, select [Add].
In the Add panel, open the [Parts] tab.
Click [Show all] in the [List] category, then choose the list part you want to add.
Turning an existing box into a list
To build a list from scratch, turn an existing box into a list.
Select the box you want to use.
If it's made up of multiple boxes, group them first, then select the parent box.
Turn it into a list in one of these ways:
Keyboard: ⌘ + L (Ctrl + L on Windows)
Right-click menu: Select [Make list]
Right panel: Click the layer name at the top of the panel, then select [Make list]
Once converted, the box is duplicated into three boxes with the same layout, and the parent box around them becomes a list.
Tips: If the boxes look collapsed or invisible after converting, one of these settings may be the cause:
The list (parent box) has its width or height set to auto
The list items (child boxes) use relative size units such as %
Removing a list
When you remove a list, the boxes go back to being regular boxes.
Removing a list doesn't affect the layout or design of the boxes, but all data connections are removed.
Note: If you remove a CMS list whose link destination was set with a Slug property, the link setting becomes invalid.
To fix this, see Why links don't go to the right page and how to fix it > 2. Check that the link is set correctly.
Select the list.
Remove the list in one of these ways:
Use the keyboard shortcut (⌘/Ctrl + Shift + L).
Note: Shortcut keys may not work depending on your browser or any extensions you have installed.
Right-click the list and click [Remove list].
Click [List] at the top of the right panel, then click [Remove list].
Editing the whole list
To edit the layout and appearance of the entire list, or the data connected to it, select the whole list first.
Selecting the whole list
Select the list you want to edit, either on the screen or in the Layer panel.
If you see the following, the whole list is selected correctly.
On the screen:
A list icon
and an HTML tag appear at the top left of the list.The whole list is highlighted in light blue.
In the [Data] tab of the right panel:
The property table (for a regular list), or the data source and list display settings (for a dynamic list)
Editing the layout and appearance of the whole list
You can set the width and height of the entire list, the direction items are arranged in, and the spacing between items.
Open the [Box] tab in the right panel and adjust the settings you need. If the panel is closed, open the right panel.
Related article: Arranging list items vertically or horizontally
Editing list properties
For a regular list, you create and manage data in the property table.
Open the [Data] tab in the right panel and adjust the settings you need. If the panel is closed, open the right panel.
For the types of properties you can use in a list and how to work with the property table, see List properties.
Connecting data to a list (converting it to a dynamic list)
You can convert a list into a dynamic list by connecting data from a source like Studio CMS.
Open the [Data] tab in the right panel, then choose the data source you want under [Connect data]. If the panel is closed, open the right panel.
For detailed steps, see Dynamic list > Converting an existing list into a dynamic list.
Editing list items
To set the layout and appearance of list items, adjust the boxes inside an item, or connect boxes to properties, switch the item into edit mode first.
Switching a list item into edit mode
With the list still selected, double-click it or press Enter.
What changes in the Layer panel: Only the list — or the list item — you're editing is shown.
What changes on the screen: The list you're editing is highlighted more brightly.
Click the item you want to edit.
What changes in the Layer panel: Only the layers inside that list item are shown.
What changes on the screen: The list item number
and the HTML tag appear at the top left of the box, and you can select the individual boxes inside the item.What changes in the right panel: The [Data] tab shows the properties along with blue dots (the connector starting points).
To edit a box inside the item, select the box, then open the right panel and adjust its settings.
Tips: You can also edit the same way by selecting a list item in the Layer panel.
Exiting edit mode for list items
Click anywhere on the screen outside the list.
Edit mode ends, and the Layer panel goes back to showing the layers for the whole page.
Editing the layout and appearance of a list item
Open the relevant tab in the right panel and make your edits. If the panel is closed, open the right panel.
Any changes you make apply to every item in the list.
Connecting properties to boxes in a list
When you connect properties to the boxes inside a list item, content such as text and images appears in them.
The steps differ depending on the type of data connected to the list, so see the articles below for details.
Note: If properties inside list items all show the same content
Items in a list all share the same layout, but as long as properties are connected correctly, the content inside each box (text, images, links, and so on) will be different from item to item based on its properties.
If text, images, links, or other content unexpectedly changes to the same thing across the whole list, see the help article below.
リスト risuto risu ﾘｽﾄ