Wix Harmony Editor: A Guided Tour

Welcome to Wix Harmony, the all-new, all-in-one builder that puts creative magic at your fingertips. With smarter AI tools, dynamic design options, and total freedom to build your way, you can launch your first site or reimagine your latest project with confidence. 

In this article, we'll get to know the editor. Get ready to design, create, and innovate faster than ever before – no design or coding experience needed.

The action bar sits right above the page, giving you instant access to settings and tools tailored to what you’re working on. Select a menu, section, or element, and you’ll notice the options update automatically. 

For example, when you select a text element, the action bar gives you quick the option to change its font as well as size, alignment and formatting. Then, if you select the header, new options appear like changing the background, adding a scroll effect and more. 

At the top left of the editor, you can access everything that drives your editing workflow. Easily switch between pages, see your brand's colors and fonts, publish changes, get info from the dashboard and so much more. This bar keeps your most important controls only a click away, helping you work fast and stay organized. 

Click below to learn more about every part of the top bar. 

The Add Elements panel is your creative launchpad in the Wix Harmony editor. From here, you can explore a huge library of elements such as headings, images, slideshows, menus, and even third-party apps. 

Filter by category or use the search bar to quickly find what you need. Then, drag elements onto your canvas and start shaping your site. 

Aria, your multi-skilled AI partner, is here to help streamline your workflow. Click the Aria icon at the bottom right of the editor to start chatting. When selecting an element, you can also click Ask AI on the action bar for tailored prompt suggestions.

Ask Aria to move sections, generate a new design, fix layout issues, or improve section text—all with a simple command. If you need to make more changes, just send another message to Aria right in the chat.

At the bottom left corner of the editor, you'll find additional panels to help you control every part of your page. Use the Layers panel   to see the structure of every section and element on your page—great for fine-tuning layouts and managing overlapping items.

Click the Help icon  to see tailored tips, guides, and answers specific to where you are in the editor. This makes it easy to get support and discover new features, without ever leaving your workspace.

At the top right of the page, quickly switch between desktop and mobile views with a single click. The mobile view lets you see how your site looks on smaller screens. 

While your site is automatically responsive to different screen sizes, you always have the freedom to adjust the mobile design and give your visitors the best experience possible, no matter the device.