1. Create a blank project: The very first step of any project is to create a blank canvas, so you can start making some magic there!

2. Create a Navbar: Since this is a , we will create a really basic using the “right” way of using HTML components.

3. We have our navbar, now let’s add a “Main Section”: This step is fundamental for creating layouts, the web is based on sections, navbar section, main, footer, etc., this separates the content and how should everything be organized. For more info about HTML you can check my article here!.

4. Now, let’s add a “Main Container”: The idea here is to create a basic container for our content and don’t worrying about the width or if it’s in the center of the page.

5. Let’s add some text and a Heading.

Now we have something here, it’s not particularly good looking but remember, it’s the basics!

6. Create a new section called “Testimonials Sections”: In this section, we will add a background color, a hight, and two columns. How to add the background color and the hight you might think? Well, on the right side of the page you have all the CSS properties, and on the right, you have the access to add a component call column, in this example I only use 2 columns. In this example, we will leave all like this but in the next article, we will put something on those columns.

7. Create a Slider Section: After creating this slider section you will add a container named Slider Container and then add a slider component.

8. Now we have a basic landing page, not to basic and you can have some content in here, let’s add a “Contact Us Section”: For most landing pages, you will need for sure a contact part, for this we will create the Contact Us Section and a Contact Us Container, then we will add a Form Block, here we will use the Name and Email input, the default’s of Webflow Form Block, you can customize and add whatever input you want but for this particular example we will use this.

9. Now let’s add the Footer Section: This is the end of this part… Let’s create a Footer Section (with some background color), a Footer Container, and 3 columns which we will add some social media links… Don’t worry, we will make it useful later!



Source link https://blog..io/how-to-make-a-simple-layout-in-webflow-part-1-fb4e88ba3a12?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here