The Webflow Symbol Content Override Demo

This multilingual demo site uses a single Symbol Navbar element and a single Symbol for each one of the sections, for all three languages

Depending on the language page, texts, links and images inside of the navbar change to reflect it.

How does this works?

We're using the Symbol Override Webflow feature. We have defined several texts, links and images fields inside of the Navbar Symbol and the Sections Symbols, and we update their content locally, reflecting the current language.

Check the Read-Only version

Get started with Symbol Content Override

All you need to know in just a few seconds.

1. Create fields

Open the Symbol, select the root element, then create fields for texts, images, links...

2. Link to fields

Open the symbol, select each of the elements and link them to the fields.

3. Override content

Select a copy of the Symbol, then override the content of the field in the Symbol Instance panel

Notice how there are three different ways to select the Symbol. Each of those three ways will show different options in the Settings Panel.

1. Open the Symbol (double click) and select the root element. This will allow you to create fields for the Symbol.

2. Open the Symbol and select a child element. This will allow you to link the element to a filed you've created

3. select the symbol itself (just click on it). This will allow you to override the content in all the linked fields