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
CopyExpand/Collapse

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