The Components (e.g. symbols) in Webflow

Documentation
March 20, 2023
3 min
Webflow Component
Key points

The Webflow Conf' 2022 had its share of surprises. Among these surprises, we witnessed the arrival of components or rather the evolution of symbols into components.

In today's article, we will decode the new features of this block reuse system.

Did you feel limited with symbols? You won't feel that way with components anymore

This name change reflects the new power of this feature - and sets the stage for future investments in reuse, workflow optimization, and additional control.

Here is the promise that Webflow makes regarding the deployment of components.

With this new feature, we can have greater flexibility in our Webflow project. Components are more intuitive and allow us to easily create variations of a model depending on our pages.

For those who are familiar with Figma, the components are almost identical in both tools.

The new features of components

Create components quickly

You can now create components with just one click.

With symbols, we had to go to the "Symbol" tab to create one.

Now, from the style or settings tab of the element, you have an option that prompts you to create a component: "Create component".

Create a component in Webflow

Edit text, links, or images in the component directly

Here’s a tangible example of the promise to make components intuitive. It is now possible to change the text (links or images) within a component directly by clicking on it in the Designer.

The text (link or image) will be unique to that instance of the component.

Customize static content in a Webflow component

Discover the previous version of variants for symbols in Webflow!

Add dynamic content to a component

Previously, with symbol variations, we could not customize a symbol with content from a Webflow CMS collection.

This limitation is no longer an issue. In a dynamic page (and very soon within a collection list), if you insert a component and select an element within it, you can customize the content based on the fields of your collection.

Customize dynamic content in a Webflow component

Hide or show an element in a component

A new and significant feature of components: element visibility management. Yes, you can now make an element in an instance of a component visible or invisible. This allows you to create endless variations of your components (even if that’s not necessarily the goal).

Hide an element of a Webflow component

What excites us the most is that this is just the beginning of components. The new features coming with components are fantastic for collaboration (especially with clients), flexibility, and optimizing a Webflow project, but we are only at version 1. New features will be rolled out in the coming months and years, enabling us to create 100% customized websites. Apparently, Webflow is studying the possibility of sharing components across different projects👀🔥

That’s what you needed to know about components in Webflow. To optimize your development time, you can now discover Webflow's other new feature: component libraries.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today