Wix Blocks: Configuring Widget and Elements Display Names and Behavior

4 min read

Wix Blocks is currently open to a limited number of users.

The Configuration tab in Blocks enables you to decide how your widget and its elements look and behave when they're installed on a site.

There are lots of ways you can help site creators to get the most out of your app. Giving the elements in your app a display name makes it clear to site creators what each element does. You can also decide how they use different elements, and give them design options.

If you don't define these display names, your widget and its elements will have default display names like "widget" and "button". They will also have Velo nicknames such as "#widget1" in the Properties and Events panel.

When you design a widget, you want the site creators who install it on their site to understand what it does. You also want them to be sure about what each of the widget's elements does.

For example, you can make sure that your widget is called "Single Product" and that one of its buttons is "Add to Cart".

To set the display name:

Click the Configuration tab, to enter configuration mode.
Select the correct widget from the Widgets panel on the left (if you want to name a specific element inside the widget, select it).
Click the Inspector icon in the top right corner to expand the Inspector panel, if it isn't expanded yet.
Insert the new display name under Component Name.

See how it looks on a site

In some cases you might want to control the way the widget or its elements behave. Let's take an Add to Cart button, for example. You would probably not want a site creator to remove it from the widget.

Another example: for design purposes, you might have organized all of your widget elements in a layouter. But when someone installs your widget on a site, you don't want them to touch the layouter - because you want the design to stay as it is. So, you can define the layouter as non-selectable.

You also might want to prevent your widget from being duplicated (for example, if it's connected to dynamic pages and duplication might trigger conflicts or break code) or from being resized (for design reasons).

Configuring an element's behavior

Make sure you are in Configuration mode.
Select the element you want to configure.
Select or un-select the checkboxes Can be selected and Can be removed in the Behavior section of the Inspector panel (if you can't see the Inspector, click on the icon to expand it:

Configuring a widget's behavior

Make sure you are in Configuration mode.
Select the image from the Widgets panel.
Select or un-select the checkboxes Widget can be duplicated and Allow widget to be resized in the Behavior section of the Inspector panel (if you can't see the Inspector, click on the icon to expand it).