Learning Webflow

Using Components ( aka. Symbols )

No items found.
Overview
Getting Started
Getting Started in Webflow
050
The Webflow Designer
Getting Around the Designer
100
The Site Starter Plan
101
Basic Site Building
Classes, Layouts & Styling
201
Learning Forms
202
Hidden v. Visibility
202
Basic Site Building
How Classes Work
202
Using Components ( aka. Symbols )
208
Backup & Restore
209
Conditional Visibility within Components
209
Webflow Subsystems
CMS, Ecommerce, Logic, & Memberships
500
Learning the CMS, Collection Lists & Collection Pages
14:00
501
Learning Webflow Ecommerce
502
Learning Webflow Memberships
503
Learning Webflow Logic
504
More
Online Resources
600
Extending Webflow
Multilingual Support
700
Going Beyond Webflow
Going Beyond Webflow
800
Tips for Advanced Webflow Projects
801
Webflow Naming & Design Frameworks
802
No items found.

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

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.