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".
Visual demonstration: A Webflow Designer interface shows an element selected and the option to create a component from the style or settings panel.
Create a component in WebflowEdit 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.
Visual demonstration: A Webflow Designer interface shows content being customized directly within one component instance, so its text, link, or image can differ for that instance.
Customize static content in a Webflow componentDiscover 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.
Visual demonstration: A Webflow Designer interface shows content in a component connected to fields from a CMS collection.
Customize dynamic content in a Webflow componentHide 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).
Visual demonstration: A Webflow Designer interface shows visibility controls for an element within a component instance.
Hide an element of a Webflow componentWhat 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.
.webp)
Thibaut Legrand