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 in one place. And when you connect a list to a source like Studio CMS, it becomes a dynamic list that automatically reflects any updates.
By default, a list works as a static list.
For an overview of the list feature, see List.
By default, a list works as a static element with list properties connected to it.
This article explains the types of list properties and how to use the property table.
| Where data (properties) is managed or sourced from |
List | The property table in the design editor
|
|
Types of properties
There are five types of list properties.
Property type | Description |
Text property | Stores any text you like, such as summaries or extra details. Connect it to a text box to display it. |
Image property | Stores images, such as uploaded images or free images. Connect it to an image box to display it. |
URL property | Stores links to pages within your project or to external sites. Connect it to the box you want to turn into a link. |
Boolean property | A true/false property for managing things like ON/OFF states or whether something applies. It's useful for flag-style information (for example, marking recommended products or changing the color of specific data). |
Color property | Stores color information, such as color codes. It's useful for color-coding by category or for displays that work together with your design. |
For examples of how to use boolean and color properties, see the articles below.
List: Change the color for each item (color property)
List: Show or hide a box for each item (boolean property)
Tips: Adding alt text to images in a list
To add alt text to an image inside a list item, first add the alt text as a text property, then connect it to the image box you want.
For detailed steps, see Image box: Set alt text > Set alt text for images in list items.
What is the property table?
You set list properties in the property table in the design editor. Rows show list items, and columns show properties.
How to open the property table
Select the list you want to edit.
A list icon
and an HTML tag appear at the top left of the selected box, and the entire list is highlighted in light blue.Open the Data tab in the right panel. If the right panel is closed, open it first.
The property table opens in the right panel.
Rows in the property table
Each row corresponds to one list item, listed from the top in item number order (0, 1, 2, and so on).
Adding, deleting, and reordering rows (list items)
The following actions are reflected on the screen and in the Layers panel.
Note: You can't add or duplicate list items directly on the screen or in the Layers panel.
In the table, do any of the following.
Add a row: Scroll to the bottom of the property table and click [+New].
Delete a row: Hover over the item you want to remove, then click the trash icon that appears on the right edge of the table.
Reorder rows: Hover over the item, then drag the slide icon that appears on the left edge of the table. You can also drag the list item's layer in the Layers panel.
Columns in the property table
Each column corresponds to a property, such as "Title" or "Caption," and holds the data for that property.
The property name appears at the top of each column. Click it to edit the name.
In the list itself, the same property appears in the same box within each item.
Adding, deleting, reordering, and renaming columns (properties)
Follow these steps to edit your properties.
Note: To show a property you've added in your list, you need to connect the property to a box.
In the table, do any of the following.
Add a column: Click [+] at the top right of the table, then choose a property type.
Delete a column: Click the property name, then click [Delete].
Reorder columns: Drag the property name to move it.
Rename a property: Click the property name and edit it.
Editing property values
You can edit the property values set for each item in the right panel or directly on the screen.
Editing in the right panel
Click the cell you want to change and edit it.
Editing on the screen
Only text properties and image properties can be edited directly on the screen.
Make your edits directly on the screen.
To learn how to edit a text box, see Text box > Edit text.
To learn how to work with an image box, see Image box > Replace a placed image.
When you're done, click outside the list to exit edit mode.
Note: In the following cases, you can't make changes directly on the screen. Use the property table instead.
When it's a static carousel
When a text filter is applied
When text has been typed directly into the text field
Connecting a property to a box
Properties in the property table only appear in your list once you connect them to a box on the screen.
For detailed steps, see Connect a property to a box in a list or carousel.
Related articles