DEV Community

Cover image for Building a Professionally Designed Website Episode 4 - Heroes, Layout Building Blocks, Animations & Design
James Mikrut for Payload CMS

Posted on • Originally published at payloadcms.com

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!

Discussion (0)