WebflowWebflow Enterprise Partner
10Symbols

In 1993, during a dispute with his record label (who wouldn't release his 500 or so finished recordings for fear of saturating the market and reducing demand for his music), Prince changed his name to a symbol in order to make it difficult for the label to promote him. This meant that, in order for journalists to cover The Artist Formerly Known as Prince, they had to get a floppy disc from the record label with a font that contained the character. This was next-level trolling for 1993. And the label relented.

But symbols have more uses than just trolling. In Webflow, the basic use is to link together repeated content like headers, footers, a search component, a social component or a promotional overlay. This eliminates the need to update each page individually. But they can also be used in more abstract ways.

An embed element, for instance, may be symbolized and repeated on each page, injecting custom code into the page which the Webflow Designer will apply. (The header/footer custom code sections aren’t parsed by the Designer, and only appear on the published site.) We use this approach to enable Object Fit for images (see Session 9), for custom media queries that adjust CSS between Webflow's strictly defined breakpoints, and other custom code we need to be interpreted inside the Designer.

Symbols can also be used to “lock” classes into the stylesheet. Creating a class and then applying that to an element in a symbol, even if that symbol doesn’t appear on any pages, will prevent Webflow from deleting that class when you Clean Up unused styles in the Style Manager. This is very helpful for maintaining a library of classes used as a common base for each build.

Up next

11 Animation
Runtime: 5m 6s

Animation in web design is an exciting, attention-grabbing, sales-driving feature – until it’s not. Toe the line between engaging and annoying with a few basic principles to shape an experience that will enhance rather than aggravate.

Take me there