Symbol unusability!

OMG Webflow, what is going on with that really dark overlay when editing symbols!

It was bad enough that the symbol switched to a light overlay, now it is a disaster.

When editing a symbol, you still need the ability to see your design in context to the rest of the page. It was always really off-putting that when editing a symbol the rest of the page greyed out, often the edits you are making are visual, cosmetic edits, so not being able to see the rest of the page whilst doing it is absolutely frustrating.

I personally would not even have the symbol as a ‘isolation mode’ element, there is no need to double click the symbol to edit it, professional designers do not need to be in isolation mode (no current pun intended) when editing a symbol, having it show as green outlines on hover is enough.

Leaving the isolation mode part to one side, which I have learnt to live with…

What is the thinking behind the dark overlay?

The entire point of the Webflow universe is to design directly on the page, in real-time, so why would you then make a UI change that physically removes the ability to visual design an element on the page.

You guys and gals, got this one very wrong.

Thanks Graham

Thank you for this feedback Graham, it has been heard and will be added to our symbols testing feedback, and I definitely appreciate this is frustrating behaviour.

There are definitely some issues around the overlay so we can look into this while fixing them. I feel that when nested symbols is possible, the overlay will be a lot more use as you will be able to visually see the symbol you are affecting.

Seconding this. Also, the CPU usage of my webflow tab goes absolutely bonkers when I’m editing a symbol. Performance tanks for no reason.

Chiming in here a few years later, but you also can’t use the eyedropper tool either when editing inside a symbol because it grabs the darker overlay colour. Editing menus is probably the worst because the dropdown is still greyed out even though the entire symbol is isolated. You then end up with this tiny little strip of light that you can scroll up and down in. Fine-tuning subtle shadows means you have to isolate a symbol, adjust a shadow, preview, then go back in and isolate, rinse and repeat because the overlay gets in the way.

I should add, when a symbol is isolated if I then hit preview and click on a link too quickly it’ll then randomly crash and take me to the Webflow homepage, and i’ll have to reload the designer. This only happens while a symbol is isolated in preview mode. It may have been mentioned previously but just adding it anyway. :grinning:

Here’s an easy workaround for this to anyone still having this problem.

  1. Install a Chrome extension that allows you to insert CSS per site. For example, this one.

  2. Open or refresh the Webflow designer after you install the extension.

  3. Add the following CSS code to the window:

[data-automation-id="focused-symbol-mask"] {
  display: none !important;
  visibility: hidden !important;
}
  1. Enable the toggle on the top right to turn on the custom code.

  2. Refresh the designer.

That’s it! Every time you enter the symbol, the overlay should disappear.

1 Like

This is really nice! Thanks man :slight_smile:

Hi all. i am new mamber. Have a nice day :wink: