How to Model a Blog Homepage

In this example, we are modelling a simple homepage for a blog. This homepage is composed of a hero banner with an image background, a title, a subtitle/description, and a CTA button.

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

Page structure

Static Fields

Dynamic Zone

Our homepage hero banner is composed of :

Image field
Title field
Rich Text field for the description
Key Text field for the CTA label
Link field for the CTA button

1 of 2

< PreviousNext >

The featured post section will be a Slice composed of :

In the non-repeatable zone

Title field

In the repeatable zone

Content Relationship with our blog post Custom Type
Key Text field for the CTA below the post

2 of 2

< PreviousNext >

How to set it up in Prismic

Create a new singleton Custom Type
Copy the JSON below and paste it under the "JSON Editor" of this new Custom Type

CopyExpand/Collapse

{
  "Main": {
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1",
        "label": "title",
        "placeholder": "Home page title"
      }
    },
    "subtitle": {
      "type": "StructuredText",
      "config": {
        "single": "paragraph, heading2, strong, em, hyperlink",
        "allowTargetBlank": true,
        "label": "Subtitle",
        "placeholder": "Homepage subtitle/description"
      }
    },
    "hero_image": {
      "type": "Image",
      "config": {
        "constraint": {
          "width": null,
          "height": null
        },
        "thumbnails": [
          {
            "name": "large",
            "width": 1600,
            "height": 850
          },
          {
            "name": "medium",
            "width": 1200,
            "height": 638
          },
          {
            "name": "small",
            "width": 800,
            "height": 425
          }
        ],
        "label": "Hero image"
      }
    },
    "cta_text": {
      "type": "Text",
      "config": {
        "label": "CTA text"
      }
    },
    "cta_link": {
      "type": "Link",
      "config": {
        "label": "CTA Link"
      }
    },
    "body": {
      "type": "Slices",
      "fieldset": "Slice zone",
      "config": {
        "labels": {
          "featured_posts": []
        },
        "choices": {
          "featured_posts": {
            "type": "Slice",
            "fieldset": "Featured posts",
            "description": "A concise selection of featured blogposts",
            "icon": "grade",
            "display": "list",
            "non-repeat": {
              "title1": {
                "type": "StructuredText",
                "config": {
                  "single": "heading2, heading3, heading4, heading5, heading6",
                  "label": "title",
                  "placeholder": "Section title"
                }
              }
            },
            "repeat": {
              "featured_blogpost": {
                "type": "Link",
                "config": {
                  "select": "document",
                  "customtypes": [
                    "blog_post"
                  ],
                  "label": "Featured blogpost",
                  "placeholder": "Select a blogpost that you want to get featured"
                }
              },
              "cta_text1": {
                "type": "Text",
                "config": {
                  "label": "CTA_text",
                  "placeholder": "Insert the text of the CTA for the featured post"
                }
              }
            }
          }
        }
      }
    }
  }
}See More

How to Model a Blog Homepage

Page structure

How to set it up in Prismic

What editors will see

Read next

Table of Contents