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 Definition

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

Component Picker

  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

Component Editor

  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"

Linking Content to Components

Content Picker

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