In this episode, we'll finish out the entire site. Buckle up—it's a long one. You'll see how to develop a super dynamic layout builder that puts the exact right amount of control into your admins' hands. You'll see how a wide variety of layout blocks are built while all relying on a very solid React + TypeScript codebase. In addition to the layout building components, we'll go through each Hero style that we've designed, show how the Form integration works, and add some miscellaneous polish to the site here and there.

By the end of this video, the site will be fully complete.

0:00 - Intro
2:31 - Payload Roadmap
4:11 - Dynamically generated admin descriptions
5:07 - Plugins infrastructure
6:41 - Remaining work to be done
10:00 - Picking up where we left off
11:17 - Building the Heroes
12:35 - Extending Payload's Rich Text Editor
16:29 - Field Conditional Logic
22:05 - Converting SlateJS Rich Text into JSX
25:35 - Creating custom Rich Text Editor components on the frontend
37:12 - Media component
37:34 - Payload's "depth" function
43:41 - Beginning the layout blocks
47:22 - The Call to Action block
59:13 - The Content block
1:00:12 - More Rich Text Editor customization
1:15:14 - The Media block
1:16:23 - Parallax component
1:22:38 - Slider block
1:31:00 - Study Slider block
1:34:19 - Spacer block
1:35:19 - Statistics block
1:45:05 - Sticky Content block
1:56:03 - Forms & Form Submissions
2:15:02 - Background Noise
2:17:30 - Outro

The design of the site was done by TRBL.

Use Payload for free

Check out Payload for free, forever. The Personal License gives you everything Payload does, all for free. We think you'll find Payload's developer experience second to none. It just feels right to build sites and apps with it.

Feedback welcome

As always, let us know what you think about the video - and about Payload!

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Deploy your entire stack in one place with Payload Cloud.

Microsoft chose Payload to tell the world about AI.

Building a Professionally Designed Website Episode 4 - Heroes, Layout Building Blocks, Animations & Design

This is Part 4 in our deep-dive into how to develop a professionally designed, high-end NextJS + Payload CMS website from start to finish.

Table of Contents

Code for this episode

Figma link

The real-world, live website

Use Payload for free

Feedback welcome