Learn how to ship impactful customer journeys with Builder

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

A model is a paradigm—a pattern for something else. Builder offers three kinds of models that define content types:

You use these models as the defining source for content entries. Like a rubber stamp, the model provides a basic foundation. Each time you use a rubber stamp, the fundamental characteristics are the same but you might use the resulting image differently by varying other factors such as color and surface.

Similarly, with models in Builder you can define what a Page, Section, or collection of Data is and use those models over and over to build your site and populate it with content. And you can create as many models as you like.

The following graphic compares Builder models. Follow the Try it out link to play with a demo of each.

Image of a webpage that shows the entire page highlighted in blue.

Visual Pages

Try out Pages

Use Pages to manage entire pages, such as:

Image of a section of a webpage that is highlighted in green.

Visual Sections

Try out Sections

Use Sections to maintain parts of your site or app, such as:

Image of data on a page that is highlighted in orange.

Structured Data

Try out Data

Use Structured Data to manage structured data, such as:

All models in Builder support:

This means that you can granularly grant permissions, test, and precisely deliver content.

When you use models to build your app, you can create exactly the Pages, Sections, and Data specific to your use case. With your integrated app, you can, for example, use your Sections in the Pages you choose as well as reuse Data wherever you need it.

Examples of models include:

  1. A seasonal announcement banner placed on a page between certain dates.
  2. Marketing tile targeting a specific persona on certain pages.
  3. Blog authors whose profiles you want to link to from different parts of your site.

By creating models for each type of content you need, you can ensure consistency while making the process of iterating more efficient. The developer creates and integrates a model and non-developer teammates can use that model to create as many content entries as they need.

The following diagram shows a typical Builder documentation page. The left side navigation is a Section, the body of the document is a Page, and the font colors are stored in a Data content entry.

When deciding which model to use, consider your use case.

  • Use a Page model if you're creating Pages that use URLs and you want your teammates to edit them in the Visual Editor.
  • Use a Section Model if you're creating parts of a page — with or without a URL — and you want your teammates to edit them in the Visual Editor.
  • Use a Data Model if you want to bring your data into Pages or Sections and bind your data.

All models support structured data fields. The table below compares models in Builder to help you decide which to use when:

Model TypePurposeRequires URLEditable in Drag-and-Drop Visual EditorSupports Structured Data Fields

Use to create Pages

Yes

Yes

Yes

Use to create Sections

Optional, but most use cases don't need a URL.

Yes

Yes

Use to manage data

N/A

While you can use your Data in the Visual Editor, you must edit the data in the Data entry.

Yes

To get the most out of Builder Models, be sure to integrate and learn about each type of model:

  • Page Model: Learn what a Page model is and how to use one.
  • Integrating Pages: Integrate Page building with your code base so non-dev team members can create as many pages as they need and developers can focus on code.
  • Section Models: Learn about Section use cases and how to use Sections in your app.
  • Integrating Sections: Integrate Builder Sections with your codebase so teammates can create and use Sections wherever they need them.
  • Data Models: Give shape to data and learn how to query that data.
  • Integrating CMS Data: Integrate data to create reusable data across your site.
  • Custom Fields: Learn about the wide array of options available for shaping your models.
Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024