---
title: Manage content types from the UI
slug: cms-saas/docs/manage-content-types-from-the-ui
docTags: 
createdAt: 2026-07-30T20:18:08.000Z
---

Setting up an Optimizely Content Management System (SaaS) instance through the UI lets you efficiently configure your content without coding. Starting from the basics, you can create content types, define properties, and build content directly within CMS (SaaS). This method offers an accessible way to tailor your content model to your specific needs, making it easier to manage and publish content. By leveraging the intuitive UI, you can set up a fully functional CMS (SaaS) instance that is ready for content creation and deployment.

Content is the primary resource type of CMS (SaaS). Content can represent webpages, components, media, and almost any other type. A content item holds data in a structured way described by a schema defined by the content type. Every content item is an instance of a content type. See [Content](docId\:vCCDhoONeWRu8hmgNjvzQ).

Before creating your first content item, you define a [content type](docId\:IIrc48HRxDZe6C7wiVBVT). A content type describes a content item's characteristics and data model schema. But, before you create your content types, you must develop a content model. Content modeling helps provide a "framework" for how your content is structured in CMS (SaaS). See [Content model](docId\:DxD5knGJxoI1rg9rI8rBb).

## Create a content type

1. In the CMS (SaaS) UI, go to **Settings** > **Content Types**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/4hW0_bW6KDaeVvPq-Iop1_25f163fe84adbc1a2f16d82a2b047b73607fb84a5dd5c508a5fac89939d08814-image.png)

2. Select **Create New** > **Page Type**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/u2IcWVyOS6venftMRZ4MR_128f0db591925c6b5356ddeb1055abc7181cf36ad418743fcd41ff0c7091d1f7-image.png)

3. On the **Create New Page Type** page, enter *examplePage* in the **Name** field, enter *Example page* in the **Display Name** field, and click **Create**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/24UN1rLql8Z9wid1W4b5C_a35967d-image.png)

Configure a [property](docId\:jdTC5_kRcYYdkpBfKOiLg) for your content type. Properties store and present data, such as page types and block types, and they are fields where CMS (SaaS) editors enter information into a page type. See [Properties](docId\:jdTC5_kRcYYdkpBfKOiLg).

1. Click **Add property** and select **Text** from the drop-down list.
2. Enter *Heading* in the **Name** field.
3. Select `String (<= 255)` from the **Text Type** drop-down list.
4. Select **Content** from the **Property Group** drop-down list.
5. Click **Save**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/KoFNpLx5CmSyh1D0raHgc_47d285f8791906751b057c5c434a0935a4e2703ee1023624e76e77d39a76d703-image.png)

See [content types](docId\:IIrc48HRxDZe6C7wiVBVT).

## Create a page

To create a content item of the page type that you just created:

1. On the **Edit** page, open the content tree in the **Navigation** panel. Click **Pin** to keep it open.
2. On the **Root** node, select **More** > **New Page**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/LeJPXTjOvfclqK22Tcd6__73efeccb0545af38b8f3a1b6ea680f0aabab24243bf930d4044b848c7da39175-image.png)

3. Enter *Hello, everyone!* in a **Heading** field.
4. Click **Publish?** > **Publish**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/J5cjSlLkCrPeQZOsy6-j5_15e1252-image.png)

## Define a website and host

1. Go to  **Settings** > **Applications**.
2. Click **Create Website Application** and add a name.
3. Select **From Existing** under **Choose Start Page** and click on the **Hello World!** page you created as your start page.
4. Click **Create Website**.

:::hint{type="warning"}
**Important**
If you change the website's URL or host, you must run an Optimizely Graph Full Synchronization scheduled job. See [Scheduled jobs](docId\:hHDIY8nTS4r-VB6UpvgLv).
:::

## Run the Optimizely Graph synchronization job

Before you can access the content externally, sync the content to Optimizely Graph.

Go to  **Settings** > **Scheduled Jobs** and start the **Optimizely Graph Full Synchronization**.

## Retrieve content using Optimizely Graph

Go to **Optimizely Graph** in the top menu to retrieve your page using a GraphQL query.

Add the following query in the **GraphiQL** interface:

```text
query myQuery {
  examplePage {
    items {
      Heading
    }
  }
}
```

Click **Execute query** or press **Cmd** or **Ctrl** + **Enter**.

The result is similar to the following.

```text
{
  "data": {
    "examplePage": {
      "items": [
        {
          "Heading": "Hello, everyone!"
        }
      ]
    }
  },
  "extensions": {
    "correlationId": "8ac0127cda8c6be9",
    "cost": 21,
    "costSummary": [
      "examplePage(21) = limit(20) + fields(1)"
    ]
  }
}
```

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/TdTYl8d1Nqf7cwK47G-zb_b240360-image.png)

See [Retrieve content using Optimizely Graph](docId\:YS-PAZH-REC7uFgGRkyQi).

## Create a complete site

After you see the basic components in action, you can build your front end using CMS (SaaS).

For a demonstration that uses Vercel to host your front end, see [Create a demo site using CMS (SaaS) and Vercel](https://github.com/episerver/cms-saas-vercel-demo).