Hey, it’s Kayla from the Wix Studio team, here to show you how to get started in the Wix Studio Editor.
Right away you’ll see your canvas.Inside the canvas, is a default header, section and footer, a site menu and logo.
Above your canvas to the left, you’ll have options to go to your dashboard, see your site-level tools and settings, and view all of your sites.
To the right of the toolbar is the page navigation of your site, right now there’s only a home page but you’ll see more here as you add them.
Directly above the canvas is where you’ll find the three default breakpoints for your site: Desktop, tablet and mobile.
Not all desktop, tablet and mobile screens are the same size though, so instead of editing for thousands of unique screen sizes, you can edit for ranges of screen sizes at once using these breakpoints.
You can also use the resize handles on your canvas, which lets you see how your design will behave on different screen and browser window sizes within the same breakpoint range.
Once you let go, they’ll snap back to the default canvas size.
And over in the top right, we have Undo, Redo, Preview and Publish.
The left panels are all about adding content and controlling your design. First is the Add panel.
When you open the Add panel, you’ll see the Quick Add menu, which has some important site elements ready to be dragged right onto the canvas.
Next is the Assets tab, which is where every element, section and container you save will live, so you can reuse them across different pages on your site.
Then you have pre-designed sections.
For most of these, you can choose a pre-designed section that already looks good on every breakpoint.
Then you can just adjust it to fit your specific design needs. If you’re curious how it was built, you can just drag one onto your canvas to see the different components and properties it uses. But you can always create by starting from a blank canvas too..
Then over here there are some other elements you can add like containers, layout tools and more.
At the bottom, there’s integrated business solutions like blog, eCommerce, bookings and events.
Next up is the Layers panel. This shows you the structure of your pages.
As we saw, the canvas comes pre-loaded with a default header, page, footer, site menu and logo. You can see each of these and how they fit together in the Layers panel…
And you can see the hierarchy of the Designed section we dragged over as well.
Next is the Pages tab, which gives you an overview of all your site pages, and you can manage the settings for each page by pressing these three dots right here.
Then, there’s Global Section s, which are sections that you can choose to have shown on every page of your site. You can use Global Sections to create headers and footers, but you can also apply them to any page or section on your site.
Next is Site Styles, which includes font and color styles., they’ll help keep your site’s design consistent. You can add your own styles and sync them with the relevant items and elements on your site.
And as you update these palettes, the elements you connected will update automatically.
After that, is the App Market, where you can browse and search for relevant apps for your clients sites.
Underneath it is your CMS, which lets you create multiple pages at once and dynamically populates their content with datasets.
Then this is our built-in developer platform, where you can extend your sites and business functionalities with custom code.
Now let’s move over to the Inspector. This is where you control and edit each element’s properties. You can open it by clicking the arrow to the right of the canvas.
Under Design, you can adjust any element’s size, design, layout and position. Depending on what element you select, you may have other options available, like cursor and anchor.
The Interactions tab is where you can make any element interactive, such as Entrance animation, hover or click interaction, and scrolling or loop animation.
There’s a third Content tab that only appears when you click a piece of content on the canvas. It’ll give you the option to replace that element with another content option.
Lastly, on the bottom left of the canvas, you’ll see a few other overview options for your site.
The speech bubble here is your comments panel, that lets you and your collaborators, clients, and teammates communicate with comments directly on your site elements.
Under Help, you can get in touch with our support team if you run into any issues or have any questions along the way.
And that’s a quick overview of the Studio Editor.
See you next time.
