How to nest components inside other components - Webflow tutorial
HTML-код
- Опубликовано: 2 июн 2024
- 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.
Learn more about Components in Webflow → university.webflow.com/lesson...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow
![Roddy Ricch - Survivors Remorse [Official Music Video]](http://i.ytimg.com/vi/J5IeFzr2GgE/mqdefault.jpg)
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
I loved troth: hierarchical whatever, troth, and 99. Thumbs up 👍
You guys are making components complex day by day.
You are the best Webflow tutor, and it's one of the reason I am Webflow developer today. Miss you :)
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.
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!
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 :)
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.
I find that properties in Webflow make more sense if you’re familiar with Figma or Sketch.
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.
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. :)
🔥🔥🔥
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".
Thanks for the feedback Mihails, letting the team know!
Does this edit property work with links that the botton is pointing at?
What’s the difference between a class and a component
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 :)
Nested component property is confusing on relinked to parent... 😅
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
Styles aren't yet available as a component property. But this is something our team is currently working on.
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
#5 lost me