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
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.) Attend one of her upcoming live Crash Course