Intro to Velo | Editor X

Hey there, fellow no-code enthusiasts! We're excited to introduce you to Velo, a powerful development solution that is seamlessly integrated with Editor X, giving you an even more elegant way to build next-level experiences for your users. Imagine taking your design projects to new heights where the only limit is your creativity! Ready to dive in? Let's go!

What's Velo all about?

First things first, let's understand what Velo is and why it makes your Editor X experience so much more powerful. Velo is a development platform that allows you to add custom code to your Editor X sites. Whether you're a seasoned developer or just starting to learn how to code, Velo empowers you to create unique experiences for your site visitors. Think of it as your magical tool in the world of Editor X.

With Velo, you can:

- Create eye-catching effects like scrolling text elements, rotating elements, or even entirely personalized user experiences.

- Develop a filtered menu to help users find exactly what they need on your site.

- Customize any apps you've installed on your Editor X sites, such as Stores, Bookings, Blogs, and more!

And because we know you love those Monthly No-Code Design Challenges with awesome prizes, make sure to join our live learning community at Live Learning.EditorX.io to receive expert mentoring on how to build design businesses and further your career!

Getting Started with Velo on Editor X

Setting up Velo on your Editor X project is a piece of cake. Follow these simple steps to open the Velo environment:

1. Click "Dev Mode" in the top bar of the Editor.

2. Turn on "Dev Mode."

And presto! With Dev Mode turned on, you'll see three main components of the Velo environment: the Velo sidebar, the Code Panel, and the Properties and Events panel.

The Velo Sidebar

The Velo sidebar is your command center for navigating the backend (server-side functions) and frontend (everything site visitors see) code of your site. With the Velo sidebar, you can:

- Access and write backend and frontend code.

- Manage your site's database and content.

The Properties and Events Panel

The Properties and Events panel is your go-to place for:

- Assigning unique identifiers to page elements.

- Setting the default state of elements to determine how they behave when a page loads.

- Adding event handlers to create custom interactions based on visitor behavior.

For example, let's say you want to create a double-click interaction that shows new text when activated. You would use the "onDoubleClick" event handler in the Properties and Events panel and add the required code to make it happen.

The Code Panel

Last but not least, we have the Code Panel, which is unquestionably the heart of Velo where you'll be writing and implementing your custom code. City lights, excited brainstorming sessions, and amazing ideas come to life in this versatile space. Just remember, in Velo, you'll be writing JavaScript.

Embrace the Power of Velo and Editor X

Now that you have a glimpse of what Velo can do, you're ready to create stunning, interactive, and next-level experiences for your site visitors. Don't forget to join our Live Learning community at Live Learning.EditorX.io for monthly no-code design challenges, expert mentoring, and incredible prizes.

The world is your canvas, and Velo is your paintbrush. Whether you're new to the coding game or a seasoned professional, Velo grants you the ability to make your imagination come true on Editor X. Get ready to remix, reimagine, and revolutionize your no-code projects like never before. Happy creating!