Add Nested Widgets in Blocks

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.

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:

  1. Hover over the name of your widget and click the 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. 

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. 

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. 

Notes

  • If you don't want a site builder who installed your app to be able to customize the inner widget, define it as non-selectable in the Configuration tab within the Editor Experience  panel. 
  • If you don't want a site builder 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:

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:

Was this helpful?
Yes
No