This content originally appeared on DEV Community and was authored by James Mikrut
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
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!
This content originally appeared on DEV Community and was authored by James Mikrut
James Mikrut | Sciencx (2021-08-24T12:03:09+00:00) Building a Professionally Designed Website Episode 4 – Heroes, Layout Building Blocks, Animations & Design. Retrieved from https://www.scien.cx/2021/08/24/building-a-professionally-designed-website-episode-4-heroes-layout-building-blocks-animations-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.