How to create a grid of influencers

In this page you'll learn how to model a Custom Type to create pages dedicated to your Instagrammers and influencers.

The use-case: You're an eCommerce or corporate website who wants to give exposure to online influencers (commonly seen on fashion and cosmetics eCommerce platforms). Giving exposure to influencers has proved to be a great way to reach your target audience with content being produced by external sources -- often considered as content to which potential clients can relate to.

Start with your page design

Follow this schema to build an example page for a grid of influencers of your brand. You'll begin by creating a Custom Type in the Prismic type builder and personalize the template as explained below.

Static Fields
Dynamic Zone

This will be the static part of your page which means it will stay as a header. Drag and drop:

  • One Title field. You may restrict the header to H2.
  • One Rich Text field. You'll have many formatting options that you can restrict or allow.
1 of 3
< PreviousNext >

In this first Slice you will showcase a title and some media content.

In the non-repeatable zone:

  • One Title field for the grid main title

In the repeatable zone:

  • One Embed field to add posts of your brand influencer featuring your products
  • One Key Text field to add the name of their account
  • One Content Relationship field to link to your featured product pages. This field will allow you to redirect to other Prismic content pages.
2 of 3
< PreviousNext >

This second Slice will be made up of your brand logo, a short message and a CTA to your brand's social media account.

In the non-repeatable section:

  • One Image field for your brand logo.
  • One Title field for the short message.
  • One Key Text field for your brand account name.
  • One Link field to link to your brand social media account.
3 of 3
< PreviousNext >

The content model

In this example, we are using both the static and dynamic sections of the Custom Type. The static section will cover the header section of the page, which will not move in the page layout. The dynamic section will offer flexibility to arrange your Slices for the grid section and your brand social media section. In total, you'll have one Custom Type with a static section and two Slices.

Static zone

  • One Title field. The styling options can be limited to a certain type of HTML titles (h1, h2, h3, h4, h5, h6). In our case we'll limit it to only h2 styling option.
  • One Rich Text field. This field provides content writers with a WYSIWYG editor where they can define the text as a heading or a paragraph, make text bold, add links, and more. It can also be restricted to a set of formatting options.

Dynamic zone

The dynamic section of this page includes all the Slices. Your content editors can add, remove, and re-order those slices to assemble the dynamic section of this page. In our grid page, we will have two Slices.

  1. A first Slice for the grid of influencers

This block will be modeled as a dedicated Slice in the same Custom Type. It will give your content editors flexibility to move this grid if needed and also edit the influencers blocks (change images, add new influencers etc.). Your Slice will be composed of two parts: a non-repeatable zone and a repeatable zone.

In the non-repeatable zone:

  • One Title field for the grid main title. The styling options can be limited to a certain type of HTML titles (h1, h2, h3, h4, h5, h6). In our case we'll limit it to only h2 styling option.

In the repeatable zone:

  • One Embed field so that you can paste a URL of a post on social media or even of a video hosted on YouTube, for example.
  • One Key Text field to manage the name of your influencer account name.
  • One Content Relationship field which you can use to link to your featured product pages as an example. This field will allow you to redirect to other Prismic content pages as well.

2. A second Slice for your Brand's social media details

In this Slice, we kept all the fields in the non-repeatable zone since none of the elements will need to be repeated. Why a Slice then? Because we'd like to allow content editors to reorder the position of your page sections with ease.

In the non-repeatable zone:

  • One Image field for your brand logo. You may set the size of your image and even set different views.
  • One Title field for the short message which can be "Follow us" for example.
  • One Key Text field for your brand account name on the social media (for example @prismicio).
  • One Link field to link to your brand social media account.

Check out the complete field documentation to learn more about the capability and flexibility of each field type available in the Custom Type builder.

How to set it up in Prismic

  • Set up a new Single type Custom Type in Prismic
  • Drag and drop the fields described above in the static zone and create two Slices

Check our video tutorials to get the most out of our features for your project. The videos cover how to use Slices, preview your page, schedule content for later, and many other topics.

JSON structure

If you want to try this grid of influencers in Prismic exactly like we described it here, just copy and paste the following JSON in the JSON editor in the top-right corner of your Custom Type as shown in the GIF below.

Copy and paste this in your JSON editor!

CopyExpand/Collapse

What editors will see

This is what your editors will see when they create new documents in the Writing Room. You can now start adding rich inspirational content to your pages!

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