top of page

Code & Dev

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.

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

Intro

Anchor
Anchor
Anchor
Anchor
Anchor

TRY IT YOURSELF

Exercise on intro to velo.

Open Academy X from desktop to complete this exercise.

01

Enable dev mode. In the top menu select Dev Mode and click on Turn on Dev Mode.

02

Add a button. From the Add Panel, drag a button to the section.

03

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.

04

Add a title. Return to the Add Panel and drag a title to the section.

05

Change the title’s ID. Change this ID to “helloText”.

06

Change the text of the title. Add any text you’d like.

07

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.

08

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.

09

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.

Open advanced exercise on the editor →

{No.}

{Exercise Description}

Open Academy X from desktop to complete this exercise.

Did you find this resource helpful?

Thank you for your feedback!

Next lessons.

Thumbnail for design libraries. Pink background with 2 shaded rectangles in the middle. On the top is a small symbol of an open book.

COLLABORATION

Design Libraries

Learn how to create, manage and share design libraries with your team.

Thumbnail image with a dusty pink background. 5 box outlines are visible with the team accounts icon in the center, of 2 avatars side by side.

COLLABORATION

Team Accounts

Find out how to set up a team account to give teammates access to every site in your account.

Thumbnail indicating roles & permissions. A pink background with a shaded container over it. In the middle of the container is a white logo.

COLLABORATION

Roles & Permissions

Learn how to give every teammate and collaborator a custom role on each site.

Thumbnail for live comments. Pink background with shaded box in the centre. Box is split into 2 uneven sized boxes. There is 1 speech bubble symbol in the middle of the big box and shapes in the bottom of the smaller one.

COLLABORATION

Live Comments

Discover how to communicate with fellow creators in real time on the Editor X workspace.

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶
ACADEMY MENU ▶
Search icon
bottom of page