How to Style Text in a Template

This article shows you how to style text on a template page. This technique sets style customisations for every page produced by the template; you cannot make page-level text style customisations.

This approach to text styling works for the Details template and Repeater component template.

1  Naming data fields

The first step is to name the data field connected to each template component. By default, a component in a template does not display how it is mapped. The green light on the toolbar indicates a component is mapped to a field in a data set, but we do not know the name of the field.

For example, the image below shows three components on a Details template: one Heading component and two Text components. Each component is filled with default text: Click here to edit....

Each component is mapped to a field in a data set, but we cannot see the mapping. 

1.1 Enter the data field name

1. Hover the mouse pointer on a component. The toolbar displays.
2. Click the green mapping light. The Map to a Column panel displays and shows the current mapping.

3. Remember the data field and then click Cancel on the Map to a Column panel.
4. Click the component and then type that data field name.
5. Repeat for all components.
6. Click the Save button at the top of the page.

The image below shows the end result. Each component in the template has the name of the mapped data field. This is placeholder text and does not appear on published pages.

2  Adding text styles

Now that we have placeholder text inside components, we can insert styling.

1. Highlight placeholder text in one component with the mouse. A black toolbar displays.

2. Click a tool and style text as required.
3. Repeat for the other components.
4. When finished, click the Save button at the top of the screen.

The toolbars for Text and Heading components are different. Text component toolbars have more tools. To learn more about Text and Heading toolbars, see:

• Customising Text Settings
• Customising Heading Settings

2.1  Results

The image below shows an example of text styling on a template page. There are three components on the template page. Each component has different style customisations.

This image shows the results on a published page. The placeholder text is replaced by content from the data set, but the text styling customisations remain.