A clearer view for your Content Slices. Introducing the Grid View

Written by Renaud Bressand in Writing Room on February 15,2018

At Prismic, we have the chance to meet with marketing and editorial teams from companies like Deliveroo, Made or The Container Store every day. Thanks to these interactions, we are constantly learning how to build a better product that fits their needs, whether it is for a corporate website, an e-commerce platform marketing or for their campaigns.

Content editors often tell us about their desire to be more independent from their development teams in the content creation process. In order to achieve that, content editors need to define design systems for their landing pages, product pages, editorial pages, etc. Such design systems have content modules allowing editors to compose a wide variety of pages based on a same set of components. (For example Text, Quote, Image Gallery, Video, Call to Action, etc.).

Content Slices for marketing teams autonomy

Content Slices are a unique feature that allows developers to define content components to build design systems. This enables editorial teams to compose their pages thanks to a dynamic content structure. In most cases, marketing & development teams familiarize themselves with Prismic Content Slices and adopt them very quickly.

In a nutshell, by defining a set of components in the content structure and in the code, developers empower content editors to create an infinite amount of brand consistent pages without having to be locked in a rigid template structure.

Slices are becoming really popular throughout our community and are being used for a wide set of elements such as marketing arguments, feature presentations, quotes, testimonial with logo galleries, call to actions, image galleries, etc.

When looking at your Slices, we want them to look similar in the editor to the way they will appear on your pages. We already had a list view with images floating to the left of your other fields and now we're releasing the new Grid View.

Introducing the Grid View

The Grid View is a new way of visualizing the repeatable section in your Slice. It allows you to see your repeatable elements side by side.

For example, if you create a logo gallery Slice in your front-end, it's better for you to have a representation in prismic.io that looks similar to the one on your front-end. The Grid View will help you save space in the editor view, which makes it perfect for simple repeatable sections.

How to activate the Grid View

You can now activate the new Grid View in your custom type builder. To do this, you simply need to edit your Slice and change the display of your Slice by choosing the Grid View.

Once this is done, the repeatable section of your Slice will be set as a grid in the editor. Keep in mind that this will neither affect the API nor your rendering, it will only affect the way your repeatable section is displayed in the Writing Room.

We hope you love the new grid view, and as usual, we welcome your feedback and participation on our Slack channel to discuss the future of prismic.io.

Renaud Bressand

Renaud focuses on user experience and onboarding prismic.io users. He also helps out with support and even occasionally codes in scala. A real Swiss army knife! A retired footballer, he is passionate about good food.