Wix Blocks: Configuring Widget and Elements Display Names and Behavior

4 min read
Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.
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. Make sure to check out our UX guidelines for Configuration.

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: 

Widget behavior:  
  • Can be duplicated: You might want to prevent your widget from being duplicated by copy and pasting, (for example, if it's connected to dynamic pages and duplication might trigger conflicts or break code). In this case, uncheck this box.
  • Can be resized: You might want to prevent a widget from being resized, for design reasons. 

Element behavior: 
  • Can be selected: You might have organized all of your widget elements in a flexbox element, for design purposes. But when someone installs your widget on a site, you don't want them to touch the flexbox - because you want the design to stay as it is. In this case, uncheck this box.
  • Can be removed: Some elements might be crucial for your app logic. For example, an Add to Cart button. You would probably not want a site creator to remove it from the widget. In this case, uncheck this box.

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).

widget behavior

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:
layouter behavior
Notes
  • The changes you make when you are in the Configuration tab impact all design presets
  • In the Configuration tab, 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

Did this help?

|