Wix Blocks: Panel Elements

4 min read

Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.

Blocks custom panels are made of unique panel elements. To use the panel elements in your widget's code, go to the code section of the Panels tab. Use Velo's $w() function to select elements by ID:

1let myElement = $w("#myElement");

API reference for panel elements

Use the panel elements API reference to work with the elements in the panel code. Note that this temporary preview of the Velo API reference is only open to the early users of Blocks.

Velo modules for panels

To enable panel elements to interact with your widget and perform actions in the editor, use the following modules in your panel code:

wix-widget: Control your widget's properties, design presets, and more.
wix-editor: Interact with the Editor to remove or restore widget elements, open Dashboard panels, and more.

Panel elements

The following panel elements are available to use in your panels. You can customize the elements in the Blocks Editor, as well as through Velo code in the code section of your panel. Note that all panel elements require code to work.

Panel Slider

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.

Panel Checkbox Group

Checkbox groups are used for selecting any number of the given options.

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

Notes:

You cannot test the color in the Blocks Preview mode. To test the color, install the app on a site.
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 buttons).

Panel Font and Color Input

Font and color pickers allow site builders to select a font and its color.

Did this help?