Can't Create A Breakaway / Child Symbol ( component by following tutorial )

Community resources Getting started
1

Hello, I was hoping somebody would be able to help.

I’m currently on the starter tutorial movie clips with making your own custom components and I am getting tied in knots.

Under the Advanced Elements: Components around minute 2.53 I am trying to create a breakaway symbol but am struggling to work my way around it based on that movie clip. My ‘child’ symbol or break away, changes both. even when I think I have gone through the motions to do so.

I have noticed that the terms and UI have changed somewhat, but for some reason, I cannot create a ‘break away symbol’ ( component ).

Could anybody offer any pointers aside from this movie clip or point me in the right direction? When I think I have made a breakaway version, it appears to be editing the symbol throughout. A rookie error I am sure but one others may have run into also.

Thanks weblfow community! :grinning_face:

2

Maybe share the links to what you’re reading and the vid you’re looking at?
You might also need to explain what you mean by “break away symbol”?

In WF the term “symbol” refers to legacy components and was changed a few years ago.

  • Each component keeps its master structure intact throughout your site, even when you embed it in another parent component.
  • You can vary components at the instance level in certain ways, through a combination of component properties, and instance text overrides.
3

Cheers and good morning! :grinning_face: ( i’m a newbie by the way )

So the clip I am following is this one. ( I’m following this initial tutorial to the left of the website workspace via the webflow vids )
https://university.webflow.com/videos/symbols

I’m on minute and second 2.53

I twigged that symbols have now become Components. Just found this post too, to anyone else reading.

https://webflow.com/updates/symbols-evolved-to-components

So the tutorial, is teaching me how to make a Component ( legacy ‘Symbol’). I have got as far as creating a custom reusable component, however, when I duplicate the Component and try to make a different version of that stored component… ( a breakaway, or overridden one ), I can’t. The tutorial says that I can, but I can’t find out how to make it work. Not sure if it is just me ( possibly is ) or whether there is a blog post or another newer tutorial to show and demonstrate this in 2025?

“You can vary components at the instance level in certain ways, through a combination of component properties and instance text overrides.” Bingo, exactly what I’m trying to learn. Any pointers or tips - sorry if I need spoon feeding!

4

I see, wow, Webflow should really take this vid down. The terminology & UX have changed too much, but the concepts still exist at some level.

I’d avoid anything that uses the word “Symbols”, as that was a very early version of components. They’re chemically related but it’s the difference between milk and cheese.

Try these, which are more current-

Then look up component variants, shared libraries, etc if you want to go even further with components.

For your question here, this part is more relevant.

External Image

Component properties are the key to instance variations in content. When you’re editing a component master, you’ll see a Properties tab at the far right to create and bind properties.

Component variants are the main key to vary component styling, by adjusting/overriding classes to change layout, color, etc.

1 Like
5

Thank you! And sorry for the delayed response. I have just been away, and I am trying to play catch up. I will have to watch all the videos and work my way through!

Thanks again!