Working with Components

This guide explains how to work with components in Agility CMS. Components are reusable building blocks that display content on pages.

What Is a Component?

A Component is a reusable building block that displays content on a page. Think of components as LEGO blocks—you combine different components to build a complete page.

Component Structure

• Component Model: Defines what fields a component has
• Component Instance: An actual component placed on a page with data
• Content Zones: Where components are placed on pages

Component Models

Component Models define the structure of components:

• What fields the component has
• Field types (text, image, linked content, etc.)
• Validation rules
• Default values

Adding Components to Pages

1. Open the page you want to edit
2. In the page editor, you'll see Content Zones (areas where components can be added)
3. Click "Add Component" in the desired content zone
4. Select the component type from the list
5. Configure the component's content fields
6. Click "Save"

Editing Components

1. Navigate to the page containing the component
2. Click on the component in the page editor
3. The component editor opens
4. Make your changes to the component's fields
5. Click "Save"

Renaming a Component

A new component takes its Component Model's name, such as Image with Description. To give it a name that says what it holds:

1. Click the component in the page editor to open it
2. Open the Properties tab
3. Change the Display Name and click "Save"

The new name appears in the page's list of components, with the Component Model's name underneath. Renaming a component doesn't change its content or how your site displays it. Renaming the Component Model under Models only changes the name that new components start with; components already on pages keep theirs.

Linking Content to Components

Many components can link to content items. This allows components to display reusable content.

How to Link Content

1. Open the component editor
2. Find the field that accepts linked content (often labeled with a link icon)
3. Click to open the content picker
4. Select the content item(s) you want to link
5. Save the component

Example: A "Testimonials" component might link to multiple "Testimonial" content items to display them on the page.

Component Field Types

Components can have various field types:

• Text: Headings, descriptions, labels
• Rich Text: Formatted content
• Image: Images displayed by the component
• Linked Content: Link to content items
• Multiple Linked Content: Link to multiple content items
• Number: Numeric values for configuration
• Boolean: Toggle options

Component Placement

Components are placed in Content Zones on pages:

• Each page model defines available content zones
• You can add multiple components to each zone
• Components appear in the order they're added

Component Reusability

The same component can be used on multiple pages:

• Create a component once
• Use it on different pages
• Each instance can have different content

Best Practices

1. Use appropriate components: Choose components that match your content needs
2. Link to content items: Use linked content for reusable content
3. Organize in zones: Place components logically in content zones
4. Keep components focused: Each component should have a single, clear purpose
5. Test components: Preview pages to see how components appear

---

Next: Workflow - Publishing workflow and approval processes