Working with Components

Many TNCFlow templates include Webflow Components - reusable design elements:

What Are Components?
Components are building blocks you can use multiple times. When you edit the main component, all instances update automatically.

Identifying Components
1. Look for a small diamond icon next to element name in layers
2. This indicates it's a component instance
3. Components appear as regular elements but with special behavior

Using Components

Creating an Instance
1. Find a component in your template
2. Duplicate it (right-click → duplicate, or Ctrl+D)
3. The new instance is connected to the main component
4. Place it where needed

Editing a Component Instance
You can modify instances with limits:
- Change text content
- Adjust colors
- Resize
- Position

However, some properties are locked to maintain consistency.

Unlocking Component Properties

To fully customize an instance:
1. Right-click the element
2. Click Detach from component
3. Now you can edit anything
4. This instance no longer updates when main component changes

Editing the Main Component

To update all instances at once:
1. Find the main component (marked with special icon)
2. Edit it directly
3. All instances update automatically

Creating Your Own Components

To turn a design into a reusable component:
1. Design your element
2. Right-click and select Make component
3. Name it
4. Now you can create instances of it