Streaming live at 10am (PST)

Replicating a website's layout?

How would you first few steps would you take in Webflow if you just wanted to replicate this website’s layout (left nav, etc.)?

I don’t know if it is just me but the slider on the website you linked here Doesn’t Work?

Anyways, It’s pretty straightforward. It is a one page website which makes it even easier to replicate.

This is gonna be a long one… So I think if you are having a problem replicating it… You should find yoour answer somewhere in this heap of text.

I would start with the navigation.
Create a section with a container inside it. Take the links and put them inside the container then use some typography tools to makke them look better.

Moving on to the main section…
Again create a section and put a container inside it.
Then divide the container into two divs one 40% and the other 60% width.
the 40% width div should float left and the 2 divs should have Display set to inline so they show up side by side.

The left div has a heading which is typographed… Pretty easy.
The second part of the first div is a bit tricky… It shows up in case the portfolio portion is selected… Create that oart and put it in the div then set display to none… This will be changed when the portfolio option is selected… we will come back to this later…

Moving on to the slide section… Webflow makes it even easier… Drag in a slider and put in blocks of the stuff you want in the slide containers.

the slides also have a loading part which is displayed while the images are loaded… This can be done by putting in the loading thing designed inside the container and setting the rest of the content ot display none… Then once the container is loaded(use interactions to) set the display to block and set the loading image’s display to none…

I’ll have to look into linking the navigation part with the slides… I will come back to you on that.

Dude, thanks so much for this! Helped a ton!

1 Like

TMess, do you know the best way to have it scale down like that site? Like when you adjust your window it seems like the whole div responds rather than the individual elements?

I don’t get what you are asking…
When I change the window size on the original website… nothing changes …
It’s not responsive

Hi @BaileyHood, if you take a container for example, or a div, and then put another element like an image into that container or div, you can give the element a class with 100% width, which will then cause that element with 100% width to resize when the container or div is resized.

Does that help? I looked at that site also, and the only thing I could see that resized, was the white space in the page, so as @TMess indicated, that site is not responsive. :slight_smile:

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.