How to create 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.

This content would be structured as illustrated below:

Static Fields
Dynamic Zone

Our homepage hero banner is composed of an Image field, a Title field, a Rich Text field for the description and a Key Text field + a Link field for the CTA button.

1 of 2
< PreviousNext >

The featured post section will be a Slice composed of a non-repeatable Title field and a repeatable Content Relationship with our Blogpost Custom Type + Key Text field for the CTA below the post.

2 of 2
< PreviousNext >

The content model

Let's break this Custom Type into two sections: the static fields and the dynamic zone.

Static fields

In the static fields we are going to manage our hero section with the following fields:

One Title field for the homepage title

The Title field in Prismic is used to manage titles. The styling options can be limited to a certain type of HTML titles (h1, h2, h3, h4, h5, h6). In our case we'll limit it to only h1 styling option, because we want it to be the the main title of our homepage.

One Rich Text field for the homepage subtitle/description

The Rich Text field is a configurable text field with formatting options. This field provides content writers with a WYSIWYG editor where they can define the text as a heading or a paragraph, make text bold, add links, and more. It can also be restricted to a set of formatting options.

This is the perfect field to manage the rich content of the subtitle/description. Here, we will limit the formatting options to h2 titles, paragraphs, bold, italic, and links.

One Key Text field for the CTA button text

The Key Text is a simple text field without any formatting options. It can be seen as a simple text string. In this case, we'll use it to manage the text in our CTA button.

One Link field for the CTA button link

The Link field can be used to add a link to an external webpage, a link to another document in Prismic, or a link to an asset hosted in Prismic — like a PDF.

Dynamic zone

Our Slice Zone (dynamic zone) will contain one slice to manage our featured posts. Because we're modeling it as a slice, it will be easy for writers and editors to duplicates this section. We could imagine having multiple featured posts sections on our blog homepage. For instance: one section for the best posts of the year, another for the best posts of the week, etc.

The non-repeatable zone of this slice will be composed of the following field:

One Title field to manage the section title

The repeatable zone will be composed of the following fields:

One Content Relationship to our blog post Custom Type

A Content Relationship is an internal link to existing documents in Prismic. In this case, we'll create a link with our existing blog post documents. This way, your editors will be able to pick and link one or multiple blog posts to feature on the homepage.

Through this Content Relationship, we'll be able to retrieve in the API the content from the linked document (blog post) to display it in the homepage.

One Key Text field to manage the text of the link below the post

Here, editors can editor text for a link below the post.

How to set it up in Prismic

  • Set up a new singleton (non-repeatable) Custom Type.
  • Drag and drop the fields described above in the Static Zone.
  • Create a new slice for the featured posts.
  • Drag and drop the fields described above in the slice.

Alternatively, you can recreate this Custom Type quickly by copy and pasting the following JSON into the JSON editor, in the top-right corner of your Custom Type, as shown in the GIF below:

JSON Structure

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