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

Video about how to create, manage and share design libraries on Editor X

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

Play icon
Video about how to set up a team account on Editor X.

Learn how to set up a team account.

Play icon
Video about how to assign and manage Roles & Permissions on Editor X.

Discover how to assign and manage roles & permissions.

Play icon
Video about how to communicate in real time on the Editor X canvas.

Learn how to communicate live on the Editor X canvas.

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
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
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.