Editor X: A Guided Tour

Editor X contains several tools and features to help you build your own stunning and fully responsive site. In this guide we will introduce you to the different parts of the Editor so that you can make the most of it.

The menu bar at the top of Editor X contains several tools and settings to help you manage your site. Have a look through the menus to see what you can do.

Your canvas is the site editing area of your workspace. This is where you can see and design your pages for different screen sizes so that they always look just as you want. 

At the top of your workspace, you can access preset breakpoints for the most common devices (desktop, tablet, mobile) and create custom breakpoints as well. 

Click the breakpoint icons at the top to design for the different viewports, or use the resize handles on the side to see how the design behaves as the screen becomes wider or narrower. Learn More

Click the Add icon  at the top left to open the panel. Here you will find hundreds of elements to add to your site, whether they are design elements or business apps like an online store. Use the tabs to navigate between the different categories. Learn More

Click the Site Pages icon  at the top left to access a list of your site's pages. From here, you can add new pages and delete those you no longer need. You can also manage a page by hovering over and clicking the Show More icon . Learn More

Click the Layers icon  at the top left to access the panel. It displays all of your page's sections in a hierarchy from top to bottom. When selecting a section or a container in the panel, you can see all of the elements inside (e.g., text, button, etc.), change their order, hide them and more. Learn More

Create Master sections to show on multiple pages of your site. Click the Masters icon  at the top left to see a list of your site masters and choose which pages should display them. If you see a green check mark next to a Master section, it means that it's displayed on the page you're currently viewing. Learn more

Using the Site Styles panel, you can create a visual language for your site with typography, colors and page transitions. Create styles that speak your brand and apply them while designing your site. 

Click the Site Styles icon  at the top left to access your styles and make adjustments if needed. Learn more

Easily navigate between your site's pages so that you can view and edit the page you want. 

The Inspector panel lets you see, design and edit the properties of each element on your site. You can choose how elements are aligned and resized on different breakpoints, change their docking position, add scroll effects and more.

Click the Inspector icon  at the top right. Depending on the chosen element, you can click through the tabs to customize it further: Layout , Design , Interactions  and Content Suggestions . 

Click the App Market icon at the top left to browse through hundreds of apps in the Wix App Market and find the ones that suit your needs. Learn more