How to Model a Blog Homepage

In this example, we are modelling a simple homepage for a blog. This homepage is composed of a hero banner with an image background, a title, a subtitle/description, and a CTA button.

The static zone of a document is the top part of a page and the dynamic zone will provide flexibility with Slices.

Page structure

Static Fields
Dynamic Zone

Our homepage hero banner is composed of :

  • Image field
  • Title field
  • Rich Text field for the description
  • Key Text field for the CTA label
  • Link field for the CTA button
1 of 2
< PreviousNext >

The featured post section will be a Slice composed of :

In the non-repeatable zone

  • Title field

In the repeatable zone

  • Content Relationship with our blog post Custom Type
  • Key Text field for the CTA below the post
2 of 2
< PreviousNext >

How to set it up in Prismic

  • Create a new singleton 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