How to create a content model for a typical landing page

Sample design

For the purpose of this article we're going to use this landing page mockup – it contains a lot of elements that normally appear on a landing page.

The content model: what's dynamic, what's static

Hero

This will consist of 3 Text fields for the Heading, Text, & CTA Button. It will also need a Link field for the CTA Button and an Image field.

1 of 3
< PreviousNext >

Headline + text

This will consist of 2 Text fields: one for the heading and the other for the text.

2 of 3
< PreviousNext >

Headline + text + image

This will consist of 2 Text fields: one for the heading and one for the text. We will also need an Image field.

3 of 3
< PreviousNext >

The content model

There are 3 major blocks on the page:

  1. Hero
  2. Headline + text
  3. Headline + text + image

Each of these 3 blocks will be set up as a dynamic section, so that they can be freely reused in other landing pages.

See the introduction to content modeling for more context on dynamic and static sections.

Why is it like that

Selected approach: independent components, everything dynamic. Thinking about future landing pages which can be composed of these blocks, it's clear that their order can vary from page to page, and some of these sections can appear multiple times. This means that each section is an independent component, so each should be modeled as a separate dynamic section. This way content managers will be able to construct new landing pages in the future, reusing these components as they see fit.

Alternative approach: everything static. The first instinct is to probably set up the model exactly replicating the design: a single rigid structure with 3 blocks. There's nothing wrong with that, of course – until you need to create another landing page with a slightly different structure (2 "headline+text" blocks instead of 1, for example).

Possible consequences of staticness. If this entire page would have been set up as a static section, then it would be necessary to create a new content model for each new landing page to come, which would be suboptimal to say the least.

The content model: the fields

Choosing the fields for each section is rather straightforward:

Hero section

  • Text field for the headline
  • Text field for the text paragraph
  • Text field for the CTA button text
  • Link field for the CTA button
  • Image field for the featured image

Headline + text section

  • Text field for the headline
  • Text field for the text

Headline + text + image section

  • Text field for the headline
  • Text field for the text paragraph
  • Image field for the featured image

How to set it up in Prismic

  • Set up a new custom type
  • For each of the 3 sections, create a separate slice
  • Add fields for each slice as defined above

If you want to try this model in Prismic, copy this JSON instead of setting up the model manually:

CopyExpand/Collapse

What editors will see

When an editor creates a document based on the custom type created above, they can add any of these slices and fill the placeholders with content.

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