How to Model a Homepage

In Prismic, a Custom Type is a template that you can personalize to create a page design. Once your Custom Type is configured, you'll be able to create your page by populating this Custom Type with the title, images and content of your choice.

For structuring the homepage Custom Type, you can start by following a design wireframe. You'll be able to define the sections and fields for your homepage. Once it's complete, the marketing team will be able to edit the page without developer help.

Developers are essential for the set up of a project with Prismic. They'll be in charge of Custom Type configuration.

Page structure

Follow this tutorial and add content to the different zones of the Custom Type to build this example homepage. The static zone of a document is the top part of a page and the dynamic zone will provide flexibility with Slices.

Static Fields
Dynamic Zone

The hero banner is the first field of the "static" part of the homepage. It will not move in the page layout. It will consist of:

  • a Title field into your static section, and choose what heading styles you would like to allow (h1, h2, etc.).
1 of 6
< PreviousNext >

Now, you can add a:

  • Rich Text field, and choose what formatting options you would like to allow (simple text, h1, h2, bold, links, images, etc.).
2 of 6
< PreviousNext >

To add a CTA, you can drag and drop:

  • Key Text field for the button label
  • Content Relationship field with a link to the relevant page
3 of 6
< PreviousNext >
  • Add an Image field and define your responsive views
4 of 6
< PreviousNext >

Next, we will create our first Slice in the dynamic zone. Create a new Slice which will contain:

  • Title field for the section heading
  • Rich Text field for the description
  • Image field for the illustration
5 of 6
< PreviousNext >

Finally, we will make a featured posts slice.

In the Non-repeatable zone

  • Title field for the section heading.

In the repeatable zone

To allow users to include multiple featured posts, add:

  • Title field for the item title
  • Image field
  • Key Text field for the CTA text
  • Content Relationship field for the linked document
6 of 6
< PreviousNext >

You can save your Slices in the Slice Library to reuse them on other pages of your website and on other projects.

The navigation elements will be handled in a separate custom type and will be rendered on all pages of your project, since they are permanent layout sections. Here's the Custom Type for navigation.

How to set it up in Prismic

  • Create a new singleton (non-repeatable) Custom Type
  • Copy the JSON below and paste it under the "JSON Editor" of this new Custom Type

What editors will see

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call