Streaming live at 10am (PST)

How to design Webflow layout

I really love the Webflow layout on the landing page and wanted to incorporate a design for a client I’m working with. I was curious if anyone has an idea how Webflow created their design?

Section > container > then?

I’m stuck. Any direction or help would be appreciated. Thank you.

1 Like

Hi Delany!

I made an attempt of recreating that layout that I hope will help you, here is the read-only link.

You definitely have the right idea starting with the Section and Container to keep your content aligned and organized. There are many different ways to build it, but I went with using a 2-by-2 Grid for the main structure.

The left column was the hardest part for me, but here’s what I found:
The left column is a Div block that spans both rows — inside that Div block, I have two other Div blocks with their own content inside. In order to make sure the two Div blocks were placed on opposite sides, I set the parent Div block (the one that is spanning the two rows) to Flexbox and justified it so that the two Div blocks are distributed evenly from start to end.

Hope this helps and let me know if you have any questions!

2 Likes

@Stacy this was so helpful. Thank you so much!

1 Like

@Stacy Hey Stacy, I wanted to reach out and thank you again. Having the sample you built so I could look at the nav bar and your notes allowed me to build my own. Thank you! My feature layout looks better now.

1 Like

@Dbisbee I’m so happy to hear that! Thanks for sharing! :slight_smile:

1 Like