How to create a typical landing page

Sample

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

Start with your landing page design

Navigate between the static and dynamic zones of the custom type to follow the steps that explain how to build this example landing page.

The static zone of a document is the top part of a page and the dynamic zone will provide flexibility with Slices.

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. Drag and drop a Title field for the heading to begin with.

1 of 6
< PreviousNext >

The second field of your static zone will be a Rich Text field. Drag and drop a 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:

  • First, drag and drop a Key Text field for the button label.
  • Add a Content relationship field to link to the relevant page.
3 of 6
< PreviousNext >

Drag and drop an Image field, crop & resize and define responsive views. We have also partnered with Imgix for image optimization.

4 of 6
< PreviousNext >

Headline + text

This first Slice will consist of two fields to be populated : a Title field for the heading and a Rich Text for the paragraph.

5 of 6
< PreviousNext >

Headline + text + image

This second Slice will consist of two fields: a Title field for the heading and a Rich Text for the paragraph, and we will also need an 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.

The content model

Selected approach: independent components, everything dynamic. Thinking about future landing pages which can be composed of these components, 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 three components. There's nothing wrong with that, of course – until you need to create another landing page with a slightly different structure (two "headline+text" blocks instead of one, for example).

Possible consequences of staticness. If this entire page had 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

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

Headline + text section

  • Title field for the headline
  • Rich Text field for the paragraph

Headline + text + image section

  • Title field for the headline
  • Rich Text field for the paragraph
  • Image field for the featured image

How to set it up in Prismic

  • Set up a new non-repeatable Custom Type - your Homepage being a page that will occur only once, you can set it up as a singleton.
  • Drag and drop the fields described above in the Static and Dynamic zones.

If you want to try this Landing page Custom Type in Prismic, copy and paste the following JSON in the JSON editor in the top-right corner of your Custom Type as showed in the GIF below.

JSON structure

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 Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call