HEY

Participate in the next Webflow Challenge!

Webflow nesting model: how does it work?

If our principle is to create a website without code, you should know that this does not allow us to derogate from the rule of the Webflow syr nesting.

Updated on

14/8/2020

webflow nesting
Photo by Brina Blum on Unsplash

After reading this article, you will know how to design a website better. Even if our principle is to create a website without code, know that this does not allow us to depart from the rule. Indeed, it is very important in terms of HTML and CSS nesting. But what is it really about? And how do you go about structuring a web page correctly?

What's interlocking?

I suggest you go to a site of your choice. If you've been following me for some time now, you'll know that I'm going to take the Apple site again. Not only is their design well done, but their site is constantly being updated. Their team is always on the lookout for the latest news.

There is a Youtube video in which I describe this at the bottom of the article. Support me by subscting to the YouTube channel "Happy Desk Design"

webflow nesting
Photo by Sarah C on Unsplash

Their interlocking pattern is certainly correct. But how can we verify it?

In my video, I explain it more clearly. Are you familiar with Chrome's "inspect" tool? When you are on the site in question, right click with the mouse, and inspect. A bar appears immediately on the right side. A whole set of codes is displayed. Each item selected on the screen corresponds to a set of codes on the right side (a nesting in which there may be a title, some subtitles, images or other elements).

In principle, Firefox works the same way. But in case you encounter a problem (same for those who work on Safari), why not install Chrome (just this once)?

Your goal should be to understand how the nesting happens on a web page. As you'll see in my video, in a box, you can have several other sub-boxes. And in these, sub-sub-boxes, and so on.

Once you've understood (or almost), it's time to see how these nests work on Webflow.

webflow nesting
Photo by Louis Hansel Shotsoflouis on Unsplash

The principle of nesting on Webflow

Have you seen the number of codes on a web page? There are so many of them! Lucky for us, Webflow nesting saves us all that. Even when designing the nesting on this platform, we don't need to understand the codes.

But if you want to learn a bit more (HTML or Javascript), check out my other videos and articles ;)

Let's get back to our main topic:

I've gone from a blank page before to explain the Webflow nesting to you. I used the block div. As the years go by, you'll understand better when to use the different tags. But today, I suggest you settle for this one tag. It's like a kind of Swiss army knife, it can be used in any context.

Then, in this first box, you will have to add other boxes, before inserting elements such as titles, images, paragraphs... Besides, it is the very principle of nesting on Webflow (and in the design of a website in general). Everything is done in boxes; each element belongs to its own box.

If you want the boxes to take shape, just use CSS. I show you in another of my videos how to learn CSS with Webflow.

webflow nesting
Photo by Lettuce Grow on Unsplash

Conclusion

From now on, when you design a web page, I advise you to use interlocks. You will then have a cleaner and more correct structure. As you probably know, Google loves well-designed sites :) That's why it's important not to depart from the Webflow nesting rule.

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training