The idea
Some areas hold one value: a line of text, an image. A Component Collection holds a list of blocks, and you choose which blocks and in what order. Each block is a component: a hero, a grid of cards, a callout, a call to action.
That is what lets one layout produce many different pages. The layout gives the frame; the components give the content, arranged as that page needs.
Adding a component
In a collection area, click "Add component". The chooser lists only the components that area accepts, in three tabs: Components, which you fill in each time you add one; Global Components, set up once and reused (below); and Clipboard, components you copied from another page with "Copy to clipboard" in a component's menu. Pick one and you get its own fields, because a component has areas just as a layout does.
Components can contain other components: a grid usually holds its own collection of cards. Several levels deep it is easy to lose track of which collection you are editing, so save often and look at the result in Live Preview.
Order
Components appear on the page in the order of the collection, and you reorder them by dragging. Moving one does not change the content of the others.
Choosing the right component
- Prefer the component made for the job over a near fit used oddly. If you find yourself typing a heading into a card's text to fake a section title, there is probably a component for section headings.
- Prefer one general container with a setting over stacking several wrappers.
Global components
A global component is set up once and placed on many pages. Editing it changes it everywhere it appears, which is the point, and also means a small edit reaches every page that uses it. Use one for something that must stay the same everywhere, such as a contact block or a standard promotion.
If a component looks wrong on the page
Check the content first: a field left empty, an image never chosen, text much longer than the design expects. Content that does not fit is far more common than a template problem.