“Content Modeling” is the Headless CMS side of KIBO CMS — one of its three pillars, alongside Website Builder and File Manager. Content Modeling lets us define our own structured content types from scratch, organize them into Groups, and create individual “Entries” from them that exist independently of any single page.A common use case is a reusable component like a promotional banner: instead of hardcoding a new banner every time, we define a model once — the fields it needs, like a title, subtitle, and call-to-action — and then anyone can create new banner entries from that model without touching any code. In this video, we’ll create a content model group, build a content model, and then create and publish a content entry from it.Important Note: a “Content Model” and its “Entries” live entirely within Content Modeling — getting that published content in front of shoppers is a separate, developer-handled step, typically done by querying KIBO CMS’s GraphQL API directly. “Content Modeling” is the Headless CMS side of KIBO CMS — one of its three pillars, alongside Website Builder and File Manager. Content Modeling lets us define our own structured content types from scratch, organize them into Groups, and create individual “Entries” from them that exist independently of any single page. A common use case is a reusable component like a promotional banner: instead of hardcoding a new banner every time, we define a model once — the fields it needs, like a title, subtitle, and call-to-action — and then anyone can create new banner entries from that model without touching any code. In this video, we’ll create a content model group, build a content model, and then create and publish a content entry from it. Important Note: a “Content Model” and its “Entries” live entirely within Content Modeling modeling. — getting that published content in front of shoppers is a separate, developer-handled step, typically done by querying KIBO CMS’s GraphQL API directly. To navigate to the KIBO CMS, in the Admin UI, on the “MAIN” tab, we’ll click “Content”, then click “Page Builder”. To navigate to the KIBO CMS, in the Admin UI, on the “MAIN” tab, we’ll click “Content”, then click “Page Builder”. This will open the KIBO CMS Admin page.We discussed this page in-depth in a previous video. This will open the KIBO CMS Admin page. We discussed this page in-depth in a previous video. In this video, we’ll discuss the “Content Modeling” and “Content” sections of KIBO CMS.First, we’ll click on “Groups”, located under “Models” in the “Content Modeling” section of the left menu. In this video, we’ll discuss the “Content Modeling” and “Content” sections of KIBO CMS. First, we’ll click on “Groups”, located under “Models” in the “Content Modeling” section of the left menu. Content Model “Groups” help in organizing content models. With Groups, we can organize models efficiently. For example, all the content models related to eCommerce can be grouped together, and shown in the side navigation bar under the “eCommerce” heading.There are two main uses of the content model group:Organization of content models; andRestricting the content models access scope based on the content model group. Content Model “Groups” help in organizing content models. With Groups, we can organize models efficiently. For example, all the content models related to eCommerce can be grouped together, and shown in the side navigation bar under the “eCommerce” heading. There are two main uses of the content model group: Organization of content models; and Restricting the content models access scope based on the content model group. To create a new Content Model Group, we’ll click either of the “New” buttons shown here. To create a new Content Model Group, we’ll click either of the “New” buttons shown here. This will open a “New content model group” form. All required fields are marked with a “red star”. We’ll discuss each section. This will open a “New content model group” form. All required fields are marked with a “red star”. We’ll discuss each section. First, we’ll give the new group a “Name”. When we’ve populated the name field, the system will generate the “Slug” field for us, although we can edit it as needed. First, we’ll give the new group a “Name”. When we’ve populated the name field, the system will generate the “Slug” field for us, although we can edit it as needed. Next, we’ll select an “Icon” for the new group. Clicking on the dropdown, we can search for a specific icon, or scroll through the icons listed, and click on it to select it. Next, we’ll select an “Icon” for the new group. Clicking on the dropdown, we can search for a specific icon, or scroll through the icons listed, and click on it to select it. We can enter an optional “Description” to further outline the models that might belong in this group. We can enter an optional “Description” to further outline the models that might belong in this group. When we’ve configured all necessary fields, we’ll click “Save” to create it. When we’ve configured all necessary fields, we’ll click “Save” to create it. A confirmation message lets us know the content model group saved successfully, and “eCommerce” now appears as its own heading in the left navigation, alongside “Ungrouped”, ready to hold our models. A confirmation message lets us know the content model group saved successfully, and “eCommerce” now appears as its own heading in the left navigation, alongside “Ungrouped”, ready to hold our models. Next, we’ll discuss creating and managing Content Models in KIBO CMS. In the left menu, above “Groups” in the “Content Modeling” section, we’ll click “Models”. Next, we’ll discuss creating and managing Content Models in KIBO CMS. In the left menu, above “Groups” in the “Content Modeling” section, we’ll click “Models”. A “Content Model” is a blueprint or schema that defines the structure of our content. Think of it as a template that specifies what fields the content will have and what type of data each field can contain.This is the “Content Models” list, where every Content Model that has been created will be displayed. A “Content Model” is a blueprint or schema that defines the structure of our content. Think of it as a template that specifies what fields the content will have and what type of data each field can contain. This is the “Content Models” list, where every Content Model that has been created will be displayed. To create a new Content Model, we’ll click the “New” button on the top right. To create a new Content Model, we’ll click the “New” button on the top right. This will display a “New Content Model” modal window. We’ll discuss each section. This will display a “New Content Model” modal window. We’ll discuss each section. First, we’ll give our new Content Model a “Name”. In our example, we’ll build a model based on a small banner, so we’ll give it the name “Small Banner”. As we can see by the example, the naming should comply with the singular form constraint, meaning we wouldn’t use the plural form of “Small Banners”.Next, we’ll give it a “Singular API Name” based on the “Name” we just configured.We could then enable the “Single entry model” control, which means we are creating a model that can hold only one entry. But be aware, this cannot be changed later.If we are not creating a single entry model, we’ll give it a “Plural API Name”, which is where we will use the plural “SmallBanners”. First, we’ll give our new Content Model a “Name”. In our example, we’ll build a model based on a small banner, so we’ll give it the name “Small Banner”. As we can see by the example, the naming should comply with the singular form constraint, meaning we wouldn’t use the plural form of “Small Banners”. Next, we’ll give it a “Singular API Name” based on the “Name” we just configured. We could then enable the “Single entry model” control, which means we are creating a model that can hold only one entry. But be aware, this cannot be changed later. If we are not creating a single entry model, we’ll give it a “Plural API Name”, which is where we will use the plural “SmallBanners”. Under “Content model group”, we’ll select the group we want our new content model to belong to. In this example, we’ll select the “eCommerce” group we just created. Under “Content model group”, we’ll select the group we want our new content model to belong to. In this example, we’ll select the “eCommerce” group we just created. Similar to “Groups”, we can select a model “Icon” by clicking the dropdown and either searching or scrolling. Then we’ll click it to select. Similar to “Groups”, we can select a model “Icon” by clicking the dropdown and either searching or scrolling. Then we’ll click it to select. Also similar to “Groups”, we can enter an optional “Description” to add additional information about this model. Also similar to “Groups”, we can enter an optional “Description” to add additional information about this model. Before creating the model, we can choose to “Create model with default fields”, on by default, which would give us a starter set of common fields — a “Title”, “Description”, and “Image” — automatically.In our example, we’ll disable this and add our own fields later on. Before creating the model, we can choose to “Create model with default fields”, on by default, which would give us a starter set of common fields — a “Title”, “Description”, and “Image” — automatically. In our example, we’ll disable this and add our own fields later on. When we have configured all fields as necessary, we’ll click “Create Model”. When we have configured all fields as necessary, we’ll click “Create Model”. With the new model created, we land on its “Fields” editor, and are prompted to add our first field.Important Note: “Fields” aren’t limited to simple “Text”. As seen here, the available field types include “Text”, “Long Text”, “Rich Text”, “Number”, “Boolean”, “Date/Time”, “Reference”, “Object”, “Dynamic Zone”, and “Files”. A “Reference” field, for example, lets one content entry point to another, which is how more complex, connected content structures get built.There are also “Layout” objects that can be added below the “Fields” list, such as a “Separator”, “Alerts”, and “Tabs”. With the new model created, we land on its “Fields” editor, and are prompted to add our first field. Important Note: “Fields” aren’t limited to simple “Text”. As seen here, the available field types include “Text”, “Long Text”, “Rich Text”, “Number”, “Boolean”, “Date/Time”, “Reference”, “Object”, “Dynamic Zone”, and “Files”. A “Reference” field, for example, lets one content entry point to another, which is how more complex, connected content structures get built. There are also “Layout” objects that can be added below the “Fields” list, such as a “Separator”, “Alerts”, and “Tabs”. To get started, click on a “Field” type or “Layout” object, then drag it to the “Drop your first field here” section on the right. To get started, click on a “Field” type or “Layout” object, then drag it to the “Drop your first field here” section on the right. In our example, we’ll select a “Text” field and drop it in this box here. In our example, we’ll select a “Text” field and drop it in this box here. This will open a “Field Settings” panel on the right, where we’ll configure the field we just added. There are multiple tabs across the top of the panel, and fields that can be configured for each tab. We’ll discuss each section. This will open a “Field Settings” panel on the right, where we’ll configure the field we just added. There are multiple tabs across the top of the panel, and fields that can be configured for each tab. We’ll discuss each section. We’ll start on the “General” tab. First, we’ll set the “Label” to “Banner Title”, as this first text field will be the Title of our “Small Banner”.Important Note: the “Field ID” generates automatically from the label — in this case, “bannerTitle” — and it’s what the field will be called programmatically. We can edit this as needed. We’ll start on the “General” tab. First, we’ll set the “Label” to “Banner Title”, as this first text field will be the Title of our “Small Banner”. Important Note: the “Field ID” generates automatically from the label — in this case, “bannerTitle” — and it’s what the field will be called programmatically. We can edit this as needed. The “Text” field allows us to enable “Use as a list of texts”, as well as setting “predefined values”. It also supports optional “Description”, “Note”, and “Help” text — shown below the label, below the input, and in a tooltip, respectively — to give content editors more context when they’re filling out an entry. Lastly, we can apply “Tags” for developers, and configure “Placeholder Text”. The “Text” field allows us to enable “Use as a list of texts”, as well as setting “predefined values”. It also supports optional “Description”, “Note”, and “Help” text — shown below the label, below the input, and in a tooltip, respectively — to give content editors more context when they’re filling out an entry. Lastly, we can apply “Tags” for developers, and configure “Placeholder Text”. If “Predefined values” was enabled on the “General” tab, that will allow us to add those values here. Otherwise, this tab will be disabled. If “Predefined values” was enabled on the “General” tab, that will allow us to add those values here. Otherwise, this tab will be disabled. On the “Validations” tab, each field supports its own rules — “Required”, “Min Length”, “Max Length”, “Pattern”, and “Unique”. If a Validation is enabled, it will display all relevant information for that control, and we can edit it as needed. On the “Validations” tab, each field supports its own rules — “Required”, “Min Length”, “Max Length”, “Pattern”, and “Unique”. If a Validation is enabled, it will display all relevant information for that control, and we can edit it as needed. The “Appearance” tab controls how the field renders — in this example, either as a standard “Text Input” or a “Hidden Field”. The “Appearance” tab controls how the field renders — in this example, either as a standard “Text Input” or a “Hidden Field”. The “Rules” tab lets us define conditional behavior for the field — for example, showing or hiding it based on the value of another field. The “Rules” tab lets us define conditional behavior for the field — for example, showing or hiding it based on the value of another field. When we have configured all entries on all tabs as needed, we’ll click “Save Field” on the bottom right. When we have configured all entries on all tabs as needed, we’ll click “Save Field” on the bottom right. We’ll repeat this same add-field, label-it, validate-it pattern for the remaining fields our banner model needs. We’ll repeat this same add-field, label-it, validate-it pattern for the remaining fields our banner model needs. At the top of the “Fields” configurator section, we can click the “Preview” tab, which shows how these four fields will appear when someone goes to fill out an entry, including placeholder text like “Shop Now”. At the top of the “Fields” configurator section, we can click the “Preview” tab, which shows how these four fields will appear when someone goes to fill out an entry, including placeholder text like “Shop Now”. When we’ve added and configured all of the Fields and Layout objects needed, we’ll click the “Save” button on the top right. When we’ve added and configured all of the Fields and Layout objects needed, we’ll click the “Save” button on the top right. Then we’ll click the “back” button on the top left to exit the Fields configurator for our “Small Banner”. Then we’ll click the “back” button on the top left to exit the Fields configurator for our “Small Banner”. Back in the “Content Models” list, “Small Banner” now appears, showing when it was last modified.Right above the “Small Banner” entry is a search bar to search the Content Models list for a specific model. There are also controls on the right next to the “New” button to refresh and re-sort this list. Back in the “Content Models” list, “Small Banner” now appears, showing when it was last modified. Right above the “Small Banner” entry is a search bar to search the Content Models list for a specific model. There are also controls on the right next to the “New” button to refresh and re-sort this list. From the model’s “Ellipses” menu, we can “Clone” or “Export” the model, or “Delete” it if it’s no longer needed. From the model’s “Ellipses” menu, we can “Clone” or “Export” the model, or “Delete” it if it’s no longer needed. Clicking “Clone” opens a modal window where we could quickly start a new model with “Small Banner“‘s same field structure, without rebuilding it from scratch. Clicking “Clone” opens a modal window where we could quickly start a new model with “Small Banner“‘s same field structure, without rebuilding it from scratch. Before moving on, we’ll note that in the left navigation under “Content”, we can see “Small Banner” now listed under our “eCommerce” group — this is where entries built from this model will live once we create them. Before moving on, we’ll note that in the left navigation under “Content”, we can see “Small Banner” now listed under our “eCommerce” group — this is where entries built from this model will live once we create them. Next, we’re going to create a “Content Entry” based on the “Small Banner” content model. Content Entries can be helpful when we need to reuse the same content across multiple pages, need to have business users create and manage the content, or if the content needs to be consumed outside a storefront, such as in a mobile app or email campaign. To create a new Content Entry, we’ll click our “Small Banner” model in the left nav menu. Next, we’re going to create a “Content Entry” based on the “Small Banner” content model. Content Entries can be helpful when we need to reuse the same content across multiple pages, need to have business users create and manage the content, or if the content needs to be consumed outside a storefront, such as in a mobile app or email campaign. To create a new Content Entry, we’ll click our “Small Banner” model in the left nav menu. This is our “Small Banners” listing page. Any Content Entries that have been created based off the Small Banner model will be listed here. We can also create folders on the left to keep individual entries organized. This is our “Small Banners” listing page. Any Content Entries that have been created based off the Small Banner model will be listed here. We can also create folders on the left to keep individual entries organized. To create a new Small Banner Content Entry, click either of the “New Small Banner” buttons on this page. To create a new Small Banner Content Entry, click either of the “New Small Banner” buttons on this page. This will open a blank entry form with the four fields we defined in the Content Model. This will open a blank entry form with the four fields we defined in the Content Model. We’ll configure these four fields as needed for our content entry. In this example, we’re making a “Hiking Banner”. We’ll configure these four fields as needed for our content entry. In this example, we’re making a “Hiking Banner”. When we have configured all fields as needed, we’ll click “Save & Publish” to save the banner content and make it live.Important Note: depending on how an organization has configured content publishing on user roles, some users may not be able to publish here, and may instead see a ‘Request Review’ button in its place. We’ll discuss user roles and publishing workflows in more detail in a subsequent video. When we have configured all fields as needed, we’ll click “Save & Publish” to save the banner content and make it live. Important Note: depending on how an organization has configured content publishing on user roles, some users may not be able to publish here, and may instead see a ‘Request Review’ button in its place. We’ll discuss user roles and publishing workflows in more detail in a subsequent video. After clicking “Save & Publish”, a confirmation modal will appear to verify publishing of the Content Entry. Within this modal, users can add an optional “Revision Description” to note any changes that may have occurred.When configured as needed, click “Yes, publish!” to confirm and finalize the publication of the banner. After clicking “Save & Publish”, a confirmation modal will appear to verify publishing of the Content Entry. Within this modal, users can add an optional “Revision Description” to note any changes that may have occurred. When configured as needed, click “Yes, publish!” to confirm and finalize the publication of the banner. After publishing the “Hiking Banner”, we’ll click the “back” button on the top left to go back to the Small Banners listing page. After publishing the “Hiking Banner”, we’ll click the “back” button on the top left to go back to the Small Banners listing page. Our new “Hiking Banner” Content Entry is listed here. Similar to the earlier Content Model listing page, clicking the “Ellipses” on the Content Entry allows us to “Edit”, “Unpublish”, “Move”, “Schedule unpublish”, or “Delete” the Content Entry. Our new “Hiking Banner” Content Entry is listed here. Similar to the earlier Content Model listing page, clicking the “Ellipses” on the Content Entry allows us to “Edit”, “Unpublish”, “Move”, “Schedule unpublish”, or “Delete” the Content Entry. Important Note: with “Hiking Banner” published, a developer’s Next.js application can query the Headless CMS “Read API” directly, at build time or request time, to bring this content into the storefront — a homepage section, a product page banner, or wherever it’s needed. This “GraphQL Playground” is where a developer would test that query. Important Note: with “Hiking Banner” published, a developer’s Next.js application can query the Headless CMS “Read API” directly, at build time or request time, to bring this content into the storefront — a homepage section, a product page banner, or wherever it’s needed. This “GraphQL Playground” is where a developer would test that query.