Velo Properties Panel In-Depth: Descriptions of the Most Essential 5 Properties

See what the Properties and Events panel looks like here

The Properties and 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.

The Properties and 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 and Events button in the toolbar.

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.

Note:

The properties below are not available for all elements.

Property: ID

Description

This is the name of the element you selected on your page. The first time you open the Properties and 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.

Property: Hidden

Description

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. Learn more here.

Property: Collapsed

Description

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. Learn more here.

Property: Enabled

Description

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. 

Property: Events

Description

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

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 and 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 and Events panel here.

Previously published at https://support.wix.com/en/article/velo-working-with-the-properties-events-panel