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
< 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.
< PreviousNext >
Add a CTA:
- Key Text field for the button label
- Content relationship field to link to the relevant page
< PreviousNext >
- Image field, crop & resize and define responsive views
< PreviousNext >
This first Slice will consist of two fields :
- Title field for the heading
- Rich Text field for the paragraph
< PreviousNext >
This second Slice will consist of :
- Title field for the heading
- Rich Text field for the paragraph
- Image field
< 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
Copy
{ "Main": { "uid": { "type": "UID", "config": { "label": "UID", "placeholder": "" } }, "page_title": { "type": "StructuredText", "config": { "single": "heading1", "label": "Page Title", "placeholder": "Enter page title..." } }, "body": { "type": "Slices", "fieldset": "Slice zone", "config": { "labels": { "cta_feature": [ ], "centered_text": [ ] }, "choices": { "cta_feature": { "type": "Slice", "fieldset": "Hero Banner", "description": "Feature Section with a CTA Button", "icon": "star", "non-repeat": { "heading": { "type": "StructuredText", "config": { "single": "heading1, heading2, heading3, heading4, heading5, heading6", "label": "Heading", "placeholder": "Section Heading..." } }, "text": { "type": "StructuredText", "config": { "multi": "paragraph, preformatted, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, list-item, o-list-item", "allowTargetBlank": true, "label": "Text", "placeholder": "Enter text..." } }, "cta_link": { "type": "Link", "config": { "label": "CTA Link" } }, "cta_text": { "type": "StructuredText", "config": { "single": "paragraph", "label": "CTA Text", "placeholder": "CTA Text..." } }, "featured_image": { "type": "Image", "config": { "constraint": { }, "thumbnails": [ ], "label": "Featured Image" } } }, "repeat": { }, "display": "list" }, "centered_text": { "type": "Slice", "fieldset": "Text component", "description": "A text section with a header and paragraph", "icon": "text_fields", "non-repeat": { "heading": { "type": "StructuredText", "config": { "single": "heading1, heading2, heading3, heading4, heading5, heading6", "label": "Heading", "placeholder": "Section Heading..." } }, "text": { "type": "StructuredText", "config": { "multi": "paragraph, preformatted, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, list-item, o-list-item", "allowTargetBlank": true, "label": "Text", "placeholder": "Enter text..." } } }, "repeat": { }, "display": "list" }, "feature": { "type": "Slice", "fieldset": "Feature", "description": "Feature Section with an image and text", "icon": "art_track", "non-repeat": { "heading": { "type": "StructuredText", "config": { "single": "heading1, heading2, heading3, heading4, heading5, heading6", "label": "Heading", "placeholder": "Section Heading..." } }, "text": { "type": "StructuredText", "config": { "multi": "paragraph, preformatted, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, list-item, o-list-item", "allowTargetBlank": true, "label": "Text", "placeholder": "Enter text..." } }, "featured_image": { "type": "Image", "config": { "constraint": { }, "thumbnails": [ ], "label": "Featured Image" } }, "image_position": { "type": "Select", "config": { "options": [ "Left", "Right" ], "label": "Image position", "placeholder": "Choose image postion" } } }, "repeat": { } } } } } } }
See More
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