Building a Professionally Designed Website Episode 4 - Heroes, Layout Building Blocks, Animations & Design
Tags: react, css, javascript, tutorial
Published: 2021-08-24 12:03:09

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

{% youtube hIc0WYqdDto %}

### Table of Contents

- [0:00​](https://www.youtube.com/watch?v=hIc0WYqdDto&t=0s)​ - Intro
- [2:31](https://www.youtube.com/watch?v=hIc0WYqdDto&t=151s) - Payload Roadmap
- [4:11](https://www.youtube.com/watch?v=hIc0WYqdDto&t=251s) - Dynamically generated admin descriptions
- [5:07](https://www.youtube.com/watch?v=hIc0WYqdDto&t=307s)​ - Plugins infrastructure
- [6:41](https://www.youtube.com/watch?v=hIc0WYqdDto&t=401s) - Remaining work to be done
- [10:00](https://www.youtube.com/watch?v=hIc0WYqdDto&t=600s) - Picking up where we left off
- [11:17](https://www.youtube.com/watch?v=hIc0WYqdDto&t=677) - Building the Heroes
- [12:35](https://www.youtube.com/watch?v=hIc0WYqdDto&t=755) - Extending Payload's Rich Text Editor
- [16:29](https://www.youtube.com/watch?v=hIc0WYqdDto&t=989) - Field Conditional Logic
- [22:05](https://www.youtube.com/watch?v=hIc0WYqdDto&t=1325) - Converting SlateJS Rich Text into JSX
- [25:35](https://www.youtube.com/watch?v=hIc0WYqdDto&t=1535) - Creating custom Rich Text Editor components on the frontend
- [37:12](https://www.youtube.com/watch?v=hIc0WYqdDto&t=2232) - Media component
- [37:34](https://www.youtube.com/watch?v=hIc0WYqdDto&t=2254) - Payload's "depth" function
- [43:41](https://www.youtube.com/watch?v=hIc0WYqdDto&t=2621) - Beginning the layout blocks
- [47:22](https://www.youtube.com/watch?v=hIc0WYqdDto&t=2842) - The Call to Action block
- [59:13](https://www.youtube.com/watch?v=hIc0WYqdDto&t=3553) - The Content block
- [1:00:12](https://www.youtube.com/watch?v=hIc0WYqdDto&t=3612) - More Rich Text Editor customization
- [1:15:14](https://www.youtube.com/watch?v=hIc0WYqdDto&t=4514) - The Media block
- [1:16:23](https://www.youtube.com/watch?v=hIc0WYqdDto&t=4583) - Parallax component
- [1:22:38](https://www.youtube.com/watch?v=hIc0WYqdDto&t=4958) - Slider block
- [1:31:00](https://www.youtube.com/watch?v=hIc0WYqdDto&t=5460) - Study Slider block
- [1:34:19](https://www.youtube.com/watch?v=hIc0WYqdDto&t=5659) - Spacer block
- [1:35:19](https://www.youtube.com/watch?v=hIc0WYqdDto&t=5719) - Statistics block
- [1:45:05](https://www.youtube.com/watch?v=hIc0WYqdDto&t=6305) - Sticky Content block
- [1:56:03](https://www.youtube.com/watch?v=hIc0WYqdDto&t=6963) - Forms & Form Submissions
- [2:15:02](https://www.youtube.com/watch?v=hIc0WYqdDto&t=8102) - Background Noise
- [2:17:30](https://www.youtube.com/watch?v=hIc0WYqdDto&t=8250) - Outro

The design of the site was done by [TRBL](https://trbl.design).

#### 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](https://www.youtube.com/pricing) 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!