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 bound event handler to your element. You can also manually add 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. statically dynamic See the for more information. Velo API 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 appear faded in the Editor until they are selected. If you want to hide them in the Editor, deselect the checkbox in the menu. Hidden Hidden Elements Tools that whether an element is hidden can also be affected by other factors like if its is hidden or collapsed. Learn more . Note parent element 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 appear with diagonal hatching lines in the Editor until they are selected. Collapsed that whether an element is collapsed can also be affected by other factors like if it's is hidden or collapsed. Learn more . Note parent element 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 appear disabled in the Editor. Enabled 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 : 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. Note 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

Wix Content Collection Fields: Helpful Tips on How to Use Them Properly

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps