WhatsApp
Hey! Free yourself to discover the 'magic' trick that will propel your business on the Web

Webflow nesting model: how does it work?

14/8/2020
Web Design,Freelance,Business
nesting on webflow
Photo by Brina Blum on Unsplash

After reading this article, you will know better how to design a website. 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 to structure a web page in a correct way ?

What is nesting?

I suggest you go to a site of your choice. If you've been following me for a while 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 top of the latest news.

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

nesting on webflow
Photo by Sarah C on Unsplash

Their interlocking pattern is certainly correct. But how to check it?

In my video, I explain it more clearly. Do you know the Chrome tool "inspect"? When you are on the site in question, right click with the mouse, and inspect. A bar appears on the right side. A whole set of codes is displayed. Each element selected on the screen corresponds to a set of codes in the right part(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 have a problem (and for those who work on Safari), why not install Chrome (if only for this time)?

Your goal should be to understand how nesting happens on a web page. As you will 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 figured it out (or almost), it's time to see how these nests work on Webflow.

nesting on webflow
Photo by Louis Hansel Shotsoflouis on Unsplash

The principle of nesting on Webflow

Have you seen the number of codes in a web page? There is really a lot of it! Fortunately for us,nesting on Webflow spares 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 more(HTML or Javascript), go to my other videos and articles ;)

Let's get back to our main topic:

I started from a blank page before to explain you the nesting on Webflow. I used the block div. As time goes by, you will understand better when to use the different tags. But today, I suggest that you stick to this tag. It's like a 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 like titles, images, paragraphs... By the way, this 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, you just have to use CSS. I show you in another of my videos how to learn CSS with Webflow.

nesting on webflow
Photo by Lettuce Grow on Unsplash

Conclusion

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

Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be
Kevin Palombo, Manager of Happydesk
Make the counter explode to reach 1M subscribers together (Pssst...it's in real time)
Together it's more fun

1 Million with you.

It's really amazing how our YouTube community can be a true source of inspiration for all of us. So if you're looking for a community that will give you a boost to reach your personal and business goals, you've come to the right place!
Certified 100%
ULTRA enriching and hair-raising!
Receive a mountain of gifts

Gifts.

We all keep our childish soul, so we like to receive lots of gifts, a montaaaagne of gifts, a galaxiiiiiie of gifts, a.... YOUHOU, are you still with us? Since you also love gifts, receive in your mailbox energy, strategies and tools (each one more grandiose than the other) that will generate results in your business.

Psssst!

Clearsome time for Thursday because an intergalactic surprise awaits you.
Propel your life & your business in 30 days!
Training

Happy.webacademy.

The only one, the only one, the real one where all ideas can germinate, develop and succeed. Each phase of business development is thought out down to the smallest detail (even the smallest) to accompany you in your project.

Foundations, development, support, mutual aid, coaching, website, web tools and even cookies. Joining the Happy.webacademy is to be part of this ecosystem without risk, just jump in and let yourself be guided.
AI enabled to accelerate your transformation 🤖
12 Up-to-date modules
We give you crazy training with action plans, regular updates, access for life, and 24/7 support, 365 days a year. Everything you need (and more) to make your life, your business and your skills shine.
Your thruster
Community
We make sure that you are always on top of your questions and that you can grow with a community that has the same dreams as you, and that you can meet super inspiring people.
Never again alone
Your Website!
Who better than Web experts to create a turnkey Website and sell your offers quickly without having to break your head with the technique. No more sleepless nights tearing your hair out, we've got you covered to accelerate your online growth!
We will create you
an Asteroid
12 months Free
We answer all your business, mindset and nugget questions. It's also the best way to get your daily dose of motivation, anything is possible!
Don't forget to bring
cookies
Strategy 3.0
The Web and e-commerce are evolving at an incredible speed, and if you don't keep up, you'll lose money. That's why we're going to share with you all our latest tips, discoveries and innovations (automation, artificial intelligence,...) so that you and your business stay on top!
2 Business Coaches
Kevin & Sophie, 2 coaches in the field for 10 years who will be there to motivate you, boost your mindset, and much more! Throughout your entrepreneurial adventure on the Web & in e-commerce, we will support you to validate opportunities or help you optimize your performance. You will NEVER be alone again!
Continuous monitoring
It's sometimes hard to take a step back from your work when you're just starting out (even after), which is why we'll always be there to review your work privately BEFORE you spend any money on advertising or influencers.
Investment
Creating a profitable business requires financial optimization. That's why we'll give you the tips we use so you can learn how to invest the money you'll earn in the long run to create wealth.