Create multiple designs for the same widget. When you create design presets for a widget, its functionality and data remain the same, while the way it looks can change a lot. You can also use presets to create different designs for different viewports, like desktop and mobile. Learn more about design presets in Blocks.
To see examples of design presets, open the following templates and browse through the app widgets. Also, take a look at the widgets' installation settings.
To create and manage design presets in Blocks:
Open the widget you want to design.
Click + Add in the Design Presets panel.
Click the ֿMore Actions icon to rename, duplicate or delete a preset. Note that if you only have one preset, you cannot delete it.
To preview your design presets, click Preview > Test Design Presets.
Some changes you make in one preset impact only the current one, while others impact all of them. As a rule of thumb, design changes are per-preset, while structure or data changes are global. Here's a guide to help you track what happens when.
When users install your widget, you can allow them to select a preset from the Add to Site panel and later switch between presets using the Presets button in the widget’s action bar. You can control which presets appear by configuring their visibility in the installation settings.
You can create different presets for different viewports, such as vertical layouts for mobile. Wix Studio users can switch between desktop, tablet, and mobile views, while Wix Editor users can switch between desktop and mobile. When users select a viewport, they can change the preset using the Presets button, but presets for other viewports remain unchanged. You can also set a default preset for mobile in the installation settings.