3.4 Building a Website on Webflow Pt.2

Alright. We’re ready to actually begin building this long awaited website.

In the last episode, we looked at templates, went through the different pages and talked about how we can now tweak it to fit our website.

Now, we've gone ahead and created all the content that we need for the entire website. It's going to be super simple. We'll change up this template, put in our own content and images and you'll see how that will transform it into a website that's perfect for Lancify Abroad.

 Now what you're seeing on your screen is the template itself. This is what the homepage of this template looks like. On the left, you'll see a bunch of different icons. I'm going to walk you through some of them really quickly because they're quite important for you to be able to build the website.

 Now, if you click on this here, it shows you a whole bunch of options that you can drag and drop. So basically, if you were to build your own template, or if you wanted to change it up and add new elements to the page, you'd just need to find the desired element and drag it onto the page. Don’t worry, we will be building one or two sections ourselves to show you how it works.

 So, I won't get into this too much at this stage, but all you need to understand is that these are the different elements that can be added to your website, and when you do need to add an image, some text or a CTA, you just need to drag it from here.

 The next thing we’re going to look at is these three lines here. They're just an overview of the different sections on your page. As you can see, your page is divided into different sections.

 You’ve got the top section here, another section right here, and an image section over here. As you scroll down, you’ll see that all these different sections are what make up your entire webpage.

 Webflow has named all these sections. If you look at this page, this is the header. There’s the features section, and you can slide down to the slide section. There’s an about section over here.

 They also have a separator. Premium. You can move these sections around and place it how you would like. Now, if you click on a section, say, features, you’ll be able to see the different elements within each section right here on the slider. We’re not going to go too far into that right now.

 Next, if you click on this paper icon here, A4. This is going to take you to the different pages on your website. Like a single webpage is divided into multiple sections, a website also has more than one page.

This right here lets you navigate through the different pages on your website, so you can work on them individually.

If you go down further, there’s something called CMS, and some other things that we’re not going to get into right now again.

If you click on this photo icon here, you’ll see all the images that are on your page. So whenever you want to upload an image onto your website, it goes right here.

And then you have settings.

Alright, so that was a quick overview. Let’s get back to our homepage. You can see this panel here on your right. This lets you tweak and change whatever you’re building on your website. Let me show you how it works.

Look at this title. If I click on this title, you can see the panel on the right gets populated with all the controls that I need to tweak and edit this text. You can change the spacing between the letters, the font, the size and really customize however you want.

There’s even things like backgrounds, borders, etc. So essentially, anytime you want to change or modify a specific element, you just click on that element and this panel right here will allow you to make the desired changes.

Similarly, if I click on this button for example, the panel shows you all the changes you can make, relevant to that specific element. In this case, you have the height of the button, the spacing below and above it, the font, its position, and the colour of the button.

We’ll be doing some of this with you so you can see how it works. And that’s pretty much all you need to know before you get started. Now, we’ve gone ahead and got all the content we need to add to this page. So what we’re going to do with you is basically customize all the different elements on the page with the content that we have.

So let's get started! The first thing we’re going to do is change the background images. So I’ll click on the background image here, and then on the right, scroll down to the image and it shows me the current image on the page.

I’m going to click on “Choose image”. I’ve already uploaded the image I want to use as my background, so I just click on that, and there you go. And that’s how easy it is! And now I want to change the text here. Since I already have the copy for this ready, I just need to click here and type it in. There you go.  

Then we can quickly change the text on this CTA to “Talk To Us” and come back to edit the button later. Scrolling down, I'm going to click on the text over here and change it. There you go! We’ll come back and clean this up as well. Of course, this isn’t the final draft.

Now let’s just go and change up some of the images here. Again, we’re going to use the same process as the background image we did earlier. So, I’ll click on the image, go on the right here and click “choose image” to pick the image I want. That's good.

Now I want to add some text here. To do that, I'll double click on this text and change the content here to what I want it to be. I also want to change these images over here. Let me just do that real quick. And here we are!

I’ve gone ahead and made changes to the page and except for this section right here, we have a full homepage where we’ve added counselling, changed images as well as the text at the bottom. And all of that took less than well, twenty minutes. To build an entire homepage! 

Now, just like we made all these changes here, we’re going to go ahead and change up the other pages on the website the same way. We’ll change the images, the text, the background and everything else we need to.

Let’s do that real quick. 

 Alright, we’ve gone ahead and completed making all the changes to the other pages on the website. It’s really quite simple if you have the content and the images you need ready. So let’s walk you through it.

 There's your homepage. We’re yet to change the center section and we'll get to that eventually. We've added an image and changed the text here. Now, that’s one page ready.

Now, moving onto the features page, which is the “Why Us?” page. We’ve changed the background image and the title here. As you scroll down, you can see that the copy and the images have been changed throughout the page. And then you have the premium page - the page you’re using to talk about all the different services of Lancify Abroad. We’ve changed the image, text and a couple other things.

And then there's the pricing page. Looks good.

Finally, the Contact page that looks like this.

We really recommend you play around and get comfortable with all these yourself to see how you can customize elements in the most innovative ways to suit your business’ needs!

And just like that, we've finished building most of our website. All that’s needed now is to clean it up and connect it to some forms and we’ll be good to go! We'll do that in the next episode!