Wix Responsive AI: A Great Tool Barely Anyone Talks About

Ever since Wix launched their newest flagship product, Wix Studio they finally dived into the world of responsiveness. With their classic editor, customers were only possible to optimize their page for desktop and mobile. Even with these two, only specific screen sizes were optimizable. No Tablet, no huge screens, no nothing. With the introduction of Wix Studio they create an editor that allows you to create fully responsive websites. From screen sizes of 320 px onwards, you can optimize your page for different screens. In their quest to create a more suitable workspace for agencies, freelancers, and enterprises, Wix introduced their Responsive AI. This handy tool allows you to create optimized sections across all your breakpoints. So let's dive into the Wix Responsive AI Tool; how you can use it and why it is beneficial for every Wix user to use this tool.

What is a breakpoint?

Basically, a breakpoint is a screen width. It is a px value that divides different output devices. So for example, if you want to show a different version of your site on a tablet than you show on a desktop, you define this by choosing a breakpoint. In this example, the breakpoint could be 1000 px. Everything above and including 1000 px shows the desktop version of your site. Everything below shows the tablet version. You can read more about this in this article by Wix. Now that you have an idea what a breakpoint is, we can start using Wix Responsive AI to design across all breakpoints.

How does Wix Responsive AI work?

Of course, I don't have the source code, but I can give you a guide on how to use it. Later on we will look at an example on one of my own sites. The great thing is the AI tool only gives you a suggestion. You don't have to use it. But I find it builds a good basis. With a few twists and turns, you can create something truly awesome in a matter of minutes. So here is what you need to do in the Wix Studio Editor.

1. Click the Desktop breakpoint at the top of the Editor.

2. Select the relevant section. 

3. Click the Responsive AI icon.

4. Click Generate Now.

5. (In the preview) Click through the breakpoints to see how the section looks. 

6. Choose what to do next:

   • Apply Design: Instantly apply the AI suggestions to the section.

   • Discard Changes: Ignore the AI suggestions and go back to your original design.

   
   
   
   
   
   

So how does it look in action?

So here you can see how it looked on my new landing page. As you can see, the mobile view looked absolutely awful before I let the AI run over it. Now it still isn't perfect. But which AI really is. As I said, you probably still need to make small adjustments to create an awesome breakpoint. And always remember that the better your layers are organized, the better your AI outcome will likely become.