How to Code with No-Code! Velo + Editor X

Are you excited to design a beautiful and functional website, but coding is not your strong suit? Worry not, dear reader, because today we're going to show you how to take your web designing game to the next level using Velo and Editor X. Velo is a powerful web development platform that allows you to build and customize your website without having to write tons of code, and it works perfectly with Editor X. So, buckle up and get ready to code with no-code!

Our friends over at LiveLearning Editor X regularly host amazing Monthly NoCode Design Challenges with awesome prizes that you can join as a way to learn and grow your design skills. They also provide mentoring to help you build your design business and further your career. Consider joining their vibrant community if you're passionate about design, learning, and sharing your knowledge!

In this blog post, we'll be guiding you through a step-by-step process to create a working demo for a responsive pricing calculator, using Velo in conjunction with Editor X. The focus will be on creating clickable events, hiding and showing elements, and designing intuitive interactions for your website's users.

The Design in Figma

Before diving into Velo and Editor X, let's briefly go over the design for the pricing calculator, created using Figma. The design consists of several screens - starting with the initial step, where users can choose a plan, followed by subsequent screens displaying specific plan details.

To make the demo functional, we'll be using Velo to make parts of the design invisible until users click a designated button. This way, users can navigate through the pricing calculator in a smooth and intuitive manner.

Creating Pages and Masters in Editor X

To recreate the design from Figma in Editor X, we'll start by creating several pages. Each page will display content relevant to the user's selected plan.

For the main page displaying all the plans, consider converting this into a “Master” section in Editor X. This will help ensure that the design remains consistent across various pages. To do this, simply right-click the section and select “Set as Master.”

Making The Magic Happen with Velo

Now that your pages are set up, it's time to make the design come to life using Velo. First, make sure that your site structure and pages are organized in your Editor X project. Then, enable the Velo environment by turning on the “Dev Mode” in the top toolbar.

With Velo, you can create various interactions for the page elements by adding event handlers. One common use case is showing or hiding specific elements when a user clicks a button.

For example, imagine a scenario where users must click a “Get Started” button on the main page to access the pricing calculator. To achieve this, you can associate an onClick event with the button and write a few lines of Velo code to show or hide the required element.

```javascript

$w.onReady(function () {

// This code will run when your page loads

$w("#getStartedButton").onClick(() => {

$w("#pricingCalculator").show();

$w("#mainPage").hide();

});

});

```

In the example above, "`getStartedButton`" is the button's ID, and the "`onClick`" event is the action that initiates the element hiding and showing.

You can create similar interactions for other buttons and elements in your design, providing users with a dynamic and engaging browsing experience.

Test and Refine Your Design

After setting up your Velo interactions, it's essential to test your design on various devices to ensure that it's both responsive and functional. Remember, a great user experience is vital – your visitors should have no trouble navigating through the pricing calculator and accessing information about different plans.

Keep refining and tweaking your design until you're satisfied with the overall experience. And don't forget to share your masterpiece with the LiveLearning Editor X community!

Wrapping Up

Creating a responsive and interactive website doesn't have to be a daunting task. By combining the power of Velo and Editor X, you can create visually appealing and intuitive web experiences without writing endless lines of code.

And don't forget to participate in the exciting Monthly NoCode Design Challenges hosted by LiveLearning Editor X. It's a perfect opportunity to level up your design skills, learn new techniques, and contribute to a thriving community of fellow designers!

So, sharpen your digital pencils, grab a cup of coffee, and unleash your creativity. The world of no-code web design awaits! Happy designing!