Identifying Website Sections

[00:00] If you want to recreate eie.io as a Prismic-powered website, you'll first need to learn how to identify website sections and break down the website design.

[00:08] You'll remember from the intro lesson we learned about concepts of page types and Slices. We discussed how page types could represent blogs or marketing pages, and how Slices represent sections for your website, like a call to action, a video or an image gallery.

[00:22] Well, you could loosely describe those pages as different collections of Slices. The reason that we create our page types with Slices and break up our designs this way is that we can couple these slices with React UI components.

[00:34] The advantage of doing this is that you can create self-contained reusable snippets of code. This allows you to use these pieces of code as building blocks in one or many page designs. Then if you need to update the UI, you will only have to update the specific component or Slice.

[00:48] This makes creating and connecting a new website section much simpler as well. Remember, your ultimate goal is flexibility and reusability, so you don't need to spend time on doing parts of your website for every component request.

[01:01] So now you know why it makes sense to break a website design into sections, here's how to do that.

[01:06] A section or Slice spans the full width of the page and includes related content. In our example, it's easy to see where sections can be defined. First, you have the hero section and each group of related content as you move down the page can be seen easily with natural visual breaks, including padding and headings. Each section is modeled as a Slice and coded as a component.