What is a List?
A List is a collection of boxes that share the same structure and layout.
Tip: A similar feature is Components. Components are used to manage design elements (such as headers) that are reused repeatedly across multiple pages.
Example: Card Designs
The List feature is useful when you want to display a group of items that share the same design and layout but contain different content (such as text or links). Let's use card designs to explain how Lists work.
Shared design:
Elements that are common to every card—such as the card's color, size, and the type and arrangement of inner boxes—are set up just like a regular box, using the [Box] tab in the Right Panel.
Content data unique to each card:
Content that differs from card to card (images, text, URLs, etc.) is managed in the [Data] tab of the Right Panel.
Linking design and content data:
By linking the content data (properties) for each card to the shared card design you've created, you can quickly generate multiple cards.
This article explains Lists in detail.
Structure of a List
A List is made up of a group of boxes with the same layout (called list items), wrapped in a parent box (the List itself), forming a parent-child box relationship.
(1) List
The List is the parent box that wraps the list items (boxes that share the same layout). It appears as follows on the screen, in the Layers Panel, and in the Right Panel.
When selected on screen:
A list icon
and a <ul> tag appear at the top left of the box. The box's outline is highlighted in light blue.Layer name in the Left Panel:
In the Layers Panel, a light blue list icon
appears at the start of the layer, and a <ul> tag appears at the right end.
[Data] tab in the Right Panel:
The property management table is displayed. This is used to manage the data that's applied to the list items contained within the List.
(2) List Items
List items are the group of boxes with identical layouts that are contained within a List. They appear as follows on the screen, in the Layers Panel, and in the Right Panel.
When selected on screen:
A list item number
and a <li> tag appear at the top left of the box. Numbers are assigned starting from 0, in order from top to bottom in the property management table. (If it's difficult to select a list item directly on the screen, you can select it from the Layers Panel.)
Layer name in the Left Panel:
In the Layers Panel, a light blue list item number
appears at the start of the layer, and a <li> tag appears at the right end.
[Data] tab in the Right Panel:
Only the data that corresponds to the currently selected list item is displayed.
Note: Adding or Duplicating List Items
List items cannot be added or duplicated by copying and pasting in the screen or the Layers Panel. For details on how to do this, refer to Adding, Deleting, and Reordering List Items below.
Creating a List
There are two ways to create a List: add a preset list part, or convert an existing box into a List.
How to Use a Preset List Part
Using a part that's already designed as a List lets you place a List right away.
Open the [Add] panel on the left side of the screen.
Open the [Parts] tab.
Click [Show All] in the List category, and select the list part you want to add.
How to Convert an Existing Box into a List
You can also turn an existing box into a List.
Select the box you want to use as a list item, either on the screen or in the Layers Panel. If it's made up of multiple boxes, group them first and select the parent box.
Convert it into a List using one of the following methods:
Keyboard shortcut: ⌘+L (Ctrl+L on Windows)
Right-click menu: Select [Convert to List]
Right Panel: Click the [Box] button at the top and select [Convert to List]
Once converted, the box is duplicated to become a list item.
At the same time, a parent box (the List) is generated to wrap them.
Tip: If the items in your converted List appear collapsed, here are some possible causes:
・The width or height of the List (parent box) is set to auto
・The size unit of the items (child boxes) is set to a relative value such as %
Unlinking a List
To unlink a List, select it on the screen or in the Layers Panel, then use one of the following methods:
Use the keyboard shortcut (⌘/Ctrl + Shift + L).
* If this doesn't work, your browser environment or a browser extension may be interfering.Right-click the List and select [Unlink List] from the menu.
Click [List] at the top of the Right Panel and select [Unlink List].
Editing the Design of List Items
To edit the design of a List, select the List and then double-click it or press the Enter key.
Select the List whose design you want to edit.
When selected, the List is highlighted in light blue.
Double-click the List or press the Enter key.
Change in the Layers Panel: Only the List being edited, or only the list item being edited, is displayed.
Change on the screen: The List being edited is brightly highlighted.
Edit the design of the list items.
When you change the design of any one list item, the changes are applied to all list items within the same List.
Click anywhere on the screen outside the List to return to normal editing mode.
Helpful Articles for Editing List Designs
Managing List Properties
For regular boxes, you apply content data (such as text, images, and URLs) directly to the box itself. With Lists, however, data is managed using the property management table.
(1) How to View the Property Management Table
1. Select the List.
2. Open the [Data] tab in the Right Panel. If the Right Panel is closed, open it.
In the property management table, list items appear along the horizontal axis, and properties appear along the vertical axis.
(2) Understanding the Horizontal Axis (Items) of the Property Management Table
Each horizontal row represents the data for a specific list item.
The order corresponds to the list item number , starting from 0 at the top and continuing as 1, 2, and so on.
(3) Understanding the Vertical Axis (Properties) of the Property Management Table
Each vertical column contains data for a specific property, such as "Title" or "Caption."
Property names appear in the top row and can be edited.
Data within the same property is displayed in the same element across the visual List.
Point: Data won't appear in your design until each property in the property management table is linked to a display location (box) within a list item on the screen.
Types of Properties
The following property types can be used in a List.
For examples of how to use boolean properties and color properties, see "How to Change the Design of Each List Item."
Property Type | Description |
Text Property | Links to a text box or rich text box. Also used for alt text settings applied to image properties. |
Image Property | You can set an uploaded image or a free image. Links to an image box. For instructions on setting alt text for images in list items, see the alt text article. |
URL Property | You can set a link to a page within your project or to an external site. |
Boolean Property | Represents an on/off (true/false) value. Useful for marking recommended products or changing the color of specific data. |
Color Property | Lets you register colors (color codes) to use as box fills or text colors. |
How to Use the Property Management Table (Managing the Horizontal and Vertical Axes)
In the property management table, you can rearrange and edit list items and properties.
(1) Adding, Deleting, and Reordering List Items (Horizontal Axis)
Add, delete, and reorder list items using the property management table. The following actions are reflected in the List on the screen and in the Layers Panel.
Select the List.
The Right Panel opens. If the panel is closed, open the Right Panel.
Open the [Data] tab and perform the following actions in the property management table:
Add a list item: Click [+New] at the bottom of the property management table to add one.
Delete a list item: Hover over the item and click the trash icon that appears in the right column.
Reorder list items: Hover over an item and drag the slide icon that appears at the left edge of the table. You can also reorder by sliding the list item layer in the Layers Panel.
Note: Copying and pasting list items on the screen or in the Layers Panel won't add or duplicate them.
(2) Adding, Deleting, Reordering, and Renaming Properties (Vertical Axis)
Select the List on the screen or in the Layers Panel.
Perform the following actions in the property management table on the [Data] tab in the Right Panel:
Add a property: Click [+] in the upper right of the table and choose the property type.
Delete a property: Click the property name and press [Delete].
Reorder properties: Click and hold a property name, then slide it left or right.
Rename a property: Click the property name and edit it.
Point: To display the contents of a newly added property on the screen, you'll need to link it to a box using the steps described below.
Editing Property Content
You can edit the data shown in each list item from the Right Panel or directly on the screen.
How to Edit in the Right Panel
Select the List.
The Right Panel opens. If the panel is closed, open the Right Panel.
In the property management table on the [Data] tab of the Right Panel, edit the relevant cell.
Point: To link a List to data from a CMS, RSS feed, or API, click [Connect Data] above the property management table.
For details, see the article on Dynamic Lists.
How to Edit on the Screen
Only text properties and image properties can be edited directly on the screen.
Edit it directly on the screen.
For details on editing text boxes, see Text Box > Editing Text.
For details on working with image boxes, see Image Box > Replacing a Placed Image.
When you're done editing, click outside the List to confirm your changes.
Note: In the following cases, you can't edit directly on the screen. Edit from the [Data] tab in the Right Panel instead.
For Carousel (List)
When a string filter is applied
When text has been entered directly into the text field
Linking Data (Properties) to Design (Boxes)
The data managed in the property management table on the [Data] tab of the Right Panel is reflected in your design when it's linked to boxes within the list items.
Select a list item. You can select any list item within the List. If it's hard to select a list item directly on the screen, select it from the Layers Panel.
Open the [Data] tab in the Right Panel. If the panel is closed, open the Right Panel.
Drag the connector (handle) to the left of each property and drop it onto the box within the list item where you want it to appear.
Related Articles
list risuto risu ﾘｽﾄ