---
title: "Content modeling and presentation"
slug: "content-modeling-and-presentation"
abstract: "Concepts of content creation in SitecoreAI: models, modeling, templates, presentation, layouts, page designs, partial designs, renderings, and data sources."
---
# Content modeling and presentation

This topic is an introduction to managing content in [SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/en/sitecoreai.html). It clarifies core concepts, such as templates, layouts, page designs, partial designs, and data sources.

SitecoreAI provides end-to-end solutions for content creation. When discussing content in SitecoreAI, we differentiate between two types:

- Data - the model of the content that's presented on a webpage. This can also be known as modeling schemas and content types. In SitecoreAI, you create data models using the Content Editor.
- Presentation - the way the content is presented, including layout definitions and page structures. This is also known as a *layout*. In SitecoreAI, you control the presentation using Content Editor, the Page builder, the Component builder, and Forms.

You bind data and presentation when you specify data sources[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_datasource] in the Page builder.

## Content modeling

Content modeling means creating the schema structure of an element that will be presented on your website. You do this using templates[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_template], also known as data templates, that are made up of fields[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_field]. For example, you create the data structure for a widget that contains information about the authors that contribute articles to your site. That model could include the full name of the author, a one-line bio, an image of them, and their areas of expertise. These fields are just data: they don't contain information about how the data will be presented.

## Presentation

You start creating presentation elements after you have a design in mind for the elements you're going to build. In SitecoreAI, most of the presentation elements are built in the Content Editor. Presentation includes these elements:

- Placeholder - determines the allowed location of elements in a component, a page, or any type of presentation element, using placeholder keys. You can also determine the type of components allowed in a placeholder.
- Partial design - an element that's prebuilt with some presentation and content elements. When you update a partial design, it changes in all the places it's reused in the site.
- Component - a presentation definition that you can add to your webpage in Pages, then add or edit its content, and customize its appearance.
- Page design - the presentation definition of a page. It consists of placeholders, partial designs, components, and rendering parameters.
- Layout - any combination of presentation definitions, combining the different presentation elements.

## Binding content and layout

You use data sources[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_datasource] to bind content with the page layout. For example, you can populate the a drop-down menu (layout) with the names of child items in your content tree. You can bind dynamically by using placeholders.

In addition to using data sources, you can use rendering parameters to control presentation without having to bind content. When you use rendering parameters, you can configure presentation options for a component that a content author can choose from when they use the component. For example, if the component is a widget that displays information about authors, you can configure rendering parameters that allow them to choose the background color of their widget.

## Reusing elements

In SitecoreAI, you can reuse many of the data or presentation elements in flexible ways and powerful combinations throughout your site and site collections. Some examples include:

- Create headers and footers as partial designs that can be reused throughout your site. This has an added benefit of the ability to query and load the partial design once, and cache it to improve site performance.
- Use [branch templates](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/data-templates/branch-templates/branch-templates.html "Branch templates") to streamline the creation of multiple related items with a consistent, pre-configured structure. Authors can quickly insert entire sets such as FAQs or team bios at once, making it faster and more efficient to build out structured content across your site.
- Reuse content items by creating a folder with a group of content items (a *Shoes* product folder that includes these content items: heels, men's elegant shoes, hiking boots) then displaying those items in different types of components (a carousel component that rotates your shoe collections, and a promo component with an offer of 20% off hiking boots).
- Assign rendering parameters to a component, so that the exact same component can be rendered in a different style.
- If a data source is reused across multiple pages, you only need to update it once for the changes to go into effect everywhere.

## Example component

The following example shows a template for an employee card component, that contains their name, role, image, and a quote:

![Fields for a component template in the Content Editor](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/CE_component_template.png)

The component itself is populated with media from the media library, and the text fields fields are filled out:

![Component definition in the Content Editor](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/CE_component.png)

Finally, the component is rendered on the website, where the presentation details and CSS are applied:

![Rendered component with styling and presentation](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/CE_rendered_component.png)

## Further reading

You can model content and control your layout using interfaces, such as the Content Editor and Pages, or using the content authoring and management GraphQL API.

You can read more about these features:

- [Data sources](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/data-sources/data-sources.html "Data sources")
- [Data templates](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/data-templates/data-templates-733367/data-templates-733367.html "Data templates")
- [Use dynamic placeholders in components](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/content-editor-items/components/use-dynamic-placeholders-in-components.html "Use dynamic placeholders in components")
- [Work with page designs](https://doc.sitecore.com/sai/en/users/sitecoreai/en/work-with-page-designs.html)
- [Work with partial designs](https://doc.sitecore.com/sai/en/users/sitecoreai/en/work-with-partial-designs.html)
- [Sitecore Authoring and Management GraphQL API](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/sitecore-authoring-and-management-graphql-api/sitecore-authoring-and-management-graphql-api.html "Sitecore Authoring and Management GraphQL API")

[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_datasource]: A data source contains content that's managed outside of a specific component. Components can call the data source to add that content at runtime. For example, a component can have its own content, such as a title, text, and a button, and an image that is added from a data source when a page is rendered.
    
    We differentiate between *internal* and *external* data sources. An internal data source is created and handled within SitecoreAI, for example: text, images, media, a site page. They can be stored on a page level (available to all the components on that page) or the site level (available to all the site components). In addition, you can set the data source of a page to be the page itself. This is useful for utilizing the page's metadata. For example, the title of the page as it appears in the browser tab can be tied to the page name.
    
    External data sources are created and saved outside of SitecoreAI. A component can fetch the data from an external source using one of the following methods: by including some JSON that calls the data source, sending an HTTP request and handling the response, or using the result of a GraphQL query.

[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_template]: Templates, also called *data templates*, define the structure of content items. Each template contains fields that are organized into sections. The template defines the field names and the sections the fields belong to. It also defines the type of each field, meaning, the input that the field can accept.
    
    For example, a Product data template contains 2 sections: General information, and Manufacturing details. The General information section contains these fields:
    
    - Name – string
    - Catalog ID – string
    - Price – integer
    
    The Manufacturing details section contains:
    
    - Manufacturer – string
    - Manufacturing country – list
    
    Templates inherit definitions from a *base template*, which is simply a template that other templates inherit fields and sections from.

[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_field]: A field is a property of an item that stores data about the item. They can be simple (for example, string, text, number) or more complex (for example, Rich Text, General Link, Multilist) The template that an item is based on determines which fields are included in an item.