Create Variants of a Component (e.g., Symbol) in Webflow

Tutorial
March 20, 2023
3 min
Webflow Tutorial Text with Webflow symbol logo
Key points

The symbols in Webflow are extremely useful as they allow us to quickly add identical elements or groups of elements across multiple pages. Additionally, when we make a modification to a symbol, it automatically applies to all pages where it appears.

In today's Webflow tutorial, we will show you how to override the automatic modifications of text, images, rich text, links, or videos within symbols for all their instances. The goal will be to have the same symbol appear multiple times on our site while allowing us to customize its content according to the page or section.

Step 1: Create a Symbol in Your Project

The first step in this tutorial is simply to create your symbol in your Webflow project.

Symbol Webflow

If you are unsure how to proceed, here is a video tutorial that can assist you:

Step 2: Select the Element You Wish to Change Per Page/Section

We will now double-click on our symbol (to edit it) and select the element (text, image, rich text, link, or video) that will have variations on our website.

Element parameter text in symbol webflow

Step 3: Link This Element to a Replacement Field

Once we have selected our element, we will go into its settings. In the settings section for our field, we can see our element (our text, image, rich text, link, or video). At the top left of this block in the settings, we will notice a purple circle. We will click on it to create a replacement field.

New replacement field symbol webflow

We then click on "New Field".

Adding new replacement field symbol webflow

A pop-up opens, and we give a name to our replacement field.

Name replacement field symbol webflow

We can then click on "Create and link".

Our element now has a purple border when clicked in the designer.

Step 4: Add a New Instance of the Symbol

You now have a replacement field created for your element. You can add it again in your project. By default, our base element will appear in its original version (the text, image, rich text, link, or video will not have changed).

Adding symbol webflow

To modify our element without affecting the one present in our other symbol, we navigate to the symbol settings.

Webflow symbol settings

In the section "Instance Overrides", we can find all our replacement fields. It's then a matter of modifying the content of our element. We can see that our modification was successful when the name of the replacement field turns blue.

Modification of the text in replacement field symbol webflow

You have now created a variation of your symbol. The structure remains the same, but the content differs.

Replacement field for text symbol variant

You can repeat this manipulation as many times as you wish.

I hope this tutorial has helped you or has allowed you to learn more about Webflow. Feel free to explore our other blog articles to become a no-code / low-code pro! You can also pre-register for our open training for everyone to learn no-code creation.

Learn more about Webflow Components!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Events
Webflow

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.
Visual overview of several modern web typefaces in 2025, each displayed on a vibrant background: Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, and more — a graphic composition highlighting typographic diversity.
Documentation
Design

The 20 Best Fonts for a Modern and Impactful Website in 2025

The 20 Best Fonts for a Modern and Impactful Website in 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

Want to turn your website into your most valuable asset?

Contact us today