Who this is for. A theme developer, or a content modeller, defining what editors can enter on a page type. After this page the Article layout will have three areas, and you will know which of their settings are cheap to change later and which are not.
The fields of an area
On the layout's form, add one area for each field the editor should fill in. Each area has:
| Field | What it is |
|---|---|
| Name | How the template asks for the area. Unique on the layout. The one field that is expensive to change later |
| Type | The input type: what kind of field the editor gets, such as a line of text, rich text or an image |
| Label | What the editor sees beside the field. Left empty, it is the name, capitalised |
| Help and Info | Guidance for the editor, shown with the field |
| Required | Whether the editor must fill it in before saving |
| Supported layouts, # Min. components, # Max. components | Only for Component and Component Collection areas: which component layouts the editor may add, and how many |
| Attribute | Makes the area a setting attached to another area, such as alt text for an image. See Area fields, groups and attributes |
The three areas of the article
| Name | Type | Label | Help |
|---|---|---|---|
heading | Text | Heading | The article's headline, shown at the top of the page |
body | Richtext | Body | The article itself |
heroImage | Image | Hero image | A wide image shown above the body |
Input type names are the site's own data. If the site calls them something else, use its names from Customization › Input Types. Save the layout when the areas are in.
Choosing names
The content an editor enters is stored against the area itself, not against its name, so renaming an area keeps the content. Update every template, integration and API client to the new name at the same time, since each one reads the area by name. Choose names as you would choose the names of a public interface:
- Name the content, not its look:
heroImage, notbigPictureLeft. - Keep one style across the site; camelCase, as here, is the common one.
- If templates will use the shorthand
$page->heading, avoid names a record's own methods already answer to, such asname: see The area shorthand.
When no input type fits
If the field you need does not exist, for example a choice between three design options, create the input type first, under Customization › Input Types: a text input type with the select editor and its options. Input types belong to the client, so every site of the client can then use it. Create an input type for a design-token dropdown walks through one.