You can use some keyboard shortcuts on the STUDIO, the online website builder. Keyboard shortcuts reduce mouse and trackpad operations, and you can build pages faster. This article introduces official shortcuts and also unofficial ones, which I have found.
For Windows, replace ⌘ with Ctrl.
Officially announced shortcuts
The shortcuts listed in the STUDIO U (Japanese article) are as follows.
Box editing actions
It works on the editor canvas or layer panel.
| Action | Keys |
|---|---|
| Copy | ⌘ + C |
| Cut | ⌘ + X |
| Paste | ⌘ + V |
| Delete | delete |
| Group | ⌘ + G |
| Ungroup | ⌘ + shift + G |
| Create list | ⌘ + L |
| Create symbol | ⌘ + J |
Box selection actions
It works when selecting some element on the editor canvas or layer panel.
| Action | Keys |
|---|---|
| Select multiple items | shift + click |
| Select child box | return (enter) |
| Select parent box | esc |
| Select next box | tab |
| Select previous box | shift + tab |
By mastering selections, you can increase your work efficiency by applying the same state to multiple elements in a single operation. Also, selecting parent and child boxes from the keyboard allows you to go to the desired layer without opening and closing layers.
Editor action
| Action | Keys |
|---|---|
| Undo | ⌘ + Z |
| Redo | ⌘ + shift + Z |
| Zoom in/Out | + / - |
| View in 100% | ⌘ + 0 |
| Enable / Disable content editing mode | ⌘ + 0 |
Undo shortcuts will let you return to the previous state instantly. In 100% view, the canvas will be displayed the same size as the actual website, reducing impression differences.
Unofficial shortcuts
The following shortcuts are not on the official shortcut list above, but I have confirmed that they work. I discovered these shortcuts by pressing keys that I thought might work.
Box editing actions
| Action | Keys |
|---|---|
| Duplicate | ⌘ + D |
| Duplicate by D&D | option (alt) + D&D |
Duplicate
Duplicate by drag&drop
Panel actions
Opens/closes each panel.
| Action | Keys |
|---|---|
| Open the Pages Panel | ⌘ + 1 |
| Open the Layers Panel | ⌘ + 2 |
| Open the Add Panel | ⌘ + 3 |
| Open the Styles Panel | ⌘ + 4 |
| Open the Box Settings Panel | ⌘ + 5 |
Layer actions
By clicking the layer toggle > with holding down the option key, it will open and close all the layers under it. Knowing this shortcut made all the difference in my working speed!
| Action | Keys |
|---|---|
| Open/close all Layers | option (alt) + click |
Page actions
Go back to the page that was opened before the page you are currently opening. These might be Google Chrome's shortcuts.
| Action | Keys |
|---|---|
| Previous Page | ⌘ + ← |
| Next Page | ⌘ + → |
Richtext editing
You can use these shortcuts in CMS article bodies and rich text boxes. In addition to the shortcuts below, you can use markdown as well.
| Action | Keys |
|---|---|
| Make the selection bold | ⌘ + B |
| Italicize the selection | ⌘ + I |
| Underline the selection | ⌘ + U |
| Make the selection strikethrough | ⌘ + shift + S |
| Add the link to the selection | ⌘ + K |
If you know any other shortcuts, please let me know!
Original Post: STUDIOの公式＆非公式キーボードショートカット一覧 (Japanese article)
Top comments (0)