This tutorial shows how to create a Data model that defines the structure for your site’s color themes, build seasonal entries such as spring and fall palettes, then bind those color values to blocks to style your pages in the app.
- Create a Data model to define the structure of color fields.
- Build seasonal entries, such as spring and fall color sets.
- Bind color fields from the Data model to the blocks to apply styles dynamically.
To complete this tutorial, you need:
- A Page or Section integrated with Builder. For more information, go to Integrating Pages or Integrating Sections.
Create a Data Model to define a structured container for your site's theme data. A Data model in Builder organizes data from visual content and helps manage and reuse theme data across multiple pages in the app.
To create a Data model:
- Go to Models.
- Click + Create Model.
- In the Name field, enter
Site Theme. - In the Description field, enter
Colors. - Click Create.
The video below demonstrates creating a new Data model called Site Theme.
Add custom fields to your model to define the colors you want to use and manage within your content entries.
To add custom fields:
- On the Fields tab, click + New Field.
- In the Name field, enter
Header. Set the Type to Color. - Repeat the process to create
Body,Primary, andSecondaryfields with the Type set to Color. - Click Save.
The video below demonstrates adding color fields such as Header, Body, Primary, and Secondary to the Data model:
After defining the model with fields, create content entries that assign color values to the custom fields. Each content entry represents a color palette and provides structured theme data to reuse across the app.
To create Site Theme entries:
- Go to Content and click + New Entry.
- Select Site Theme as the model type.
- In the Name field, enter
Spring colors. - Pick a color for each custom field: Header, Body, Primary, and Secondary.
- Click Publish.
- Optional: Repeat these steps to create a second entry named
Fall colors.
The following video demonstrates creating two content entries that use the Site Theme model with different color palettes:
After creating entries, bind the colors to the blocks in the Page or Section content entry where you want to apply the Site Theme colors.
To bind Text Color:
- Select a Text block on the canvas and open the Style tab.
- Go to Typography > Text Color > Binding.
- In the dialog, select a color field from the Site Theme content entry, such as Header, Primary, Secondary, or Body.
- After selecting the field, the Text Color binds to the selected block.
- Repeat these steps to bind colors from the model to other blocks as needed.
To bind Background:
- Open the Style tab.
- Go to Background > Fill color > Binding.
- Select a color field from the Site Theme content entry.
This video demonstrates binding Site Theme colors to the text and background fields of the selected blocks on the Style tab:
- Learn more about using integrated CMS data.
- For general information about models, see Data models.