Turn your design into Slices

Creating a Page Type & Simple Fields


[00:00] Now that you've broken Mr McD's website into sections, I'll show you how to use Prismic's development tool for creating content models Slice Machine.

[00:07] Below this video, you have an example of how this tool looks with some dummy data. You can play and change the page type to see how this would affect what data an author like Mr. McDonald could enter in this dummy Prismic repository.

[00:18] Adding and removing new fields will result in a different UI for the content authors, so you can begin to see how you're responsible for creating the editing experience of Mr McDonald.

[00:28] Added for you by default in the page types is the non-visual content like the URL represented here by the UID.

[00:34] Simple fields such as this can be added directly to your website code using the API IDs that represent them. I call it a simple field because it is output simply as a string.

[00:44] This non-visual content is added in the Static Zone. The Static Zone is for content that only appears once in a page, usually at the top level. This also includes default fields for SEO titles, descriptions, and images, which you can see in this new tab here.

[00:58] Connecting and disconnecting different Slices in the page type will affect what website sections Mr McDonald has available when building a page.

[01:06] Editing the model of a Slice is done in a different window, as slices can be used across multiple page types. You can learn more about this in the next video.

Main takeaways

  • Non-visual content goes in the Static Zone.
  • Slices are connected to the page type in the Slice Zone.
  • Simple field content can be added directly to your website code using their API IDs.

Practice Activity

Test adding new fields in this dummy Slice Machine editor and see how it affects the Page Builder screen.

Add a Key Text field with the Field Name of SEO Title field ID of seo_title to the page type.

Slice Machine
/ Homepage
Static Zone
  • Save
Revolutionizing farming solutions.

Answer to continue

Quiz banner

What do you use field API IDs for?