An introduction to page builders
About this course
This course is designed to help you understand how to build a page builder in Sanity.
By the end of this course, you'll have a robust page builder that allows you to generate pages, with a set of reusable blocks. Not only will you learn how to implement new blocks, you'll understand every step of the process, and ensure best practices for your editors.
But before we get into things, why don't we quickly discuss what a page builder even is? Dependent on your experience, you may have a range of different expectations as to what a page builder actually is.
About the author
My name is Jono, and I'm the founder of Roboto Studio. I have been building websites for many years, focusing on delivering the best editorial experiences with cutting-edge technologies. I wrote this course to simplify the process of building a page builder with Sanity and Next.js.
The goal is to provide a straight-forward course for you to craft a solid page builder, allowing your end users to have the best editorial experience. After years of building websites with Sanity and Next.js, I wrote this course from the perspective of what I wish I had learnt when I first started building.
Throughout this course, you will learn the process of building blocks, along with the positive and negative implications of content modeling decisions. By the end of the course you will be able to easily design and manage page builder blocks and have an understanding of the best practices.
What is a page builder?
Think of a page builder as a set of stackable lego blocks, where each block is a piece of content that can be used to build a page. This is an apt description, because it's rare that a page will go left and right, it'll almost go from top to bottom.
With this in mind, a page builder allows you to move blocks vertically on a page, as well as to add and remove blocks on a page. If you build a new component for it, that component can then be used on any page and added to the selection of blocks within your page builder.
Why is it important?
With a page builder, you're allowing your content team to build pages without having to rely on developers. They're able to change the order of content, use repeatable components to create consistency and ultimately generate new pages in a fraction of the time.
What's very useful about the above, is the fact that when you build a new block, your whole team has access to that block to use throughout any of the pages that use the page builder.
What problems does it solve?
- Speed: Content teams can build pages in a fraction of the time.
- Consistency: Repeatable components can be used to create consistency across pages.
- Flexibility: Content teams can change the order of content, add and remove blocks from a page.
What problems does it create?
You really have to think about how you're going to structure your page builder. Whether you use a single page builder throughout all of your pages, or whether you want to have specific page builders for different pages.
You shouldn't use it for something like a blog, where almost all blog posts follow the same formulaic structure, of a big chunk of text with a few images.
Always remember, as soon as you add a page builder, you're handing over the reigns for page layout to your content team, and a lack of rigidity can result in inconsistent user experiences.
Now let's go ahead and build the page builder blocks.