Panel Elements in Blocks
Blocks custom panels are made of unique panel elements.
To reference the panel elements in your widget's code, go to the code section of the Panels tab.
Use the $w() function to select elements by ID, for example:
Panel element APIs
The following panel elements are available to use in your panels. Click each element to see how to reference it in your panel code:
- Panel Slider
- Panel Thumbnails
- Panel Button
- Panel Checkbox Group
- Panel Dropdown
- Panel Radio Button Group
- Panel Rich Text
- Panel Text Input
- Panel Toggle Switch
- Panel Section Divider
- Panel Color Picker
- Panel Font and ColorPicker
Helpful SDK and Velo modules
Import the following modules to interact with the panel elements in your panel code:
-
The widget SDK module lets you interact with your widget's properties and design presets from a panel.
-
The wix-editor Velo module lets you open Dashboard pages from a panel, and remove or restore elements.
Know the panel elements
Here is a short description of each element and anything special you should know about it.
Panel Slider
Panel sliders allow users to select a number from a given range.
Panel Thumbnails
Thumbnails allow users to select an item from a set of thumbnail images.
Panel Button
A button on your panel. Add the button logic through code or button rules.
Do not include the word "Design" in your button label, as this triggers the default design panel.
Panel Checkbox Group
Checkbox groups are used for selecting any number of the given options.
Panel Dropdown
Drop-downs are used for selecting one of a number of options.
Panel Radio Button Group
Radio button groups are used for selecting one of a number of options.
Panel Text
A text element (also called "rich text") is used to display text followed by a link.
Panel Text Input
An input element that lets users enter small amounts of text.
Panel Toggle Switch
Toggle switches are used for a single binary choice.
Panel Section Divider
Section dividers display a section heading in the panel.
Panel Color Input
Color pickers allow a site builder to select a color for one or multiple elements.
- You cannot test the color in the Blocks Preview
mode. To test the color, install the app on a site. - You must add at least one line of code to see how the element works in the editor. For example:
$w('#panelColorPicker1'); - A color picker can be a good way to give site builders a possibility to customize a custom element.
- We recommend not to connect a custom panel to the Design
action button, since it will not work well in the Wix Studio editor. Instead, you can create a main action named Change Design (learn more about connecting action bars).
Panel Font and Color Input
Font and color pickers allow site builders to select a font and its color.
Note: You must add at least one line of code to see how the element works in the editor. For example: $w(panelFontAndColorPicker1);
