Opening the Design Editor
Opening the Design Editor from the project list
Hover over a project, then click the [Design Editor] button that appears.
![Screenshot: Selecting the [Design Editor] button on the project list screen](https://downloads.intercomcdn.com/i/o/xqogzym4/1858485834/541b59e49a1be3c888ddc0995d5c/image.png?expires=1778760000&signature=d49756835fa0adfe8266f555ae83864dbf486daa98f9fa0c9899c6e82f1bc522&req=dSgiHs12mIlcXfMW3nq%2Bgcd7Iwpt%2FGRVTxz63K3VOizyIx1UfLIqgQYGCcUw%0ABBcIl8cJDXX41uzYvzI8jbGvR6M%3D%0A)
Opening the Design Editor from the project dashboard
Click the [Design Editor] button in the upper-right corner of the dashboard.
![Screenshot: The project dashboard with the [Design Editor] button highlighted in a red border in the upper-right corner.](https://downloads.intercomcdn.com/i/o/xqogzym4/1858494083/1a4baef0c64a96661deeda782796/image.png?expires=1778760000&signature=883f4c9b4e63f48ca6dfa81f8bbeb7a92e6c1691dc7dba7a41bf37e0f5aad39b&req=dSgiHs13mYFXWvMW3nq%2BgYV00Tu9WXefgttOU7knn7Dfro2BvH1Yra42xFZP%0A2MLq9VoifL5yvu9EHDFNmCtvPJc%3D%0A)
Design Editor layout
Here's an overview of the Design Editor layout and the names of each area.
① Navigation
④ Screen
⑤ Toolbar
① Navigation
The Navigation is the section of icons on the left side of the screen. Clicking each icon opens a menu with its corresponding features.
Here are the actions available in the Navigation:
| Action | Notes |
1 | Open the project main menu | The [Undo] button is located in this menu. |
2 | Open the Add panel |
|
3 | Open the Pages panel |
|
4 | Open the Layers panel |
|
5 | Open the Styles panel |
|
6 | Open the Uploads panel |
|
7 | Open the Stock panel |
|
8 | Open the Connect panel |
|
9 | Open the Components panel |
|
10 | Open Version History | This opens in the Right Panel. |
11 | Switch to Comment Mode | This opens in the Right Panel. |
12 | Switch to Content Edit Mode | This opens in the Right Panel. |
13 | Open the pre-publish Studio setup guide | This icon only appears if "Show site setup guide" is enabled in your Account Settings. |
14 | Open support content | Access help articles, tutorial videos, Studio Community, AI support, and live support. |
② Left Panel
The panels that open on the left side of the screen are collectively called the "Left Panel." The Left Panel is primarily used to add elements to the Screen.
Click the following icons in the Navigation to open their corresponding menus in the Left Panel:
Add
Pages
Layers
Styles
Uploads
Stock
Connect
Components
For more details, see the Left Panel page.
③ Right Panel
The panels that open on the right side of the screen are collectively called the "Right Panel."
The Right Panel opens when you select any box on the Screen or click the open/close icon in the upper-right corner of the screen.
Here's what you can do in the Right Panel:
Element-specific settings
Site and page meta information settings (Site Settings, Page Settings)
Some Navigation features
For more details, see the Right Panel page.
④ Screen
The Screen is the white area in the center of the editor. This is where you place boxes — such as text and images — to build your web pages.
The name of the page you're currently editing is displayed in the upper-left corner of the Screen.
Use the icons in the upper-right corner of the Screen to delete, duplicate, or add pages.
Drag the slide bars on either side of the Screen to adjust its width. Narrowing the width lets you fine-tune your design for tablet and mobile views.
For more details, see Setting up responsive design.
⑤ Toolbar
The Toolbar is used for responsive design settings and breakpoint settings. It's always visible at the bottom of the editor.
