Streaming live at 10am (PST)

Need beta testers for upcoming Symbols feature!


#1

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 smile


To enable Symbols in the editor, type Ctrl+S Ctrl+Y or put ?sym=1 at the end of your design URL (e.g. https://webflow.com/design/symbol-test-site?sym=1). 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:

  1. Drag in from the Asset Manager tab (we're working on making this area look much better)
  2. 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 smiley
  • 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 smiley


Looking forward to hearing your feedback on this upcoming feature, and really appreciate your help in ironing out the bugs and usability issues!


Webflow templates: How to use symbols
Php include or similar
Some suggestions
#4

This topic is now pinned. It will appear at the top of its category until it is either unpinned by a moderator, or the Clear Pin button is pressed.


#5

#6

This is great Vlad thanks, I will start testing smile


#7

Testing blush

(blblabalblalba)
(sorry, needed 20 chars or more)


#8

Good news, now testing


#9

Navbar in designer isn't showing collapsed view by default (I've set settings to show collapsed menu in Tablet and below). Only when clicking the symbol it's showing hamburger. (published page is OK though).


#10

Hi Vlad
I have run a quick test on a duplicated site I am currently working on. Creating, copying and editing a Header and Footer symbols worked flawlessly. But there was no undo for any of the changes I made when I went back to it.
Am I missing something? All I did was change floats from left to right and ranged left instead of right some text. I went to check that the changes had updated on the other instances - and they had smile But I could't then undo the changes.
I will investigate further…


#11

NavBar is fine for me…
It was an existing one that I have converted - don't know whether that makes a difference.


#12

Hi, I have started testing and everything working fine for me so far... I find the symbols to be an huge benefit !


#13

I can't delete it from the assets menu either. Redo/Undo is not working too.
And I came to two things regarding the Navbar.

When making the navbar a symbol, it opened the menu foverer like in this image:

It works fine published but in preview mode and design mode it stays there. The thing is when I double click to edit the symbol again, it comes normal again:

One more thing is when I open the menu in Symbol mode, the opened menu stays faded so copying and paste to other pages doesn't make effect.

Simple sections with just paragraphs and headings are working fine but can't redo/undo.

here is the troubleshooting link: https://webflow.com/design/growmusic3141218?preview=160462287eb0440046e7f16db4834c6a


#14

@Daniel_Sun @cyberdave @rowan @PixelAce Thank guys! I'm looking into all of your reports, and will have a slew of fixes in a bit.

A few have asked, but yes - deleting symbols (but only after all instances are removed) is not implemented yet, but coming soon!

Will make this post invisible for now (you can still see it via direct link) since I have enough to work on for at least today.

Thanks again!


#15

This topic is now invisible. It will no longer be displayed in any topic lists. The only way to access this topic is via direct link.


#16

This is working absolutely fine for me. Have just started developing a 7 page site, the time saved using symbols is a godsend. Not had any issues so far at all.

Lovely!


#17

@Golden28 @Daniel_Sun @cyberdave @rowan @PixelAce I just pushed a lot of improvements to undo/redo for symbols, including a lot of UI cleanup to make symbol management look much nicer. Still working on some of the bugs related to navbars - will update soon.


#18

This topic is now visible. It will be displayed in topic lists.


#19

Everyone who had issues with navbars, would you mind giving it another shot? We just pushed some important fixes that should resolve weirdness with Navbars that are converted to symbols.

Also, just released some other features for symbol management:

  • You can now see instance counts to keep track of how many times the symbol is used
  • Symbols can now be deleted if there are 0 instances/copies across your site
  • Symbols can be renamed and reordered

Please let me know if you guys run into any bugs or issues. As always, a preview link helps a lot!

Just to reiterate, Symbols should not be used on production sites yet! Please only work with a copy/duplicate of your site, as things may still be a bit unstable. Thanks!


#20

@callmevlad - I am still having the same issue when opening the menu in Symbol mode for editing, it stays faded so copying and paste to other pages doesn't make effect in Symbol.

The other two I have encountered later were solved.

I have messed around with the new features (which looks real nice btw) and all are working fine. Would be good to know where the instances so it could save time if it is a multipage website.

Here is the troubleshooting link: https://webflow.com/design/growmusic3141218?preview=160462287eb0440046e7f16db4834c6a


#21

I can't add any symbols ;s Any help?


#22

Which browser are you using?