How to nest components inside other components — Webflow tutorial

We know with components in Webflow that you can reuse any element and all its child elements throughout your site. Not only can you keep styling consistent, but you can keep content and structure consistent.
But what if we take it a step further and nest components within other components? You can do that and ensure your custom-made elements are kept consistent throughout your site. And with nested components, you can still customize content and visibility properties on every level.

00:00 — Introduction
00:42 — Create a component
00:55 — Nest a component
01:54 — Edit a nested component
03:55 — Create and connect a component property
07:31 — Link a nested component's property to its parent component
08:48 — Recap

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

[Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[aleexious]

You are the best Webflow tutor, and it's one of the reason I am Webflow developer today. Miss you :)

[webbae]

I loved troth: hierarchical whatever, troth, and 99. Thumbs up 👍

[muhammadmahad]

You guys are making components complex day by day.

[myvipacademy]

This is actually very cool and I see where this can be very useful instead of having to create multiple classes to make these simple changes. You guys really thought this through. I've subconsciously wanted something like this over the years but now that i see it I know why I needed it if that made sense.

[henson_prod]

I badly want this on my current CMS. I am currently learning WebFlow which I should've done few years ago. What I think you missed to demonstrate here is to change the "structure/order" of the items inside the original component after all the changes and custom properties.

One UX improvement could be that once a property is added to an instance or nested component, it should have a unique color or symbol.

Green: A green box means that the component is the root component and a change "to structure and layout" will propagate to all instances excluding custom properties data/override.
Purple: A component with custom properties, meaning there's an override and will not inherit the parent "content change" but only the layout and structure.
Orange: Means a custom property "data" is different from the instance default.

There could be more ways to better implement this. But I'm just glad that WebFlow comes with this feature out of the box :)

[Webflow]

Thank you for the feedback on this latest update for components in Webflow. We're hard at work on continuing to add more power to components within a simple and scalable interface, so please stay tuned as we improve the feature set based on your comments and questions!

[rwd]

So glad Webflow listened and reverted to the old 'Symbols' setup. But even after watching this, (and I REALLY wanted to learn), I still fail to understand/appreciate the value of this 'create a property' feature. To me, it just muddies the water between components and classes. Plus, I couldn't dare hand over a project with all this confusion to a client. If I don't get it, how can I expect a client? And does it even work in Editor? Sorry guys.

[geekymike]

What’s the difference between a class and a component

[MihailsZuravlovs]

1. In my opinion, the UX design of the process needs to be improved. I feel like the double click should only be for editing of default components (both parents and nested), and all parameters should be editable on the side panel. Otherwise it feels just odd: you double click on a component and do not realise that you are changing the text parameter, not the components' default text.
2. It works. Although, two times I made it to a crash report that resulted in "page crash".

[rezlinks]

Quick feedback:

You guys are amazing but this feature... believe me you are making it complex day by day. This property system is way more complex. :)

[kurrizzle]

I ran into an issue with this system where I just wanted to change the font color of a piece of text in a card I made. Instead of letting me just unlink instances and change the font color it always changes the the color of the font in all instances no matter what I do. I cant make the font color a property of that instance like I can with text and the little purple button. Anyone have ideas how to do this? Thanks

[DividedStates]

Does this edit property work with links that the botton is pointing at?

[calvinogood]

Nested component property is confusing on relinked to parent... 😅

[AndreMatulionisdosSantos]

Can we create component props? What I mean is this video context: not every Card will have a Button, sometimes they will have a Table, or a Image. Can we make Card receive "children" as a prop?

[jdanielortega]

This is the first tutorial that is more confusing than funny and useful, is this really the best way to go about this? I kind of understand it out of blindly following along but it doesn't make any sense, it has to be a better way to control instances