Model Content
By the end of this page, your project will have page types with Slices that are synced to Prismic.
Content modeling is the process of designing the data structures for your content. Prismic makes this easy by providing useful data structures that you can configure as needed.
There are four main structures in Prismic's content models: Slices, fields, page types, and custom types.
A Slice is a section of the webpage — like a block of text, an image, or a banner.
Prismic stores each piece of information in a field. There are many field types, including rich text, number, link, and Heading.
A type is a model for a document in your repository. Types can take one of two different formats: "page" or "custom". A page type is a model for a page on your website. A custom type is a generic model for an element on your website, like a menu, a category, or a call to action.
👉 The most important part of a content model
When you configure a website builder, you create an application for your content managers. You’re designing an interface, which will affect how your content managers create, edit, and understand the content. The content model will determine the project’s success or failure.
Once a content model is in use, it’s hard to change, so we recommend starting your project with well-thought content models. Think about how your content managers and developers will use your custom types and Slices.
Here are some best practices for content modeling:
Start with content models. Think about the design and information architecture of your website, and use that information to create content models. Wait until you have good models, then start creating content.
Give fields logical names. Use the same language as your content managers, so it’s clear what content goes in each field.
Use Slices. Slices are the content of your website. By building your website with Slices, you give your content managers an easy and intuitive way to edit content.
Push your Slice screenshots. Slice Machine takes screenshots of your Slices. Make sure your screenshots get pushed to Prismic so that your content team can see what each Slice looks like.
Slice Machine is Prismic’s development tool for building content models. You should have installed Slice Machine in the setup step.
First, ensure your project is running in development mode. Then, run the Slice Machine command:
- npm
- Yarn
npm run slicemachineyarn slicemachineThe terminal will show you a link, which is http://localhost:9999 by default. Open the link in your browser.
Not using Slice Machine?
Slice Machine is currently compatible with Next.js and Nuxt. If you're not using Slice Machine, you can model content with the Legacy Builder.
In Slice Machine, click Create a page type. Choose Reusable or Single, then enter a name and ID.
Slice Machine will save the model of your page type as a JSON file in your customtypes folder after you click on Save to file system.
Page types have pre-configured metadata fields for SEO and a Slice Zone for the page content.
In the left-hand side menu, click Slices, then Create a Slice. Give your Slice a name and choose the library for it.
Slice Machine will create a folder for the Slice in your slices directory. The folder includes a component file where you can code your Slice component.
In Slice Machine, add fields to your Slice, then click Save to filesystem.
Slice Machine suggests code snippets to template each field in your component. Learn more about templating in the templating article.
To see what your Slice looks like, click Preview Slice. Slice Machine will simulate your Slice with mock data.
Click on the Page types tab, select your page type, and Add a new Slice. Select your Slice from the list and click Save. Then click Save to file system.
Custom types are generic models that you can use to create menus, taxonomies, and objects for your website.
To create a new custom type, click on the Custom Types tab in the left menu, then click Create. Custom types cannot have Slices, but they can have any other property.
When your changes are ready, go to the changes page and click the Push to Prismic button. Now, your content managers can use these models to create content:
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.