Wix Studio: About the Studio Editor

5 min read
Introducing our new Studio Editor, the ultimate platform tailored for professionals to effortlessly create sites for clients. With its intuitive interface, you'll experience seamless editing and full pixel control, ensuring every detail meets your vision.
Harness the power of AI responsiveness to design websites that captivate on any screen or device, delivering an incredible user experience every time.

Build responsive sites for your clients

The Studio Editor provides a range of practical tools to ensure your websites look fantastic on all screens. This means that you can focus on the design and spend less time figuring out the right sizing units for every element.  
Design an element the way you want it to look on desktop, then choose a responsive behavior that meets your needs. The responsive behavior ensures it automatically adjusts to different breakpoints.
Need more precise control?
Use advanced, responsive measurements to resize and position elements on every breakpoint.
An example of the available responsive behaviors for an element in the Inspector
To make the process even quicker, use a responsive layout tool to group related elements, based on either CSS grid or flexbox. For example, grids keep elements in their respective cells, while stacking elements maintains their vertical or horizontal order.
A GIF showing how to drag grid lines on the canvas to easily add columns or rows
Reuse your designs for ultimate efficiency:
Create your own custom assets, like designed sections and site templates, to save, share and reuse on other sites.
A screenshot showing how to save a designed element as an asset to a library

Collaborate on sites in real time

The Studio Editor is a collaborative real-time platform that lets teams work simultaneously on the same site. You can edit the layout, design and content of pages or elements without overriding people's actions.
A screenshot showing 3 avatars at the top of the Editor, meaning 3 people working on the same site simultaneously
Changes made by other users appear in your Editor within seconds. This minimizes conflicts and allows you to work efficiently with teammates and clients alike.  
A screenshot showing another teammate selecting an element and how it looks in your Editor
You can also resolve any issues clients or teammates have raised directly on the canvas. Use the Comments panel to manage any communication related to a site, without ever leaving the Editor. This is a great place for the team, and your clients, to share feedback and tackle issues together. 

Example of a client commenting on a page for the site team to fix

Bring your designs to life with animations

Incorporating our animations in your designs can really take them to the next level. The Studio Editor offers 5 different animation types, based on the moment in time you want them to appear.  
You can make animations appear when visitors hover over, click or scroll past an element. You can also add an entrance animation (for when the element first loads), or one that loops continuously - no visitor interaction needed. 
Example of a live site with animations applied to multiple elements

Harness the power of AI

AI is not just a buzzword – the Studio Editor offers a suite of AI-powered capabilities that make the site creation process that much quicker. 

Generate a responsive layout

Make your pages or sections responsive with the click of a button. Our AI tool analyzes the current layout, then places a responsive structure that makes it look ideal. This means you don't have to check every breakpoint and spend time on resolving design issues.
Example of a preview you see after the responsive AI tool generated a layout

Generate text

Our AI Text Creator brings OpenAI's Chat GPT directly into the Editor. Enter a few details to create the prompt and get custom content suggestions for your project. This helps you save time on the writing process without compromising on quality. 
A GIF showing how to apply an AI text suggestion to a paragraph on the canvas

Generate images

Need unique images that don't appear anywhere else? Describe the image you want and get multiple suggestions to use on the site. There are many styles to choose from - illustration, 3D, packshot, photo and many others - so the results can match exactly what you're looking for.
A screenshot of the AI Image Creator and four image variations based on a prompt.

Manage large amounts of content in a code-free CMS

Our CMS (Content Managing System) allows you to store huge amounts of content, create dynamic page templates and accept data inputs from visitors. Post-handover, your clients can use the CMS to update and add content without affecting your design. 
A screenshot showing the dataset connections in a repeater.

Add your own CSS code

Adding CSS to your elements opens a whole new range of styling possibilities. It allows you to create unique designs and animations while maximizing responsiveness. 
Select an element on the canvas, then choose one of the global classes to get started. Can't find the one you want? You can add your own custom classes to the code.
Example of a global css page in the Editor, selecting a button and showing the available CSS classes

Did this help?

|