Studio Editor: A Guided Tour

5 min read
Welcome to the Studio Editor, our advanced and intuitive platform for agencies and enterprises to create exceptional sites. 
In this article, we'll get to know every part of the Studio Editor - what it is, what it controls, and how it helps you work more efficiently.
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.
Learn more about:

The canvas

The canvas refers to the page you're designing, right in the middle of the editor. 
You can set the default canvas size you want to work with, and drag the side handles to see how the page looks when resized.
A full screen screenshot of the Studio editor, marking the location of the canvas
Clicking an element selects it, and opens a toolbar of options. These options vary depending on the specific element, helping you customize it to your needs. 
A screenshot showing the toolbar that opens when clicking an element on the canvas
You can hover over an element's label to select one of its parent elements instead.
A GIF showing the breadcrumbs that open when hovering over an element label, showing the parent elements

The top bar

The top bar includes many useful tools to control the site and your view of the canvas. 
Hover over the Wix Studio logo to open a menu with site actions, viewing options and shortcuts to other parts of your account. 
A screenshot showing the menu that opens when hovering over the Wix Studio logo
Use the page drop-down to quickly navigate between site pages. The list is organized by page type (e.g. store pages, member pages) so you can find the one you need even quicker.
A screenshot of the page drop-down at the top of Studio Editor
In the middle of the top bar, you can find everything to do with breakpoints and canvas size. Click the breakpoint icons to see and adjust a page in different screen sizes. 
The screen size you see is the current size of the canvas. It's also the default editing size for the breakpoint you're currently on. Each breakpoint has its own default size that you can set to whatever is comfortable for you.
A screenshot showing the panel that opens when hovering over the screen size, letting you set a default size
On the right hand side, you can see who else is currently working on this site. You can also check site notifications, undo or redo actions, preview and publish. 
A screenshot of the right hand side of the top bar

The left side panels

On the left side of the Studio Editor, you can find the main panels you'll work with: 
  • Add Elements: Find hundreds of elements to add to the site, whether they are design elements or business apps like an online store. Use the tabs to navigate between the different categories.
  • Layers: See the page's layers and elements, in a hierarchy from top to bottom. When selecting a parent element (e.g. section, container) in the panel, you can see all of the elements inside, change their order, hide them and more.
  • Pages: Add new pages, edit each page's settings and delete those you no longer need.
  • Global Sections: This panel shows all the global sections, which are the sections you set to appear on multiple pages. You can rename, duplicate, delete or add global sections to pages they don't appear on.  
  • Site Styles: See and adjust the site's visual language. The typography styles, colors and page transitions you set here apply to the entire site.
  • App Market: Browse through hundreds of apps in the Wix App Market and find the ones that suit your needs.
  • CMS (Content Management System): Manage the site's content, collections and dynamic pages. 
A GIF showing all the different left side panels at a glance

The Inspector panel

The Inspector panel is the "control center" for each and every element. 
Once you select an element on the canvas, you can set its size, position and design from this panel. You can also apply animations to the element or add an anchor, allowing you to link directly to it.
A GIF showing the different sections and tabs of the Inspector panel

Additional panels

Last but not least, there are several panels at the bottom left of the editor that you should know about. 
  • Site Checker : Use this tool to look for issues we recommend fixing across your site, to make the visitors' experience ideal. 
  • Velo Dev Mode : Turn on dev mode to add your own code to this site. 
  • Comments : Communicate with teammates who are also working on this site, directly in the Studio Editor. Every page has a separate comments board so you can leave specific feedback for others and ask them questions. 
  • Help : Browse through our resources, share feedback about the Studio Editor or contact Customer Care. 

Did this help?

|