Intro to Velo.

Explore the basics of Velo, the development solution that allows you to add custom code to your Editor X sites.

Explore the basics of Velo, the development solution that allows you to add custom code to your Editor X sites.

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.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

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
ACADEMY MENU ▶
Search 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 ▶