Wix Blocks: Creating and Managing Widgets Within Widgets

4 min read
Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.
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.  
Note
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. 
see all widgets

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 app structure Panel. There are two ways to add another widget.

First way to add an inner widget:
  1. Hover over the name of your widget and click the More Actions more actions icon.
  2. Click Add Widget.
  3. Select the widget that you want to add. The widget is then added to your current widget. 
click add widget
Second way to add an inner widget:

  1. Open the Add Elements panel.
  2. Click My Widgets.
  3. Click or Drag the widget that you want to add to the stage.
  4. 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 the Velo ID. 
widget 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. 
manage inner widget in wix editor
If your inner widget has properties, you can access them through the Settings panel of the inner widget. 
inner widget settings
Notes
  • If you don't want a site creator who installed your app to be able to customize the inner widget, define it as non-selectable in the Configuration tab. 
  • If you don't want a site creator who installed your app to be able to add the inner widget independently, not as part as the outer widget, you can define it in the Preset Visibility section of your app's Installation Settings

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:
design presets widget in widget in the editor
You can also create separate design presets for the inner widget. You can change its presets independently from the outer widget, using the Design design button in editor button in the action bar of the inner widget. 
The following example shows the design presets for the inner widget:
design presets widget in widget

Did this help?

|