3.2 Introduction to Webflow

Welcome back to our course on building a highly converting website, Now, as promised. This course is meant to help you build a website without having to write a single line of code. And that's the beauty of building websites today.

There are so many great tools that you can use and you don’t need to know how to code, or design for that matter. You can just go in and build websites based on just your understanding of what you or your business want it to look like.

The tool that we’re going to be using today, and for the duration of this course, is Webflow - our favourite web development tool. It's easily one of the most advanced tools out there and you’re going to be using it quite a bit in the following weeks.

Webflow allows you to do almost everything you need to without getting too deep into coding, making it widely used by designers and developers. Today, we’re going to walk you through this tool.

We'll show you how it works and how you'll be able to build a website for yourself with absolutely no sweat. So let’s get started! Once you’re on Webflow, you can just sign in with your email, or with Google.

I’m just going to quickly sign up with my email. As with any tool, you’re going to have to answer a few questions to finish setting up.

Make your Webflow account here: http://bit.ly/lancify-webflow

Now, I’m not a developer, so I’m going to say entrepreneur. This will mostly be for a business, right? And most importantly, do you have any experience building websites? Seeing as we built this course for people who really have no experience in designing or building websites, we're gonna hit this “never built” button very confidently and move forward.

And then there is “what do you want to build today?” We'll keep it simple. Let's go with 'business website' since that's what most of you will be doing for your clients.

Now, you’re taken to this next screen where it asks you if you want to start with a business template or from scratch. A blank slate, basically. Now, a blank slate is more for people who really know what they're doing. It's like having a blank piece of canvas and drawing from scratch, with no prompts, and basically just no help!

To make it a little easier for those of us with little to no design skills or deep technical knowledge, you can go straight into building the website with what we call templates.

How do we build an entire website without using a single line of code? 

Templates.

Templates are basically pre-built website blueprints that you can customize according to what you want your website to look like. You have a whole bunch of different templates here that you can buy and use to your liking. If you click on the tags here, you'll be able to see all the different kinds of templates that they have on their page for different types of websites.

Infact, Webflow has easily one of the most robust and exhaustive lists of templates that you will find on any platform. So it let's you choose the kind of website template you want. Let’s say you pick “Health”. This gives you templates for websites that specifically cater to “Health” related businesses.

The beauty of templates is in the fact that, once you pick one, you don’t have to build it that exact same way. You can change it around to make it work for you.

Let me show you. Let’s pick a random template. Here. Now you can see this already looks like a full blown functioning website. Just by changing this image here, your contact information, some of the content and a couple of images, you could literally have a website up in less than half an hour. And that’s the beauty of templates. There are hundreds of templates for you to select from on Webflow.

Another great thing about Webflow templates is that they are responsive. What that means is that, if you were to pick a layout and build a website on it, and then try to open it on mobile, it would look exactly as it should, and you wouldn't need to build a separate mobile version of the same website. Now, this is an important advantage because typically when you build a website, you build it for desktop and then optimising it for mobile is a whole other thing.

Now, let’s try this out. We’ll start with a free template for us to work with. How about the “Business Starter” Template? There, you can just click “Use for free” up here and it'll start a project for you.

So you create a project, give it a name, and there you go. You have just started your first project on Webflow. So this, here - is the screen that you’ll be working on. Don’t be too overwhelmed by it- we’ll take you through it all in just a second. What you see here is basically where the actual building of your website happens. Let’s look at what’s in the center here first.

Now, this is your template.

Right now it’s just dummy content where you will eventually add copy that is relevant to the business you’re building the website for. It’s got a section on top that talks about the business, what they do and what they believe in. Let’s change this up really quick. We can change this text up here just by clicking on that section and editing the text to what you want it to be. It’s literally as simple as that.

Now, before we go ahead and make huge changes to this template, there are a few things you need to understand about websites and web pages.

Firstly, it's built in different sections. This is your first section. Technically, this would be a second section. And this is your third section and as you move down…. There's another section. Almost all websites have multiple sections that are meant to support the flow of information the business wants to communicate to their customers. So you would organize information on this webpage depending on what you want the user to see first, second, and so on.

Now you can go and access all your sections right here on the left. For this website we’re building, let’s just have 3 sections. So that's your first, second and third.

As you hover over each of these different items on your template, you can notice blue lines or outlines around it, which basically indicate all the customizable parts of this template. Also called elements. So, as you click on any of these elements on your page, you can go to edit and adjust that element on the right, here.

There’s a whole bunch of buttons and features, but you don’t need to get into that right now. Let's just click on this one element so you can see how it works. So you click this one here, and the bar on the right let's you change up anything you’d like to change on that specific element. There’s text alignment, font, size, colour and all sorts of other controls. And just by changing the conditions on this toolbar, your element can be customized the way you want.

Now, it's also possible for you to have a section inside a section. So let’s say you have this section here. Like you can see, you can add smaller boxes within this one large section. This is just how Webflow helps you arrange and organize content on your page. You can even add an image wherever you’d like. If I just double click on this, I can add an image in this section by either uploading one or searching for one in their image garden.

Okay, let’s pick this one for now. So it comes on here, and then I can edit the image as I please. I can change the size of the image, make it bigger perhaps, and move it to the right side maybe. There you go.

What we’re trying to say is that it's literally that customizable. You’re not stuck with one template. You can change the entire look and feel of your website the way you’d like to. If you just go on the left here and click this “plus” button, you can see all the things you can add to your page. You can add images, add a whole new section entirely, add text boxes if you need it, CTA button - you name it. 

Once you start playing around with all the features, you’ll realize how simple and fun it is!

The most important decision you’ll have to make is picking the right template for you to build your website on. You need to know exactly what you’re looking for, before getting started. A lot of times, you may pick a template and start working on it only to realize halfway through, that the template does not cater to what your website needs.

So before you pick a template, it’s important for you to know all the different elements your website needs. This is where the whole understanding of the business, the purpose, the audience, etc., comes in. It will help you pick just the right template for the project you’re working on.

And there you have it. You now know what Webflow looks like and how easy it is to build websites on it.

In our next episode, we're going to do exactly that. We're going to build a whole new website from scratch, with you, so you know how it's done. See you there.