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

1. Open the widget you want to design.

2. Click + Add in the Design Presets panel.

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.

   

4. To preview your design presets, click Preview > Test Design Presets.

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.

Define Preset Visibility in the Widget Installation Settings

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.

The Add to Site Panel

The Presets Panel

Change Presets According to Viewport

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.