Intro to Velo

Velo is a full-stack development solution that allows you to extend the functionality of your Editor X sites by adding code. Create your desired UI, then add custom functionality using JavaScript and Velo APIs in both the frontend and backend. With Velo you can create anything from small interactions to complete websites.

Enabling dev mode

To start using Velo, click on Dev Mode in the top menu, then click Turn On Dev Mode.

A screenshot of Editor X. The user has clicked Dev Mode and the cursor is placed over a blue button that reads Turn on Dev Mode

Changing an element’s ID

Change an element’s ID by clicking on the element and giving it a unique identifier in the Properties and Events Panel.

A screenshot of Editor X in dev mode. The user’s cursor is placed on the element ID field in the Properties and Events panel

Setting default values

Set an element’s default state when the page loads by navigating to the Properties and Events Panel and clicking on the checkbox beside the state you want to set.

A screenshot of Editor X where the default value for an element has been set to Hidden

Adding event handlers

Add an event handler by clicking on the element that you want to add it to, then click on Event Handler in the Properties and Event Panel and click on the plus symbol beside it.

A screenshot of Editor X where the Properties and Events panel is open and the OnClick Event Handler is selected

Adding your code

Begin adding code to your Editor X site by using the Code Panel. Here you can write JavaScript and use Velo’s APIs.

To learn about all the features and tools you can use to customize your Editor X site, click here.

A screenshot of Editor X. The code panel is open and it contains sample code

Follow these steps in the editor

Open exercise template →

Enable dev mode. In the top menu select Dev Mode and click on Turn on Dev Mode.
Add a button. From the Add Panel, drag a button to the section.
Change the button’s ID to “changeTextButton”. Click on the button you’ve just added to select the element. Then, go to the Properties and Events Panel and change the ID.
Add a title. Return to the Add Panel and drag a title to the section.
Change the title’s ID. Change this ID to “helloText”.
Change the text of the title. Add any text you’d like.
Add an Event Handler. Click on the button element you’ve added, then navigate to the Properties and Events Panel and, under Event Handlers, choose onDblClick(). Finally, click on the plus symbol to add the Event Handler.
Paste the following code into the function that you’ve added, between the curly braces:$w('#helloText').text = 'Hello from Velo';This code line replaces the current text in the title you dragged onto the canvas to “Hello from Velo” when the button is double clicked.
Preview the site to see the final result. Click on Preview, then double-click the button you’ve added the function to, and notice how the text changes.

Transcript

Let’s take a look at Velo, the development solution that lets you add custom code to your Editor X sites.

Whether you're a seasoned developer or just starting to learn how to code, you can use Velo to create unique experiences for your site visitors.

For example, you can create scrolling text elements…

… or rotating elements…

… or create a filtered menu to let users find exactly what they need. You can also use Velo to customize any apps you’ve installed on your Editor X sites, like Stores, Bookings, Blogs, and more.

Now let’s see how you can get started with Velo on Editor X.

First, click Dev Mode in the top bar of the Editor, then Turn On Dev Mode. This opens the Velo environment, which includes the Velo Sidebar, Code Panel, and Properties and Events Panel.

You can use the Velo Sidebar to navigate the backend and frontend code of the site. The frontend code controls everything site visitors see, whereas the backend code controls server-side functions.

You can also manage your database content from here.

Next, let’s take a look at the Properties and Events Panel. This panel lets you do a few things, like give page elements unique identifiers…

…set the default state of elements to determine how they behave when a page loads…

…and add event handlers to create custom interactions based on visitor behavior. In this example we’re using the “ondblclick” event handler and adding the required code to create a double click interaction that shows new text.

Here we have the Code Panel. This is where you can write JavaScript to create your custom functionality and features. As you can see, the code panel provides automatic code completion and checks for errors to help you along the way.

You can also test how the code you’ve added through Velo affects the site by clicking Preview.

Finally, you can use the Developer Console to track issues as it shows errors, logs and other information.

To learn more about how you can use Velo to customize your Editor X site, visit wix.com/velo.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.

EXPLORE MORE TUTORIALS

WEBINAR

How to add code to Editor X sites with Velo

WEBINAR

Going deeper into Velo

TUTORIAL

Multi-state box

Go to library →

Go create on Editor X →

Was this lesson helpful?

Thank you for your feedback!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care