Create and Manage Design Presets

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 create design presets in Blocks:

1. Open your app in the Wix Blocks editor.
2. Click + Add Design Preset.
3. Click the ֿMore Actions icon   to rename, duplicate or delete a preset. Note that if you only have one preset, you cannot delete it. 

Make Changes Per Preset Versus Global Changes

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. 

Changes that impact all presets

• Add an element from the add panel.
• Duplicate, copy, cut and paste an element.
• Delete an element.
• Hide an element on all other presets (click the More Actions icon  in the element's action bar and then click Display -> Hide on all other Presets). 
• Reparent an element.
• Group and ungroup elements.
• Manage the items in a repeater (reorder).
• Stack, unstack, add to stack and detach from stack (however, changing the order of stack items impacts current preset only).
• Text: change text content.
• Text - structural changes: theme (such as Heading 1 or Paragraph 2), a link, bullets, numbering, indentation, text direction and heading tag.
• Replace a decorative shape (icon).

Changes that impact only your current preset

• Resize a widget.
• Set widget overflow content options, position, design and adjust options.
• Hide an element in this preset (click the More Actions icon  in the element's action bar and then click Display -> Hide on this Preset). 
• Change an element's design and layout.
• Change an image's focal point.
• Hide, show and reorder widget layers.
• Grids: change the number of rows or columns, define row and column size, set gaps, move elements between cells (change grid areas). 
• Flexboxes: set display type, item properties, auto-wrap, margins, direction and proportions.
• Reorder stack layers.
• Text - design changes: font, scaling, size, bold, italic, underline, color, highlight, alignment, line spacing and character spacing.

Switch Between a Widget's Design Presets on a Site

When you install a widget, its presets appear in the Add to Site panel when you click on any app in App Widgets. If you installed one preset and want to change it, you can switch to another preset through the  button in the widget's action bar. 

The Add to Site Panel

The Presets Panel

Change Presets According to Viewport

You can create different presets that are intended for different viewports. Presets designed for mobile, for example will be vertical.

Wix Studio users can select from three tabs in the top bar -  desktop, tablet or mobile . Wix Editor users can select from two tabs - desktop or mobile. When they are in the chosen tab, they can change the preset through the Presets button in the widget's action bar. The presets of the other tabs will not change.

You can easily set which one of your presets should be installed when a user is in mobile view through the Presets Visibilit section in your widget's Installation Settings. However, your users can always choose to change the default preset and select a different one.