Wix Blocks: Designing Custom Panels for Your Widget's Action Bar Buttons
7 min read
Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.
Blocks enables you to create custom panels for the action bars in your widget and its elements. When a site creator clicks an action button (for example, the Settings button), a custom panel opens, instead of the default panel.
When you create custom panels, you give site creators more options for working with your widget, adding to its usability, and helping them to customize it more easily on their site.
Creating your panel has three main stages:
2. Add code to your panel to make it work.
Notes
- Connect your panel: define which panels goes with which action button in the Configuration tab.
- User experience guidelines: use our UX guidelines to make your panels clear and effective.
Creating your panel
There are two ways to create a panel.
Create Your Panel Through the Panels Tab
Or, Create Your Panel Through the Configuration Tab
Adding elements to your panel
Your panel is built of panel elements, such as buttons, dividers, input fields and more.
See a list of panel elements
Click + Add Element and select which elements you want to add to your panel. You can add the same element as many times as you need. Then, you can customize the label text and style, and set defaults and values.
Customizing your panel
You have several customization options for the elements in your panel. You can change label text, add tool tips, set defaults and values. You do this by using the action bar connected to each element.
Settings options
Click on an element. Select Settings or the 
icon to customize your panel. Here are some of the options:
icon to customize your panel. Here are some of the options:Add field titles (see more)
Add tooltips (see more)
Define element as "read only" (see more)
Set initial text options (see more)
Add pattern validation (see more)
Multiple choice elements
If you choose to add an element that has multiple options, like check boxes, radio buttons or dropdown lists, you can configure them by using the manage choices button in the action bar that appears when you select the element.
Rename choices (see more)
More Actions (see more)
icon, to set defaults, edit values, and move or duplicate elements.
After you have designed your panel you need to add code to make it work. Then you can add it to an action button and test it to see if it works. Learn more about coding your panel
Renaming, duplicating, or deleting your Panel
- Hover over your panel name in the My Panels section of the Panels pane on the bottom left.
- Click the More Actions
icon when it appears. - Select rename, duplicate or delete.
Connecting your panel to an action button
After creating your panel, you must connect it to a button in the action bar of a widget or an element.
- Click the Configuration tab.
- Select the proper widget from the Widgets panel.
- Hover over the button to which you want to connect your panel, in the Edit Action Bar menu that appears. For example, if it is a settings panel, select the settings button. If it's a design panel, select the design button. You can also add a new button, name it and connect it to a panel.
- Click
Action Button Settings.
5. Select your panel from the My Panels section.
Now that you have designed your panel you need to add code to it to make it work. Learn more
Connect your panel through the Configuration tab
Note that designing and coding the panels happens in the Panels tab. Choosing which panels go with which buttons happens in the Configuration tab. If you are not familiar with the Configuration tab, learn more about configuring your widget's action bar
Did this help?
|