How to Model a Landing Page

We're going to use this landing page mock-up – it contains different elements that normally appear on a landing page.

Page structure

Static Fields
Dynamic Zone

This whole hero component will stay as static - it will not move across the page. It will consist of three fields.

  • Title field for the heading to begin with
1 of 6
< PreviousNext >

The second field of your static zone will be :

  • Rich Text field. You'll be able to allow or restrict formatting options if needed : simple text, H1, H2, bold, links, images etc.
2 of 6
< PreviousNext >

Add a CTA:

  • Key Text field for the button label
  • Content relationship field to link to the relevant page
3 of 6
< PreviousNext >
  • Image field, crop & resize and define responsive views
4 of 6
< PreviousNext >

This first Slice will consist of two fields :

  • Title field for the heading
  • Rich Text field for the paragraph
5 of 6
< PreviousNext >

This second Slice will consist of :

  • Title field for the heading
  • Rich Text field for the paragraph
  • Image field
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.

How to set it up in Prismic

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