How to nest components inside other components - Webflow tutorial

[@Webflow]

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

[@muhammadmahad97]

You guys are making components complex day by day.

[@webbae]

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

[@aleexious4670]

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

[@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!

[@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 :)

[@rwd88]

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.

[@JohnFallot]

I find that properties in Webflow make more sense if you’re familiar with Figma or Sketch.

[@sinaazizi2452]

I think this feature is not meant for that use case. It’s likely for devlink which allows developers to control webflow from React. Part 5 was basically that. It allows you to control what the content of a specific child should be.

[@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. :)

[@Blinkstrybe]

What’s the difference between a class and a component

[@Webflow]

A class is a way of saving styling information that applies to as many elements as you want across your site. A component is a group of elements that can be mirrored on multiple pages. Hope this helps :)

[@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".

[@Webflow]

Thanks for the feedback Mihails, letting the team know!

[@valdiszhvaginsh]

🔥🔥🔥

[@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?

[@Webflow]

This sounds like a good use case for Component slots. Video lesson coming soon.

[@DividedStates]

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

[@calvinogood]

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

[@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

[@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

[@Webflow]

Styles aren't yet available as a component property. But this is something our team is currently working on.

[@TheGeigerUX]

#5 lost me