Hey, I’m Kayla from the Wix Studio team. Let’s cover how to use the Responsive AI tool in Wix Studio.
You can use Responsive AI in a few different ways: on just one section at a time or just on the mobile breakpoint.
Let’s try it on a section first.
Once you add everything to the section you want to make responsive, select it and then click the AI icon, and then click Generate Now.
While the AI generates a responsive design for you, you’ll be able to see what it’s doing in the background in real time.
And when it’s done, it’ll show you its suggested design. Now you can check this out…
You can always click Discard Changes to undo it.
But if you’re happy, just click Use Design and it’ll apply those changes to your section.
If you change your mind later and want to undo these changes, you can always click Undo up here.
Even after you apply the responsive AI design to your site, you can still edit it however you want on each breakpoint, just as you would have manually, so you can always use AI to create a starting point and then customize your design from there.
Keep in mind that the AI will add any structural elements like grids or stacks that it thinks your section needs to be responsive ;across breakpoints, like here.
If you want to adjust your mobile design a bit, you can apply the AI on just the mobile breakpoint.
So let’s select the section and hit the responsive AI, this time while on the mobile breakpoint.
Now that the design is generated, if we like it, we can just click apply for that section–and the rest of your design will stay the same.
And again, I can make some adjustments on mobile after I apply the design.
And those design changes won’t apply on the other breakpoints.
Keep in mind that if you run the AI again after you make changes, the result might override the changes that you make.
But if you make any changes to a property that the AI didn’t impact on a higher breakpoint, like this button’s color, that change will cascade down to the lower breakpoints.
If the AI creates an override on an element’s property in a lower breakpoint, like the button’s position, the changes you make to that element on higher breakpoints won’t cascade unless you remove the overrides created by the AI.
So if you change the layout and find that your site isn’t as responsive as you’d like, you can always just run the AI again.
So that’s Responsive AI.
I’ll see ya in the next tutorial.
