Components: reuse and scale your designs - Webflow tutorial

Speed up your design process by using components to reuse any element in your project. From navbars to cards to footers, almost anything can be made into a component. Double-clicking to edit a component allows you to make changes that affect all instances of that component. You can even unlink individual instances of a component so that changes to it won't affect the others. And you can set properties on a component so you have control over things like the content or visibility of individual elements including text, buttons or images.
00:00 - Introduction
00:48 - Create a component
01:03 - Reuse a component
01:21 - Edit a component
02:14 - Unlink a component
02:39 - Create & connect component property
05:44 - 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

[@Webflow]

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

[@basuki094]

WAITING FOR LONG TIMES

[@julijaspat4477]

This is exactly what I needed! Thank U!

[@Webflow]

A new components update launched today to make editing components and adding properties easier. More component updates and lessons to come.

[@danielodegaard535]

The update made this video totally useless. I don't know how to add properties now, and it's really confusing in the UI. Overall kind of bummed by this new UI rollout. Functionally, it's not much of an improvement to Webflow at all. It just feels like a bunch of lateral adjustments, which make these fabulous tutorial videos useless and which frustrate old users and new users who are trying to learn on the platform.

[@Shutterlab-Creative]

How do you link visibility of elements to Collection Page data? Say if a collection is missing an entry, change the Property to Hidden automatically. As a creative whose 1st (or 2nd) job isn't web designer, I love Webflow BTW! Super intuitive UI that keeps improving.

[@halilnuroglu]

Hey @webflow how to set property for CSS class?

[@amcds2867]

Thanks for another great tutorial. Is it possible to leverage the visibility property of certain elements in a component on different screen sizes (breakpoints)? In the nav bar (a component) i have a logo (svg) with some complexity that is suitable on desktop and tablet screen sizes, however it needs to be simpler on mobile breakpoints and the solution i would like to implement is to replace the (complex) logo with a simpler version (already in the assets panel) on mobile portrait and mobile landscape breakpoints. How do i go about doing this?

[@ArtfulUI]

not clear with the vsibility property....

[@patrickperkins1189]

Hey, is there any chance you could do a video on naming/organization best practices in webflow. I feel like my pages get disorganized, but I'm not sure how to fix it. I'm talking about best practices for organization of sections and containers, styles and components, nested styles, etc.

[@MihailsZuravlovs]

Oh, this updated made the visibility option so much more complicated. Imagine I have a list with over 50 items inside. I need to turn on/off the item visibilty depending on a page the component list is placed on. I could easily create one component with 50 items and switch on/off tiems by selecting the item and then turning it on/off by **a single click**! Now I have to select an item inside the component list, click "create & connect new property", assign "property name", select the property, assign parameter "visibility" and change it. There is no quick way to make visibility a fast parameter any more. That's very sad.

[@evgeniik_]

I can't find "Component properties", what am I missing?

[@tifacola]

What about background images? Can that be dynamic?

[@OneBrighDay]

Can you send in props to the components? I would like to tap an api and have it loop through and automatically make the cards based on the returned data.

[@Webflow]

This is not possible with Webflow components. However, you might be able to do that in the near future with DevLink. To learn more about this and join the beta, head on over to webflow.com/devlink

[@mollyhart3252]

Hello- I am just getting started with Webflow, and I really like it. However, I created a couple of pages with a nav component, which worked fine. Now on new pages, the component simply will not drop into any part of the page. Always red-along with 'linked elements cannot be nested inside of each other'. What is causing this? I haven't done anything knowingly that makes it different from how I used the component on the other pages. Please advise. Thank you!!

[@calvinogood]

Works like Figma Component ha?

[@SHorwood1]

Is it possible to change the link settings for one component on a page that doesn't affect the link on all other pages?

[@Webflow]

Yes you can :) Just set the component property on the link element first: university.webflow.com/lesson/components#how-to-define-component-properties Then you can define a different link for each instance. Hope this helps :)

[@posterboyvicky]

i want to change size of a component varaint. is it possible or is there a workaround ?

[@Webflow]

At this time, component style variants is not yet possible. But this is something we are working on in a future phase of the Webflow Components Universe: kzbin.info/www/bejne/l4a7mH58eraonbM

[@VoidC-mc7ew]

I really wanted to use components for copying more complex interactions ;( Doesn't seem to work

[@Winterhe4rt]

But you cant change a background image to be a interchangable component? At least its nowere to be found.

[@anon5660]

if i know im going to be making changes to a reoccurring element, i almost always find it easier to rely on classes. it's much easier to make content changes directly on the canvas and style changes via classes, rather than turning everything into a property, then searching the right side panel for the corresponding property to make a changes, while style changes are still class based.. IMO, the more components used, the less flexible and more inconvenient it is to make changes. Yet i hear webflow touting components as the future as they think they should be used for just about everything. I don't see how or why they would settle on this vision.

[@TheNNguyener96]

What about adding interaction to a component?

[@Webflow]

Yes, you can add interactions to elements within a component.

[@jdanielortega]

I can't apply properties to change images, is this possible?

[@Webflow]

Yes. You can apply component properties to images as well as text and elements.

[@jdanielortega]

When will we be able to override styles as well? like If I wanted one of those purple cards to be green, right now I couldn't.

[@jonasarleth]

You can. Place in a embed field and write the css to make the card green in there. Then make the embed field visible/hidden and voila. Your card changes the color. Not the easiest way but a way for now.

[@jdanielortega]

@@jonasarleth Great Workaround, sadly I really suck at css, but will really look into that, thank you for your answer!

[@Adanmaday]

i'd think a combo class could be created?

[@user-uu5hn6zn4t]

What are the differences between components and classes?

[@Webflow]

Components let you reuse pre-built layouts and structures (for example, you can reuse a navbar that has a container, an image, and three links, etc) while classes let you reuse styles (text color, padding/margin, opacity, etc).

[@anon5660]

don't bother with components until you're more familiar with webflow. it'll just add confusion. for now, focus on classes as they are the backbone of everything. but i'll expand on what webflow said: imagine you have a Nav Bar and you copy and paste it - now you have two. All the classes (styles) used to create the first carried over to the second - thus changing the background color on one will change the background color on the other. Their styles are bound via classes. But NOT the content - so you can update text or images and that will not effect the other. With components, classes still behave the same, but now your content is also bound - so ANY change will carry over to other copies of the component (instances).. You can get around this, but that's when you get into properties, and again when I'd say don't waste your time on that.

[@ArtfulUI]

only text property described

[@Flip_PR0]

In Austria we would say: Erhanden😎

[@cyberc4sh]

elementor is way better - webflow is too many creating this and that, elementor is simple just do drag and drop and edit on spot and finish. this is based on my experience, webflow need to change the game man, it's time consuming. go learn from your competitor and make a better product please. this is an advice from the user perspective. thank you.

[@JannisTimm]

The point is u dont need to use components and propertys tho. Its a extra feature

[@cyberc4sh]

@@JannisTimm they have it too

[@JannisTimm]

@@cyberc4sh i cant really have a objective opinion on elementor. Just heard its having bad practices from youtubers like kevin gearry. If it suits u go for it. I believe webflow or other wordpress builders like bricks are superior in sense of possibilities, seo, accesibilty and other website practices.

[@cyberc4sh]

@@JannisTimm I've seen the video, and he failed on doing the styling example :( but all good, I'll pick what suits me. thanks.

[@xavierian6314]

This instruction is outdated.