Building a Website for a Dental Clinic Using Wix and Velo

Long gone are the days when building a website required a myriad of coding skills and zillions of hours. Today, we can substitute design and coding knowledge and spend the saved working time on more rewarding tasks. On that note, Velo by Wix is an innovative product that eliminates the hassles of building aesthetically looking websites from scratch. This development platform opens up endless possibilities for how you can customize your website or application and then decide how to "mix-and-match" them for a winning website.

With that being said, let’s test Velo’s might by building a professional website for a dental clinic. This tutorial will guide you through the essential steps necessary to give the company a digital presence.

Step 1: Building Website Header

Let’s start by building a website header. 

1. On the left side of the Editor, click page code and choose the image section from the menu.

2. Add the logo as illustrated below to your site.

After that, you need to add a navigation menu for the website. To do that click on the Search feature as demonstrated on the screenshot and find the Menu section. There you can see a variety of horizontal, vertical, themed, and anchored menus. Choose a horizontal menu as shown below.

Next, you need a button. This option is available in the Search tab as well.

Step 2: Building a Slider

1. Choose a slider from the Interactive section which can be found in the Search.

2. Add an image to your slider as shown below.

3. You can create new sliders and duplicate them by clicking on the Manage slides tab.

Step 3: Building the About Section

To enable the clinic to lead their potential customers to other pages and increase their connection with the company, you need an About Us Section.

To enable this feature, choose the Strip section from the Search and add an About Us strip. You can change the column background and the block image.

Then, add a title by clicking on the Text section and choosing one of the offered fonts. Finally, find a paragraph in the same section by going to the Paragraphs tab.

Step 4: Creating services block

1. Choose a block from the Lists & Grids tab.

2. Customize the image by adding your own.

Step 5: Building a Gallery From Scratch

To set up the gallery, you should choose the Gallery option from the Search and add a Gallery as demonstrated below.

After that, you can manage the default images and captions. To do that, just click on the Change Images button as you see on the screenshot.

Step 6: Building the Pricing Section

To add this section to the website, click on Lists & Grids and choose the first option in Repeaters.

Step 7: Building Testimonials Block

Your potential client also wants to add a section where customers are raving about his clinic and about the great service they give.

To add this block, click on the Strip option and choose the Testimonials tab.

Step 8: Building a Contact Us Section

To provide the user with information on the clinic, a website needs a functional Contact Us page.

Click on the Strip section again and choose the Contact tab. There, choose the first template with three columns, each featuring a communication channel.

Ok, what's next?

It's time to add a real contact form that will help us to book a visit from patients. We are already using Hubspot CRM, but you can use something else. Like Salesforce or Google Spreadsheet(Boomer that likes fancy charts). In college, I get an A for learning MS Word and MS Excel.

In order to make this tutorial more valuable, our contact form will be connected to Zapier. Cool, right?

Zapier can help you to story your submissions as you wish. Actually, Wix + Velo + Zapier can make a difference in website development. Better than WordPress, for sure.

So, we need to create a contact form, something similar to

Ok, it will be better to have something similar to

Form will be created by using User Input Elements(cool name). Nothing hard, just use basic fields for that. I skip validations, I don't need it right now.

Next step: By using fixed by Velo fetch library, we will connect our form with our CRM(i skip the small part that Zapier is important here).

But. You may ask why not use main Wix Bookings, which works well; plus, it also has a place in Velo Framework.

I agree, using Wix Bookings is fine, but we are not looking for easy ways. Plus, clinics usually have old software, and they don't want to change it.

So Zapier will be a better choice.

Ok, our workflow will be simple.

1) Form submitted. Easy part.

2) Sending an API Call. We will push the data that we want to store. It will pass our data into Zapier's hands.

3) Catch data via Webhook by Zapier. Pick "Catch Hook" setting, so you can receive data.

4) Filter that data as you need it. It's easy in Zapier. Plus, you might learn how RegEx works.

5) By using Zapier + Hubspot CRM plugin -> moving data forward.

For sure, some additional fields might not be caught from the beginning, so be ready to submit your form again and again. The tool is not ideal, but pretty good and cheap to use. Now we can accept patients.

Voila. It was a breeze, right?

Hold on a bit more :) Attaching full website below (yep, it's hard to take a screenshot of a website)

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.