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:
Advanced information about adding events to your elements
When you add an event handler to an element using the Properties and Events panel, Velo registers and wires a statically bound event handler to your element. You can also manually add dynamic event handlers to your elements. These handlers can be viewed in the autocomplete values for the elements that have them. When you add a dynamic event handler to an element, it is not displayed in the list of events for that element in the Properties and Events panel.
See the Velo API for more information.
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 that you want to add an event handler to your element. The function for the event handler is added to your page. This is the function that runs when the event happens to your element. You will need to add code to the function to tell your site what should happen when the event occurs. You can see an example of working with events here. Any event handlers you have already added to your element are displayed here. If you select an existing event, the cursor is placed at the code for that event handler in the code editor. When you click the trash icon next to an event handler, you break the connection between the element and its event handler function. The function and its code remain on your site in case you need them. You can learn more about deleting event handlers here. Note: Event code that you add to your site using the Properties & Events panel will not work if you copy/paste it to any other page or site, even if you copy the associated element. |
Tip: You can see an example of working with the Properties & Events panel here.