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.
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Did this help?
|