Components are a powerful tool in your content modelling belt, yet making the most of components couldn't be simpler. This guide will cover the following topics:

Components are bitesize content structures that can be used again and again in your templates and items, allowing you to design flexible structures that don't require you to edit entire templates in the event a structure change is required.

Common components could be things like page headers and footers, or image galleries and testimonials. If you need to add new links in your footer, just edit your footer component and it will be applied to all the templates that use that component.

There are two ways components can be created - from the structure tab or from the structure editor.

Head to the structure tab and view your components. Either 'All components' or 'Not in use' is fine.

Then click on the 'New component' button.

When editing structures, new components can be created from existing fields. To do this, first select the fields you wish to create a new component with.

The action bar will appear at the bottom of the screen. Select 'Create component from fields'.

Give your new component a name (don't worry this can be changed at any time) and click 'Create component'.

You'll then see a new component created containing the fields you had selected previously.

Components created this way are labelled as 'Draft'. This means that this component isn't widely available in your project just yet. Once you save your structure or template, the component will be saved and accessible elsewhere.

Why? We want to enable people to create structures as fluidly as possible. Having a 'Draft' state allows you to drag fields in and out and reorder them on the fly, without the need to leave the structure you're currently editing. The ability to edit 'real' components this way could be quite destructive, especially when components are designed to be reused many times in many templates.

Components that have been saved no longer show the 'Draft' label. Instead, they will show the 'Edit' button. Clicking this will take you to the component editor where you can make changes to that component.

The component editor shares the same layout and functions as the structure editor but without the ability to add tabs. You can quickly identify you're in the component editor by the colour of the header (light grey) and the presence of the component icon.

Add fields to your component by dragging or clicking fields from the left-hand inventory menu.

Once you're happy with your component structure, click 'Save' and you're done.

To find out more about creating structures and editing field settings, read this help article.

Tip: There are no limitations to the types of fields you can add to components, nor how many fields can be added. However, components work best when used to manage smaller, reuseable content structures like page headers/footers, image galleries, testimonials etc.

Now you've created a component, it's time to use it!

Open the structure or template you'd like to add a component to. In the inventory menu on the left, you'll see the 'Components' option.

Clicking on this will open a menu of all the components in your project. If you have lots of components in your project you can narrow down the list by searching by name. The components list will be filtered instantly.

You can choose to edit a component from this list by clicking on the 'edit' button that appears when hovering over components.

Note: This will take you to the component editor. You will be asked to save any changes before you proceed.

To add a component to your structure, you can drag a component from the list to place it in a specific spot.

Alternatively, you can click to select multiple components and either drag them into position or click on 'Insert' to add them to the bottom of the current structure tab.

Tip: As with fields, components can be reordered or moved into different tabs via drag and drop.

Once the component is in the structure you can add some instructions. Instructions work in the same way as fields and are there to guide authors in providing the correct kind of content. Instructions are optional and won't be displayed in the content editor if no instructions are set.

Like text fields, components can be set to be repeated in the content editor. To do this, simply enable the 'Repeat' setting.

You can then choose whether to limit the maximum number of instances allowed. For example, for an image gallery that can only contain a maximum of 5 images, you would set the limit to '5'.

Once you're happy with your structure and components, hit 'Save' and you're done.

If you've edited a template that is currently in use, you'll be asked to confirm your changes before saving.

When it comes to adding content to components, they work in the same way as fields. The only difference is that visually they are wrapped in a component 'container' which groups the fields together.

If a component can be repeated, there will be a 'Repeat component' button below the component.

Clicking this will create another instance of the entire component. Content will not be copied over to the new instance.

If a repeatable component has reached its limit, the button will be disabled and won't be clickable until an instance has been deleted.

Note: Fields can also be repeated inside of components. More information on repeatable fields can be found in this article.

Once you have a library of components, you'll need to manage them.

In the Structure tab, your component library is organised into two areas, 'All components' and 'Not in use'. The names are self-explanatory, with components that exist but are yet to be used in a structure or template being listed in the 'Not in use' area. This makes it easy for you to remove redundant components.

Components are sorted alphabetically (A-Z) by default. Clicking on the column headers will sort them accordingly.

It is possible to duplicate a component to quickly iterate on ideas. From the Structure tab, select a component and choose 'Duplicate components' from the action bar. The duplication will trigger instantly, with the newly created component taking the existing name and appending 'Duplicate' at the end.

You can also duplicate components from the component editor by clicking on the menu (kebab) button. In this instance, you'll be taken to the new component to get editing straight away. Again, you'll be asked to save any changes you may have made.

The Structure tab is a good place to find out where your components are used (explained above), but when inside a component you can view more detailed usage, and access any items or templates directly.

To do this, first open any component which is in use. Then, click on the 'Info' button in the header. The usage sidebar will appear on the right listing out all of the items and/or templates that component is used on. Clicking on any of them will take you there straight away.

Like templates, components can be imported from one project to another.

In the Structure tab, view your components and click on the 'Import' button.

You'll then be presented with a modal containing the projects in your account on the left. Clicking on a project will display any associated components on the right. This allows you to quickly import components from multiple projects.

Once you're happy with your selection, click 'Import' and the components will appear in your current project, placed in their appropriate position based on your current sorting option (alphabetically by default).

Note: Importing components will create entirely new components, rather than referencing them.

Inevitably you'll want to delete components. You can do this from both the Structure tab and from inside a component.

From the Structure tab, select the component(s) you wish to delete, and select 'Delete components' from the action bar.

From inside a component, click on the menu (kebab) button and select 'Delete'.

Note: Component deletion is permanent and cannot be undone. For this reason, it is not possible to delete components that are in use as this could result in the accidental loss of content. Remove any components you wish to delete from structures and templates before proceeding.

At the moment our integrations don't support components. We are currently working with our integration partners to support components starting with our most popular integrations (Wordpress and Drupal). If you're unsure how this may affect you, please reach out to our support team who will be happy to help.