How to Model a Speakers Page
Creating dedicated pages for speakers is important when you want to share their credentials, biography, or links to social media. In this guide, we are going to cover how to build a custom type for a Speakers page.
Page structure

The speakers main details will be modelled in the static part of the custom type
- Title field set to H2
< PreviousNext >
- Rich Text field with different formatting options to write a full biography of the speakers
< PreviousNext >
- Image field with responsive views to manage our speaker's profile picture
< PreviousNext >
The social media links are going to be modeled with a Group field that consists of two fields:
- Key Text field for the label of the social media link
- Link field for its URL
< PreviousNext >
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": { "fullname": { "type": "StructuredText", "config": { "single": "heading2", "label": "Full Name", "placeholder": "Speaker's Full Name" } }, "bio": { "type": "StructuredText", "config": { "multi": "paragraph, strong, em, hyperlink, list-item, o-list-item", "allowTargetBlank": true, "label": "Speaker's bio", "placeholder": "Enter a short description of the author" } }, "profile_picture": { "type": "Image", "config": { "constraint": { "width": null, "height": null }, "thumbnails": [ { "name": "thumbnail", "width": 75, "height": 75 } ], "label": "Profile picture" } }, "social_media": { "type": "Group", "config": { "fields": { "name": { "type": "Text", "config": { "label": "Name", "placeholder": "Social media name" } }, "link": { "type": "Link", "config": { "allowTargetBlank": true, "label": "Link", "placeholder": "Link to the social media page" } } } } } }, "SEO & Social": { "uid": { "type": "UID", "config": { "label": "UID", "placeholder": "URL slug" } }, "meta_title": { "type": "Text", "config": { "label": "Meta title", "placeholder": "Meta title" } }, "meta_description": { "type": "Text", "config": { "label": "Meta description", "placeholder": "Meta description" } }, "body": { "type": "Slices", "fieldset": "Slice zone", "config": { "labels": {}, "choices": { "twitter_card": { "type": "Slice", "fieldset": "Twitter Card", "description": "Fields to customize Twitter Card (Summary Card with Large Image)", "icon": "credit_card", "display": "list", "non-repeat": { "twitter_title": { "type": "StructuredText", "config": { "single": "paragraph", "label": "Title", "placeholder": "Title for Twitter Card" } }, "twitter_description": { "type": "StructuredText", "config": { "single": "paragraph", "label": "Description", "placeholder": "Description for Twitter Card" } }, "twitter_image": { "type": "Image", "config": { "constraint": { "width": 1200, "height": 675 }, "thumbnails": [], "label": "Image" } } }, "repeat": {} }, "open_graph": { "type": "Slice", "fieldset": "Open Graph", "description": "Fields to customize Open Graph", "icon": "thumb_up", "display": "list", "non-repeat": { "og_title": { "type": "StructuredText", "config": { "single": "paragraph", "label": "Title", "placeholder": "Title for Open Graph" } }, "og_description": { "type": "StructuredText", "config": { "single": "paragraph", "label": "Description", "placeholder": "Description for Open Graph" } }, "og_image": { "type": "Image", "config": { "constraint": { "width": 1200, "height": 628 }, "thumbnails": [], "label": "Image" } } }, "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