Webflow Editor Tutorial Easy Learning - Tutorial Areas

by Mehedi Masum
1 year ago
192 Views

Webflow editor is a wonderful and easy setting up web designing tool. However, You must need to know about Webflow Learning Complete Tutorial Web Design. After that you need to know the website editor tutorial, here you get the tutorial in an easy way. Let’s get to the start. After creating a project and choosing a template.

Webflow Editor Tutorial

  1. Tour the Webflow interface

let’s just take a quick tour through the interface just so you generally know where things are located. And you’re welcome to use the little Webflow wizard that’s right here on the screen if you want.

2. Change the logo and navigation bar color

You are just going to dive right into this template and start clicking around and start making some changes. So we’re going to start at the very beginning up here on the top with the logo and the navbar.

3. Edit the navigation bar links

A home page, an about page, and a contact page. All of these pages currently exist but they aren’t represented in our navigation bar. Furthermore, we can’t even see our links because they’re white on a white background.

4. Edit the navigation bar fonts

So the first thing that you’re going to want to do is you’re going to want to go to your typography panel over here on the style.

5. Edit the hamburger button appearance

You’ll need to use these buttons at the top of the screen to get yourself into a tablet or one of the other mobile devices here to see how that navbar is looking at those devices.

6. Edit the opening jumbotron


With the navigation under control, the next thing to work on is the middle of this webpage.

7. Adjust template boxes to static content

With the top part of our template looking really great now, let’s scroll on down a little bit and look at the rest of this. Some of this you may want to keep. Some of it you may not want to keep. This is a thing with templates. Just because there are boxes and pictures and content in various spots on a template doesn’t mean you have to keep it. This is not necessarily painted by number. You can get rid of things.

8. Add content to static boxes


We made sure that none of the information is coming from the database: not the image, not the heading, not the paragraph, and not the containers. We’re not asking the database to say: make three boxes on the page. We’ve made three of our own static boxes on the page.

9. Arrange boxes with flexbox

This is where knowing something about FlexBox and CSS and coding will actually come in very handy when working with Web Flow.

10. Configure the image slider

The next thing I’d like to address here on my website is the image slider. So if we scroll on down here we have some lovely avocado toast, but it’s probably not appropriate for a bakery. So let’s swap out the pictures that we have here on the image slider that came here with this template.

11. Add home page text

Moving down our template, I really like this little block of text here underneath the slider. But I think I’d actually like to move it. So right now, it is down after the slider. I think what I’d like to do is reposition this text in between my three boxes and my image slider. And I’d like to just go ahead and move that around a little bit.

we’ve finally reached the bottom of this webpage, and it’s just in time for a challenge for you. So what I would like for you to do in this challenge is I’d like you to take care of the footer of this webpage.

Finally, visit their official website link about Webflow Editor.

Tags:

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *