paint-brush
Basic Guide to Creating a Page Using Velo by Wixby@slimshady
224 reads

Basic Guide to Creating a Page Using Velo by Wix

by The Real Slim ShadyFebruary 26th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The Real Slim Shady explains how you can use Velo by Wix to build pretty much anything you can imagine, whether it be an eCommerce website, a SaaS platform, social networking site, or a social network. Velo is a full-stack development platform that allows you to add custom code to your website. You can even import many popular NPM modules (e.g., elastic search, Mongo DB) into your website and integrate your website with third-party services.

Company Mentioned

Mention Thumbnail
featured image - Basic Guide to Creating a Page Using Velo by Wix
The Real Slim Shady HackerNoon profile picture

Velo is a brand new Wix full-stack development platform. This essentially allows you to add custom code to your website. Also, you can create and add a more advanced feature to make your website.

In this blog, I will guide you on how you can use Velo by Wix to build pretty much anything you can imagine, whether it be an eCommerce website, a SaaS platform, social networking site, etc. To use Velo, all you have to do is go to Wix's regular editor, enable Velo, and you are ready to start. Moreover, you can also integrate your website or app with third-party services. You can even import many popular NPM modules (e.g., elastic search, Mongo DB) into your website.

Velo Features:

Here, we have the following features: Databases, Coding, Business, and marketing, which Velo by Wix allows users to build anything they want.

Databases

With the databases, you can create dynamic sites and collaborate on content with the team and client, all within the content manager.

Coding

Suppose you wanted to add some different animations or additional features to your website that you can't do regularly with your standard Wix editor. In that case, you could implement some custom code as well. If you know the front end or backend or check out their documentation, see how to set the thing up. You can use this feature to go in there and add custom code to your site.

Business

If you are doing business, you can have include a Wix store, create booking functionalities, CRMS, blogs, and Wix Pay API for payments. 

Marketing

In the marketing section, Velo provides marketing tools and integration, SEO, and analytics. It also offers specific marketing things such as creating heat maps. However, there are a lot more features that you can use to implement and improve your website.

Guide to Creating a New Wix Site Using Velo:

These are the following steps you need to follow to understand the basic structure of building with Velo.

First of all, sign in to your Wix account or sign up if you don't already have one. Then, open the template which you like the most.

Header Section:

  1. First of all, go to the editor and enable Velo on the top bar.
  2. Then, click on the header section of the home page and select setting, and choose freezes. 
  3. On the left side, add panel chooses add a strip and drop a classic strip onto our page. This will be the default header of our home page. 
  4. Next, click on the image icon on the left side to add the logo to your header. Finally, our header section is completed.


Body Section:

  1. After creating the header section, now you have to create the body of our page. So, select the additional elements.
  2. Double-click the home page code at the bottom of the editor to open the code panel.
  3. In the code section, you can add your own code to your site.
  4. Add the element by simply dragging it below the header and add the background image.
  5. After that, you can add a CTA or any other text to the image by putting a text field.

You have to do the same thing for the rest of the body section. Simply add an image on the left and add a text field on the right by simply dragging it into the page.


Footer Section:

  1. Go to the footer section and select the setting after clicking the add button to add the footer at the bottom of the page. 
  2. After creating the footer section, you have to add an element to it.
  3.  To customize the footer, click on the footer section, and then click on the footer design option to change footer colors. 
  4. Next, go to the left corner of the page, where you see the additional option. After clicking, you will see a lot of options. Now you can add different elements in the footer section.


See it Action:

In the final step, you click the preview option to see your site changes. 

After seeing your site working correctly, you hit the publish button to make your site live.

Bottom line

Nowadays, many developers have a bit of a stigma around while using many website builders. On top of that, most of them limit what you can do and only let you build cookie-cutter sites.

On the other hand, Velo is a game-changer.

It is a smooth, intuitive, and quite powerful platform to develop apps and websites. Since it offers a server less framework, it takes much less development time as well. In short, Velo is worth the time to learn and use.

This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to enter here and take a shot at winning $1000 every month, from March 1st, 2021 to May 31st, 2021.