Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubBlog
Community
RoadmapDiscordCommunity Help
Payload Cloud

Deploy your entire stack in one place with Payload Cloud.

LoginCloud Pricing
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftBlue OriginHello BelloMythical SocietyTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case study
New projectLogin
New projectLogin
Author
James Mikrut headshot
James Mikrut
@JamesMikrut
Published On

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

Author
James Mikrut headshot
James Mikrut
@JamesMikrut
Published On
Building a Professionally Designed Website Episode 4 - Heroes, Layout Building Blocks, Animations & Design
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.

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.

Table of Contents

  • 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.

Code for this episode

https://github.com/payloadcms/custom-website-series/tree/episode-4

Figma link

https://www.figma.com/file/Ul801GH5yjcwEA3JVJH90F/Website-Series?node-id=713%3A1940

The real-world, live website

https://metricstructures.com

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!