Create variants to your symbols thanks to the replacement fields that allow you to modify the content of an instance without affecting the main symbol!
The symbols in Webflow are very useful because they allow us to add elements or groups of identical elements quickly in several pages. Moreover, when we make a modification in a symbol, it is applied on all the pages where it is present.
In our Webflow tutorial of the day, we are going to show you how to override the automatic modification of text, images, rich text, link or video symbols for all its instances . The goal is to have the same symbol present several times on our site, but whose content can be customized depending on the page or section.
Step 1: Create a symbol (Symbol) in your project
The first step of this tutorial will simply consist in creating your symbol in your Webflow project.
If you don't know how to do this, here is a video tutorial that may help you:
Step 2: Select the item you wish to change according to the page / section
We are now going to 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.
Step 3: Link this element to a replacement field
Once we have selected our element, we will go to its parameters. In the parameter section of our field, we can see our element (our text, image, rich text, link or video). In the top left corner of this block in the parameters we see a purple circle. We will click on it to create a replacement field.
Then we click on"New Field".
A pop-up opens and we give a name to our replacement field.
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 be present in its original version (the text, image, rich text, link or video will not have changed).
To modify our element without affecting the element in our other symbol, we go to the symbol parameters.
In the"Instance Overrides" section, we find all our replacement fields. Now we just have to modify the content of our element. We can see that we have done our modification when the name of the replacement field turns blue.
You have now created a variant of your symbol. The structure remains the same, but the content differs.
You can repeat this as many times as you like.
I hope this tutorial has helped you or allowed you to learn more about Webflow. Don't hesitate to read our other blog posts to become a no-code / low-code pro! You can also pre-register to our training course open to everyone, to learn how to create in no-code.
Learn more about Webflow Components!
.jpg)
