Wix Blocks: Creating and Managing Widgets Within Widgets
4 min read
Wix Blocks is currently open to a limited number of users.
Blocks enables you to add one widget to another widget. For example, in this slot machine widget, the spin button is a separate widget, that was inserted into the main widget. Both the external widget and the internal widget are then customizable when you install the external widget in the editor.
You can only add a widget to another widget if they are both part of the same Blocks app. You cannot copy a widget from one app to the other.
Inserting a Widget into another Widget
Select the outer widget, in which you want to insert an inner widget, in the Widgets section of the App Structure Panel. There are two ways to add another widget.
First way to add an inner widget:
- Hover over the name of your widget and click the More Actions icon.
- Click Add Widget.
- Select the widget that you want to add. The widget is then added to your current widget.
Second way to add an inner widget:
- Open the Add Elements panel.
- Click My Widgets.
- Click or Drag the widget that you want to add to the stage.
- Drag the inner widget to the desired location within the outer widget.
Notice that when you hover over or click on the inner widget, you see the widget's name and Velo nickname.
Managing the Inner Widget in the Editor
When you install a widget that has an inner widget, the inner widget can be customized as well. In the following example, the app is installed and the inner widget is selected and can be managed.
If your inner widget has properties, you can access them through the Settings panel of the inner widget.
Using design presets
Design presets allow you to create different designs for the same widget. When you install the widget on a site, you can easily switch between the design presets to change the look of your widget.
Learn more about design presets in Blocks.
The following example shows how you can change the design preset of the widgets as a single unit, using the Design button in the action bar:
You can also create separate design presets for the inner widget. You can change its presets independently from the outer widget, using the Design button in the action bar of the inner widget.
The following example shows the design presets for the inner widget:
Installing widgets within widgets on the Editors
The inner widget is installed automatically when the site creator imports your app. However the site creator can choose to install the inner widget separately on the site, without the outer widget.