How To Create A Custom Professional Website (2024) Webflow Tutorial for Beginners

Webflow tutorial for beginners, 2022 full tutorial, create a custom professional website

Hello, everyone. Welcome back to another video. I hope you are doing great and having an incredible day

So, if you're looking to make a beautiful professional website, so let's say maybe you want

more animations, maybe you want more integrations on there, or maybe you just want a larger

library of videos and blog posts. So without being said, guys, let's get started on this tutorial

So what you want to do is you're going to come over to webflow.com. Okay

And once you come over to webflow.com, basically what you're going to do over here is you're

going to see this very user-friendly interface. It's going to look like this. And here it says, build with the power of code without writing any

Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean and semantic code for you. Okay

So just go ahead into Webflow. Now once you have gone into Webflow, what you're going to do from here is you're going to

going to go ahead and click on get started it's free so over here you're going to add your obvious

email address okay and once you've added your email address what you're going to do from there

you're going to click on continue and it's going to take you through the whole you know verification

process and all so you're also going to go ahead and click on create new password now once the password

is create account and once you've you know clicked on create account just click on continue and everything

should be good to go. You can save your details as well, which is a pretty good option. And then

once you do that, here it's going to say, what is your name? Please let us know. Obviously

you're going to add your name, first name, last name. And then it says, what do you want to build

websites for? Select all the options that actually apply to you. You know, they have a quick couple

questions. So it's going to ask you these couple questions. So we're going to go through and answer

those right now. So we're going to say, you know, whatever the website is built for. I'm going to say

myself, obviously. Are you a student? Obviously, if you're a student, go with yes. If not, then go with no

I'm going to go with yes. And what type of site are you looking to build today? Business site

e-commerce store, portfolio, blog, or other. Now, this obviously depends on you on whatever type of

website you want to build. Okay. So in this case, you can build either just a regular website

or you can go with an e-commerce store where you know you can build a lot of things. I'm going to go

with business site, but you can also go with blog to get a lot of information in

So I'm going to go with business site in this tutorial's case, and I'm going to click on finish

And once you click on finish, it loads us in, and it brings us to, you know, the whole loading

pop where it says optimizing everything. And it gives us a basic template with a whole bunch of features, and it makes it as quickly as

possible, but like to tell you how to add a picture and some headers and stuff

So when you end up on the main dashboard, what I recommend doing is

is actually going up to the top left, so let's just wait for it to load up

So as you can see here, you are going to load up into your dashboard

Okay, and once you load it up into your dashboard, it's going to be a piece of cake from there on out, okay

Because in the dashboard, you can see you have your designer over here where you can, you know

actually create designs for yourself. Then on the left-hand side, you have all the basics things

So we're going to go ahead, and we're going to go ahead and create some new projects. But just to touch on to some things, you can also go into the showcase or the marketplace

where you can get an overview of all the libraries and apps that they have

And the fun thing about, you know, going to the showcase or the resources that they have

is that you can actually see the community and the types of things that they've created for themselves

And you can also learn with different creators that are present on the Webflow community

And obviously, these are all great programmers and coders that have made our life easier for us

Okay. And again, in Marketplace, you can get an overview. of all the different experts

You can get different apps for yourselves. You can browse apps. These are free

You can also get experts to create things for you. You can see made and web flow things as well

So these are basically projects that other people have created and you can see the different

types of things. These are obviously templates that you can see, but you can showcase them on your own website

as well. You can also showcase your own website on the store

You can show people what you've made. But yeah, these are the type of things that people have made

And these looks really nice. Look at the design. Look at the styling

Look at the amount of work they've really put in. And it's a really cool feature

And let's say if you want to clone it, you can actually clone these things. So let's say I want to clone

I'm going to go ahead and clone this one, this compounding well tax efficiently

This thing looks really cool to me. I'm just going to go over here, hover my mouse over this, click on view

And what this will do is it's going to open up this really popular design. And it's going to allow me to obviously go ahead and find similar templates

or I can actually go ahead and open up this live site to get a general idea of how this looks

or I can even hire this editor to create a website just like this for me

So pretty great and pretty amazing stuff that you can notice on this premium template section

of your basic web flow. You can also go with the different free templates that you have and to go with the free

templates again go into Marketplace. You're going to go over to templates over here

And in the template section, as I stated, you can find great paid templates, but you can also find great free templates

And the free templates are the powerhouse of everything because most people obviously like working with free templates

Not a lot of people enjoy working with actual paid templates for themselves

Okay. So once you have gotten to this template workspace, what you can do is you can search for some certain type of template like portfolio, real estate

then there's different types of things over here. But you can go with a free template any time that you want

You can even just write free template and it's going to give you free template. So you get the point

Now we're just going to go ahead and move over to our dashboard. And once we've understood the whole concept of the dashboard

we're going to go ahead into the editor. So to go to the editor, you're going to click on new site

And once you click on new site, it gives you two options, blank or template. Okay

So we're going to go on blank. And now within the editor, it's completely white

and I wasn't kidding when I said that this is a blank site. So we see on the left-hand side that through some of the fundamentals

you can see the stuff you want for your page. And then once you have the stuff you want on your page

you can edit that on the right side. So these are the ways you can edit what's on your page

Now, this is how you actually add all the content and editorial stuff on your page

So I just going to wait for the designer to open up And when the designer opens up trust me you are going to love the site of everything because the features that it provides you and the editorial sequences that it provides you

are absolutely out of this world. And obviously, there's so many integrations in this website as well

Like you can integrate different things. You can also import the HTML and CSS code for this website as well, which is pretty incredible

But yeah, as you can see, my site is loaded up. So on the top view, you can see the different styles of pages

You can see your designing tab over here. You can switch from designing to editing as well

Designing is just styling elements. Editing is static and dynamic content, like the layout and stuff

So basically, this is how you keep all these things in mind

And when we're doing all of this, now let's start off on the left-hand side and see everything down here starting up with the very first thing that is basically the title

and you can add different things so when it comes to adding you can add different structures grids and columns

you know these are basic boxes so let's say if i were to add this section over here look at that it adds

the section and you can also add different things like containers and obviously it gives us an

idea of the things that we're adding so there you can see we add container as well right under our

you know main header section and essentially you can increase the size of these things as well if you

want to and you can add different things between it as well so this is our first section and under

our first section we have our first container and we can start adding things in this by you know

adding styling components you can create different components but we're going to get into this later

let's say i want to add some type of color in this okay so in the background i'm going to go with this

and i'm going to go with a bit of a darker shade so let's go with this dark color over here and once you go

with this dark color. You can also come into the assets over here. These assets are really fun

as well because the assets allow you to upload different types of media onto this. So here's your

assets and you can upload your very own media that you can actually brand ambassador on. So let's say

I'm going to, you know, I want to upload some photos of some shoes because my store is, let's say

essentially based on shoes. So here we have some photos of some shoes

I'm going to go ahead and add both of them. They're going to upload over here in these files and look at that

You can upload your photos. You can upload your files. And let's say I want to add them in the container

You can add them in the container and look at that. It's going to replace the image. You can also add this outside the container anywhere that you want to go with

You can change its positioning as well by going on size. You can go on a height, you can go in different colors, and the different types of x and y coordinates, which basically move it around, okay

And moving on, you can also add different images into this as well

So let's say if I were to, you know, shift this up here. You know, it's going to get, you're going to get a stretched image of this shoe into your design

You can make it bigger if you want to. You can make it smaller. Or you can even add your website's logo over here

So just to give you an example, I'm going to go in assets again. I'm going to go and upload

And once you go and upload, we're going to come here. I have this swoosh of Nike

I'm going to add it over here. And I'm going to paste it up here. Okay. And look at that

And then you can just make the size smaller. So look at that. How cool does that look

So you can just add a PNG in the top left section and it's going to look like this

And it's going to look absolutely amazing. It's going to look absolutely out of this world

And the designing scheme is, you know, just a lot. amazing over here. Now, I'm also going to change the color a bit to some off white shade

Okay, let's go with this shade over here. That looks much better. And you can also increase the

size of the collage that you want to go with. I'm going to delete this container for now

Moving on, once you've, you know, actually gone ahead and made a whole layout for the header

you can start adding different components and elements in this as well

Now, the fun part about this is that you can also add a container inside of your design

So let's say you have your ad design over here. You can add a container literally inside the design and it's going to look like that

And, you know, just add anything else in the container like some form of text or some form of, you know, font, text, styling, or design

You can even make small columns out of this. So, again, we're going to go back to add

And, you know, you can add quick stacks. You can add columns. Let's say I'm going to go ahead, add quick stacks

And you can add these quick stacks in containers like this. And obviously, you can make one container smaller

You can make one container bigger if you want to. That depends on the type of work and styling you want to go with

Basically, all of these designs that I'm showing you, these are based of just things that I

you know could potentially create or you could potentially create in the end whatever you're

going to want to create you are going to create it in the end by yourself so this is all the stuff that you can do potentially but yeah as I said in the end create whatever works best for you

so let's say we have this over here right and I want to add some things into this so I'm

going to add a button put it here and once you have a button you can increase its size and

all so to increase the size what you're going to do is

is you can unline it in the center, you can bring a bit down. Yeah, there you go

So that looks better, right? Then once you have the button text, you can obviously write something on top of this text as well

And for that, you can obviously go into styling or you can go into settings, which is obviously your interactional setting

And to change what's written on the button, and just go here and you can write, let's say, shop now

I'm going to write that. And once you write shop now, this is a place where I can

to add, you know, some type of text file or, you know, some type of link block. Let's say I'm going to

go with heading. I'm going to add heading over here. And here, you know, I can write new Nike Air

Jordan Elite on sale. Okay. I'm just going to add that, bring that up. And then you can

add different, you could say, colors into this design if you want to, by going into

styling add different colors you can change the alignment you can mess with the alignment and just make it look much better So you get the general output of all that you get the general idea of all that You know it just makes your design looks much more better It makes your design have a much more open feel to it

Then moving on, once we've, you know, actually created a header and everything

what you can do is you can head on more into the more detailed designs, okay

And what do I mean by more detailed designs? By more detailed designs, I mean specifically

Let's say we want to add some styling into the bottom sections

I'm going to go and add. Once you go on add, you're going to come down here and let's say I'm going to add another section. Okay

Now here's another section and you can obviously increase the size of this section if you

want to and you can give this tag of a section. Now let's say I'm going to go ahead and add some widgets into this. Okay

So over here, we're going to go ahead with, first of all, let's go with this heading

I'm going to go with new products. Okay. And once you've added your new products, what you're going to do is you're going to start

adding your actual new products. So to add our actual new products, I'm going to go ahead to this

And here is my new products. Okay, that's my first product. Obviously, you're going to make sure that it comes under new products

then we're going to go to images again. I'm going to add my second new product, you know, just like that

So you can start adding these products however you want and, you know, increase the size of these images

And you can obviously separate the linings between these products and you can even make them listings if you want to

And to make them listings, go ahead, open up the list section and, you know, make these between an actual list

Right, I'm just going to make it look a bit better. to make it look a bit better again just come over here uh you can even make it into an h flex like that you know

it uh brings a horizontal bordering you could say uh and it you know it just looks much better

and then you can add text lines in front of these okay so to add text lines just come on add and then obviously

first of all you have text block then again you're just going to go ahead and add this text block down

here as well. So to do that, again, click on plus, text block, add it over here, and make sure to

add it up here, not down there. So over here, you know, you can first of all write the details

about the shoe like black, let's say, Air Max. I'm just going to call it that. That's not the name

of these shoes, but you get the point. And then you can do the same for this bottom one. And once

you have all of that, you can obviously mess with the styling of the section as well. Like, just go

on style over here. You can first of all choose the type of display you want to go with. I'm going to go

with the default display that I was already on because it looked much better. Once you do that

what you are going to do from there is you can choose the fonts of the section. That's how I'm

going to go with impact. Impact seems like a good font. Then there's color. Okay. Now

clearly right now the color is transparent. So I'm going to go ahead and change

it to something different. Let's choose the whole section. Make sure to choose the section

not the body, because that is not what we're going to want to go with. Yeah, there we go. There's

the section. Scroll down, choose the actual color, not of the borders, but of the actual section

by going into styles. And once you're into styles, then you want to go into the background

of the actual things. Just come here into effects. You can also choose if you want to, you know

actually blend the borders into the effects. But I'm going to go into the background, change the color a bit

switch it up with maroon. You can also go with the background

You can add it onto the text if you want to. Now obviously mine has just gone white

so I'm going to change that to a darker variant. Yeah, there we go

So that is how you can change your background colors as well. Then moving on, obviously, this is the basics of how you're going to add some stylings

and now you're going to add some, you know, fun stuff into your website. But moving on, let's also discuss the pages, okay

This is obviously just adding elements, and you can keep on checking out different elements from here

There's a lot, a lot of things. You can add a search bar, drop-down menu, navigation bar

Let me just quickly show you the whole drop-down bar thing. So let's say you have a drop-down bar here

I'm going to hold it. I'm going to bring it up here. And once you come up here to the drop-down bar, there we go

So you can add a drop-down bar. and you can add different options into the drop-down bar

with different links. Okay, so it looks pretty fun and it looks pretty easy to use as well

Now moving on comes pages, okay? And you can add more static pages for yourself

So to add more static pages, you're just gonna click on Create New Page. And once you click on Create New Page

let's say I'm gonna go here, we can make this our Contact Us page, okay

And once you made it, your Contact Us page, you're gonna make sure if it has a parent folder

And once you've done all of this, go ahead and click on us page. on create and there you go then you have your contact us page and you can add the same styling

for this that you did for the previous page and the way you do this like you don't need to just

go ahead and you know copy the whole thing you're just going to come here and what you're going to do

is you're going to take the amount of styling that you put into that you're going to copy all

of these settings off of here okay and once you've inherited the selector

You can just come to this page over here. And yeah, it's going to be pretty easy and pretty basic stuff

You can also add different layouts from templates as well. So let's say I'm going to first of all add, yeah, let's add a navigation bar

Okay, once you've added a navigation bar. Moving on, you can also add different components that you can create for yourself

different variables, size selections. Again, as I stated, assets and a whole lot of other things

But you get the point. And you can also use different. parent elements for yourself as well so really great really fast working and really amazing stuff and

this is obviously only a designing input you can also go into the editing input and the editing input is

where you can just have an access to all the asset solutions and all the CMS solutions so the more

you could say featureful and the more useful part of the whole designing bit would be just coming and

using the designing input. And as you can see now that you have this whole layout you can start adding things under it as well So again go into add You going to go into layouts and let say I going to add a you going to go into

the library and you're going to find some layout for some contact vibes

So I'm going to go with a hero over here. There we go

And obviously you can write things like Contact Us. Then you can, you know, name this button for, you know, email here

And then you can add some details up here on how they're going to contact you

So, you know, just add the necessary details. And then down here, obviously, then you're just going to need a footer

And again, just going to layouts. And this is obviously for just easier workings

Going to layouts, going to footers, and just add it over here

So, yeah, basically, this is how you're going to slowly start. developing your store on Webflow. And obviously, it may seem a bit complicated in the start

but trust me, it's absolutely easy. And the amount of working and the amount of, you could say

dignity that goes into actually creating stuff with this, it's not as difficult as all the other

you know, workers you have out there. So it's really easy and really fun to use these things for

ourselves. So again, all you're going to do is just make sure that you have a comment

of how to use, you know, softers like Wakes or Squarespace, and you have the concept of them

Trust me, it's going to be an absolute game changer. So, yeah, you get the point and you get the gist of all of this

And once we've talked about the whole creation, you're going to go ahead into publish

And before publishing, you can also see the preview of the website, so you can toggle the

preview and you can check if the website's features and everything works normally

Like, let's say I'm going to come to the home page. and you know you get a general style you can check the drop down you can see if the website works fine

and if it does just go ahead click on publish you're going to click on publish to select the domain

you can go with a custom domain if you want to or you can go with a domain that they have themselves

obviously so just choose their domain and once you do that basically yeah your domain is going to

be published and everything is going to be pretty much good to go and then you also have different site settings that you can mess with

And when it comes to messing with site settings, it's absolutely simple. Okay, down here you have your logo, which is your Fabicon, basically

Fabicon is this up here in the top left. You know what you see over here, this is your Fabicon

Then there's the main web clip, which is the logo of your main website. Here's the name of your websites, the localization, language codes

You have your website passwords and all. So pretty easy and pretty simple things to get your hat around

You can showcase your website in different ways, share your workspace templates

You have Webflow Brandings that you can turn on or off depending on the paid plans you have and a whole lot more

And coming to plans, you can check the plans out in the settings

And here are the four basic plans that you can get for Webflow

So these are obviously the build yearly plans. And these are the build monthly plans

So for the website plans, these are only the website. These are not e-commerce

e-commerce, e-commerce basically provides you, you know, the payment providers and all. So we're not going to be talking about that

We're going to be talking about website first, and then I'm going to take you to the e-commerce providers

So in website's case, starter is $0.00. Okay, so it's best for learning how to use Webflow, and that was exactly what we were

using just to learn Webflow. Then there is Basic, which is $18. So it's best for launching a simple site

You get a custom domain with zero CMS items and 500 monthly form submissions

Then there's CMS, which is $29 per month. It's billed monthly, and you get a best for a blog and other content-driven site

Okay. And again, custom domain, 2,000 CMS items, 1,000 monthly form submissions, three content editors, and a whole lot more

Then there's business, which is $49 per month. Okay, and this is the big boy because you get custom domain, you get 10,000 CMS items

and you get 2,500 monthly form submissions with 10 content editors, which is pretty, pretty fire

if you think about it. Now, moving on, obviously, that was just your website

Now, let's move on to e-commerce site, which is the main game changer

Now, obviously, e-commerce is going to be a bit more expensive, not a bit, quite more expensive

because when it comes to e-commerce, you're actually, you know, making a lot of money

And for making a lot of money, you have providers, for payments, and obviously

sending money is a lot of, you know, processes, and it's a pretty hefty process

So for that, you have upgraded plans, which is the standard plan. So it's perfect for new businesses getting off of the ground

You get 500 e-commerce items, 2% transaction fee, and all CMS plan features for $42 per month

Then there's the plus plan, which is $84 per month, and you get 5,000 e-commerce items

zero-person transaction fee, and all business plan features. and then finally, $235 for the advanced feature

where you get 15,000 e-commerce items, zero-person transaction fee, and all business plan features are available

So how incredible and amazing is all of this? So these are the pricing for when it comes to using Webflow

And yeah, that's the general output of all of it. Now, if you enjoyed watching this video

and if it was really informational to you, please do make sure to drop down a like

and subscribe to the channel. if you want to see more videos like this in the future, let me know down in the comments below

and I'll be making more for you. But yeah, that's pretty much about it for this video. Now, if you

enjoyed watching, you know, do let me know in the comments below because it takes a lot of effort

making these videos and I would really appreciate some support. And moving on, again, a general

summary would be that you just need to know the general working and editing of Wix and Squarespace

And if you have a general idea of that, trust me, using Webflow is a piece of cake

And Webflow is basically a free version of WordPress, a much efficient

And you could say a person who doesn't want to get into the whole WordPress thing, you can use Webflow

Even if you want to, you know, start using WordPress, starting off from Webflow would be a good option because Webflow is, you could say, a lighter version of WordPress

So, yeah, pretty great stuff. So yeah, in the end, drop down a like, subscribe to the channel

And I hope you all keep having an amazing day. That was all from me

and I'll see all of you next time. Goodbye