How Symbols work in Webflow

Introduction

Creation

Identical content symbols:

‍Unique content symbols:

Reuse

Editing

Unlinking

  • Right-click the Symbol label
  • Choose unlink from Symbol Or , if the element is hard to select, right-click the element in the Navigator

Conclusion

Pros:

  • We can make reusable components with ease
  • We can override the content to create unique components while retaining uniformity in layout
  • We can change the styles and apply it to all the places in a website automatically
  • We can create nested symbols inside a symbol like buttons etc.

Cons:

  • We still cannot create overridable fields for styles like background color, color etc.
  • We cannot move symbols from one site to another in one click. If you need to move it, we would need to first unlink the elements and then copy each to another site and relink them to create the symbol

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store