How to create a homepage

In Prismic, a Custom Type is a template that you can personalize to create a page design. Once your Custom Type is configured, you'll be able to create your page by populating this Custom Type with the title, images and content of your choice.

For structuring the homepage Custom Type, you can start by following a design wireframe. You'll be able to define the sections and fields for your homepage. Once it's complete, the marketing team will be able to edit the page without developer help.

Developers are essential for the set up of a project with Prismic. They'll be in charge of Custom Type configuration.

Start with your homepage design

Follow this tutorial and add content to the different zones of the Custom Type to build this example homepage.

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

The hero banner is the first field of the "static" part of the homepage. It will not move in the page layout.

Drag and drop a Title field into your static section, and choose what heading styles you would like to allow (h1, h2, etc.).

1 of 6
< PreviousNext >

Add a Rich Text field, and choose what formatting options you would like to allow (simple text, h1, h2, bold, links, images, etc.).

2 of 6
< PreviousNext >

To add a CTA, drag and drop a Key Text field for the button label. Then, add a Content Relationship field with a link to the relevant page.

3 of 6
< PreviousNext >

Drag and drop an Image field and define your responsive views. (Note: All images delivered through Prismic benefit from image optimization by Imgix.)

4 of 6
< PreviousNext >

Next, we will create our first Slice in the dynamic zone Create a new Slice, and then add a Title field for the section heading, a Rich Text field for the description, and an Image field.

5 of 6
< PreviousNext >

Finally, we will make a featured posts slice. In the non-repeatable section, add a Title field for the section heading. Then, we'll use the repeatable zone to allow users to include multiple featured posts. In the repeatable zone, add:

  • Title field for the item title
  • Image field
  • Key Text field for the CTA text
  • Content Relationship field for the linked document
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 navigation elements will be handled in a separate custom type and will be rendered on all pages of your project, since they are permanent layout sections. Here's the Custom Type for navigation.

The content model

In this example, we are using use both the static and dynamic sections of the Custom Type. The static section will cover the hero section of the page, which will not move in the page layout. The dynamic section will offer flexibility to arrange your Slices.

Static section

The static section of our homepage will contain the following elements:

One Title field for the hero banner title

The Title field in Prismic is meant to be used to manage titles. The formatting options can be constrained to predefined heading levels (h1, h2, h3, h4, h5, h6). In this case, we've limited the formatting options to "h1" because we don't want the content editors to be able to change the heading level.

One Rich Text field for the subtitle/short description

The Rich Text field is a configurable text field with formatting options. This field provides content writers with a WYSIWYG editor where they can define the text as a title or a paragraph, make it bold, add links, etc. It can also be restricted to a set of formatting options.

One CTA, combining a Key Text field and a Content Relationship field

We are using a Key Text field to manage the label of the button. Key Text is a simple text string without any formatting options. To finish, we add a Content Relationship field to link the CTA to the relevant document, which also lives in Prismic. The Content Relationship field can be restricted to link to pages based on specific custom types.

One Image field

We are using an Image field to manage the image in the hero banner of the homepage. This field allows content editors to upload images directly in Prismic. The image field provides options to create responsive versions of a single image, so that the image will appear at the right size on all devices.

Dynamic section

The dynamic section of the homepage includes all the Slices that you create. Your content editors can add, remove, and rearrange those slices to assemble the dynamic section of the page. For more information on the slices in this model, see the highlights on the wireframe above.

How to set it up in Prismic

  • Set up a new singleton (non-repeatable) Custom Type (since you only want to have one instance of your homepage)
  • Drag and drop the fields described above into the Static and Dynamic zones.

If you want to quickly set up this homepage Custom Type in Prismic, you can copy and paste the following JSON into the JSON editor in the top-right corner of the Custom Type editor, as seen in the GIF below.

JSON structure

CopyExpand/Collapse

What editors will see

When an editor creates a document based on this homepage Custom Type created above, the writing room will look like this:

Read next

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

Table of Contents