Velo: Working with the Properties & Events Panel

The Properties & Events panel lets you work with the elements on your site with Velo. You can use Velo with all the elements on your site, including the page itself, the header and footer, and datasets.

Wix Editor:

The Properties & Events panel opens automatically when you turn on Dev Mode and changes its contents depending on the element you select.

You can close and open the panel with the Properties & Events button in the toolbar.

Wix Studio:

To access the Properties & Events panel, select an element on your site and click the Properties & Events tab in the Code panel:

How to add dynamic event handlers to elements

You can add dynamic event handlers to make elements respond to user actions. The recommended method is:

Use the Properties & Events panel:

1. Select the element you want to add an event handler to.
2. In the Properties & Events panel, locate the "Event Handlers" section.
3. Click on the event handler you want to add.
4. A code snippet for the event handler is added to your page code.t.

See the Velo API for more information on available events and how to work with them.

Properties and Events

The following table describes the properties and events displayed in the Properties & Events panel. Note that not all actions are available for every element.

Property	Description
ID	This is the name of the element you selected on your page. The first time you open the Properties & Events panel for an element, Velo assigns a default name to your element. If you will be writing code for a given element, it is recommended that you rename the element to something meaningful. The element ID is used to identify the element in your code so you can select it. For example, to work with an element named myButton, you would write $w(“#myButton”) in your code. You can learn more about coding with Velo here. Note that you can also see an element's ID by hovering over it or selecting it in the Editor.
Hidden	You may have an element on your site that you don't want your visitors to see until they have completed some action. If you enable this checkbox, the element won't be displayed when your page loads. You can then use code to display it. While Hidden elements are not visible to site visitors, they still take up space on your page. Elements that are marked as Hidden appear faded in the Editor until they are selected. If you want to hide them in the Editor, deselect the Hidden Elements checkbox in the Tools menu. Note that whether an element is hidden can also be affected by other factors like if its parent element is hidden or collapsed.
Collapsed	A collapsed element is not displayed on your page and does not take up any space on the page. If you enable this checkbox, you can use code to expand the element when you choose. Depending on the layout of your page, expanding and collapsing elements can cause other elements to shift up or down the page. Elements that are marked as Collapsed appear with diagonal hatching lines in the Editor until they are selected. Note that whether an element is collapsed can also be affected by other factors like if it's parent element is hidden or collapsed.
Enabled	Some elements, like buttons, can be enabled or disabled. You may have an element on your site that you don't want visitors to be able to interact with right away. If you deselect this checkbox, the element will be disabled when the page loads. You can then use some code to enable it when you're ready. Elements that are not marked Enabled appear disabled in the Editor.
Events	Click the event you want to add an event handler to. The function is added to your page code. Add your custom code inside this function. Existing event handlers are listed here. Click one to jump to its code. To remove a static event handler, click the trash icon. This removes the connection, but keeps the function code. See examples of working with events and removing event handlers. Note: Legacy static event handlers that you used to be able to add with the Properties & Events panel don't work if copied to other pages/sites. Use dynamic event handlers for portability. We recommend you migrate static event handlers to dynamic event handlers.