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. 

Widget and Elements Display Names

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.

Setting a display name for a widget or element

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:
  1. Click the Configuration tab, to enter configuration mode.  
  2. Select the correct widget from the Widgets panel on the left (if you want to name a specific element inside the widget, select it).
  3. Click the Inspector  icon in the top right corner to expand the Inspector panel, if it isn't expanded yet. 
  4. Insert the new display name under Component Name
setting a display name for your widget

Configuring widget or element behavior (selectable, removable, duplication and resize)

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

  1. Make sure you are in Configuration mode. 
  2. Select the element you want to configure. 
  3. 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

  1. Make sure you are in Configuration mode. 
  2. Select the image from the Widgets panel. 
  3. 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).

Configuration and presets
Note that the changes you make when you are in the Configuration tab impact all presets.
Learn more about design presets in Blocks
Configure action bars
You can also modify the action bars connected to each element when your widget is installed on a site. Learn more about modifying action bars
Want to learn more about Blocks?