We’ve been working on enabling reusable elements inside Webflow (e.g. header/footer/sidebar that appears on every page), and would like to ask the Webflow community to help us iron out some details and bugs before we make it publicly available.
In Webflow, reusable elements/components are called Symbols. The key feature of Symbols is that an element can be created once, and then reused multiple times across a site. Any changes to a symbol are automatically copied to each instance, meaning you don’t have to go make the same edit over and over in multiple places.
VERY IMPORTANT: Please do NOT use symbols on production sites yet. It’s still in beta state, and there’s a possibility that it can mess up your site. You’ve been warned
To enable Symbols in the editor, type Ctrl+S
Ctrl+Y
or put ?sym=1
at the end of your design URL (e.g. Webflow). You should see a new ‘Asset Manager’ tab appear on the right sidebar:
Now choose an element you would like to convert to a symbol, and press the +
button in the Asset Manager. In this case, we’ll convert a basic Navbar:
Once you give your symbol a name, it will convert the selection to an instance of the new symbol. Symbol instances appear with green outlines:
To create another copy of the symbol, you can:
- Drag in from the Asset Manager tab (we’re working on making this area look much better)
- Copy-paste an existing instance to another location
To edit all copies of a symbol, double click on one of the copies. This will switch to symbol editing mode (by fading out all the other elements on the page) and will show all the inner components on the Navigator tab.
To finalize editing, just click outside of the symbol (or press Escape). This should remove the faded white overlay.
Some notes:
- To edit any properties of the symbol, or the elements inside it, you must focus on the symbol by double-clicking on it in the designer. It’s not yet possible to double-click in the navigator, but I’m working on it
- Symbols can’t be inside other symbols (though we’re working on lifting this limitation later)
- Individual elements (e.g. Paragraph) or nested elements (e.g. Navbar or complex column layout) can be made into symbols
- Only one element can make up the “root” of the symbol. For example, if you two Paragraph elements that are side-by-side, you’d need to put them into a Div Block and make that one Div Block a symbol.
Where we need your help:
-
Making symbols work with our undo/redo system has been challenging, so if you can isolate specific cases where symbol-related tasks fail to undo, please let me know.
-
Using a duplicate (very important: don’t use this beta version of Symbols on a production version of your site!) version of your site, try making shared elements (e.g. headers/footers) into symbols and copy-paste to other pages on your site (replacing previously static nodes). Let me know if publish/export doesn’t work for your site (by sending an email to support@webflow.com, preferrably with a public link to the site).
-
Reporting any other bugs you find… I love squashing them
Looking forward to hearing your feedback on this upcoming feature, and really appreciate your help in ironing out the bugs and usability issues!