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.Learn more about:
The top bar The canvas & custom breakpoints Add panel Pages panel Layers panel Masters panel Theme manager The Inspector The page navigation menu App marketThe Top BarThe 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.Tell me moreThe top bar is explained below from left to right:
Settings:  Access your site's dashboard, connect a domain, change your site's settings, manage your site's SEO and more. Actions: Save, preview, publish, upgrade your site and more. View: Change the view in your Editor; zoom in and out, access the Inspector and Layers panel. Dev Mode: Turn on Dev Mode to add custom code to your site.  Help & Feedback: Access the Help Center to get view thousands of help articles, or  Academy X to view lessons about Editor X features. From here, you can also read about our updates and releases, report bugs and submit your feedback. Apps: Add new apps to your site from the Wix App Market. Upgrade: Upgrade your site with a Premium Plan. Save: Save your most recent changes. Preview: Preview the changes on your site before publishing. Publish: Publish your site and/or most recent changes.The Canvas & Custom BreakpointsYour 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 MoreAdd PanelClick 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 MoreSite Pages PanelClick 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 MoreLayers PanelClick 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 MoreSite Masters PanelCreate 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 moreTip:Any changes you make to a Master apply everywhere it's used on your site.Site StylesUsing 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 morePage Navigation MenuEasily navigate between your site's pages so that you can view and edit the page you want. Note:The page navigation is only for moving between your site's pages. To manage your pages (add, delete etc.) click Manage Pages on the page navigation menu.The InspectorThe 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 . Tip:Some tabs, like Design and Content Suggestions, are not available for all elements in Editor X. App MarketClick 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