Using Components ( aka. Symbols )

Components are aggregations of elements which are turned into a reusable element on your canvas.

On the canvas, Components are visually identified with a green outline.

They are particularly useful for elements that you'll be using across multiple pages of your site, such as;

• Your site navigation and header
• Your site footer
• Specific recurring elements like sidebar testimonials

Component Overrides

In Oct-2022 Webflow added the ability to override certain aspects of a component in a particular instance, which expands the use cases for components to include things with structural consistency but content distinctions.

For example;

• Hero areas, where the background image and text are different
• Call-to-action ( CTA ) sections, where the message, button action, an button text are different
• Static testimonials or quotes, where the styling is consistent, but the quotation and speaker vary in each instance of the component

In 2023 Webflow added the ability to data-bind those component properties to a CMS context, such as a collection list or collection page. This includes the ability to control the conditional visibility of elements within the component.

How is this useful? Well, the main advantage is that components are neatly packaged pieces of design, which can now have some capability.

Let's suppose you have a nicely styled custom testimonial, but you want to use it in a variety of different places - in the sidebar of pages, on the homepage in a 3-most-recent, and also on a dedicated testimonials page.

Now you can build one component and use it in all 3 contexts, and even have certain variations such as whether you show the full testimonial, or just an excerpt, or whether it's clickable to go to the testimonials page.

When Should I Use Components?

Any time you have a specific arrangement of elements that you are using on more than one page, and which you want to maintain consistency between, you should probably use a Component.

Limitations

Currently, Components cannot be CMS-bound, or used within a Collection List.

Learning Resources

• Components - Webflow-U

‍