The Layers panel displays elements like text, images, and boxes in a hierarchical list."
Click [Layers] 
in the left navigation menu of the design editor to open it.
Point: Box Layout and Layers Panel
Box Layout" is the layout method used by Studio and is based on the structure of a website built through coding. As a result, a site created in Studio has a structure in which elements (i.e., boxes) are stacked or nested. The Layers panel is where this can be visually confirmed.
For more information on box layout, please see the following help articles
In the Layers panel, you can
Select and edit elements
Select elements
Change the order and overlapping order
Copy and paste
Delete
Rename layers
Check pre-defined design settings
Check conditional style settings
Check responsive design settings
Select Elements
Clicking on any element in the Layers panel will simultaneously select the corresponding portion on the screen.
Tips: Select an Element with a Hierarchical Structure
Elements with a [>] to the left of the layer name have a hierarchical structure. Click [>] to expand the lower layer.
![スクリーンショット：レイヤーパネルで階層構造を持つ要素を開いている様子。レイヤー名称の左の[>]をクリックすると、[>]の矢印の方向が下向きに変化します。](https://downloads.intercomcdn.com/i/o/xqogzym4/1857499554/97f444090083dcf417239c58e27d/layer_2.png?expires=1765087200&signature=8722a234741bcc5f2c863684bb555686b9c5cfe5df9976e42c56d30bc7476806&req=dSgiEc13lIRaXfMW3nq%2BgenD%2F3qT7cganNzpQ0wTmHP9iBlcxJabEaOmrD45%0AHAdtlpa4itQBXL0mwVkKdv3LyqA%3D%0A)
Change the Order and Stacking Order of Elements
You can change the order of the elements or the stacking order by dragging and dropping.
This is useful for complex layout editing, as you can work while visually grasping the structure.
Copy and Paste
You can copy and paste elements from the Layers panel by following these steps
In the left navigation of the Design Editor, click on the Layers panel
.Select the target element in the Layers panel.
After selecting, use the following shortcut keys to copy and paste.
OS | Copy | Paste |
Windows |
|
|
Mac |
|
|
Delete Elements
You can delete elements from the Layers panel by following these steps
In the left navigation of the Design Editor, click on the Layers panel
.Select the element in the Layers panel.
After selecting, delete the element using the shortcut key.
Rename Layers
Giving a name to a layer helps you manage design settings. This name will not be reflected on the public site.
In the left navigation of the Design Editor, select and click on the Layers panel.
Select the element and double-click to make the name editable.
Tips: Layer Rename
You can use the Layer Rename function to have AI automatically optimize layer names.
Place the cursor on the layer and click the button 
(magic button) to activate it.
Check Design Settings
Check Conditional Styles
Click the diamond-shaped icon 
at the top of the Layer panel to check the conditional style ( cursor hover, animation on appearance) settings.
Check Responsive Design Settings
Click the overlapping squares icon 
at the top of the Layer panel to check the responsive design settings for each breakpoint.
For detailed settings, switch to each breakpoint from the toolbar.
