Multi-purpose section

#Overview

This guide shows how to build a multi-purpose page section component that you can use to add a number of different section types to your content.

This recipe uses other recipes & cookbooks to build the different sections, and finally adds them all as part of a modular component field that will simplify your content entries.

Multi-purpose section component

#Prerequisites

• REQUIRED: You need to have a Hygraph account. If you don't have one, you can sign up here.
• REQUIRED: You need to have a Hygraph project.
  • OPTION 1: Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.
  • OPTION 2: Clone the basic project. If you're already familiar with Hygraph and only want to follow the parts of the tutorial where you create the page sections, you can start here.
  • OPTION 3: Clone the entire cookbook. This is the way to go if you're curious about how the page sections are made but don't want to follow the step-by-step creation process. This project contains the entire Page Sections Cookbook so you can compare them, or look into what instances they contain.
  • OPTION 4: Use an existing project of yours. If you have a project already and want to add this page section to it, this is the way to go. In this case, you may need to adjust parts of the tutorial to your own project schema.

#Core concepts

In this guide, you'll work with a number of schema elements. Let's look into them:

• Enumerations: an enumeration is a predefined set of values that represents a list of possible options. You can use them to group values within a type.

• Component: a predefined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.

• Modular component field: a modular component field can have two or more components attached to it.

• Nested components: Nested components allow you to create component fields within a component, as if you had a parent component containing one or more child components.

#What you can do

This guide offers two paths:

• Path 1: Use this guide to create a multi-purpose section component that you can use in your project.
• Path 2: Clone one of the projects we created for you. You can clone a project that only contains the basic models so you can work on the page sections right away, or you can clone the project that contains the entire Page sections cookbook to compare the different section configurations without having to clone multiple projects.

#Clone project

#Clone the basic project

We have prepared a project that contains all the base schema elements you need to add to your page sections, in case you don't want to build them from scratch:

Clone this project

If you decide to clone this project, you can skip the base schema elements creation part of this tutorial, and start from this step.

#Clone the complete cookbook

We have prepared a project that contains the entire Page sections cookbook:

Clone this project

This cookbook contains all the recipes we have so far to create page sections, so you can compare the different banner configurations without having to clone multiple projects.

To find this particular recipe in the cookbook project, navigate to the schema and look for the "Section" component.

#Step-by-step guide

In this guide, we will create a multi-purpose section component with a nested component field for links. Before we can build this, we need to create other schema elements that will be a part of it.

We will divide this process in steps to make it more manageable:

1. Create sections: This part of the guide brings it recipes from this and other cookbooks, so we can have a number of page sections to add to our section component.
2. Create the section component: We will build a section component that will contain all the other sections we brought into the project as part of a nested modular component field.

#1. Create sections

Since this recipe combines existing sections into one single landing page model, we'll bring in sections from different cookbooks.

If you want to follow the step-by-step to create each section, you can follow the links to do that, and then come back to continue:

• Header with notification
• Header with links
• Footer with links
• Footer with sections
• Styled image gallery

Great! Now that we have all our sections, we can move on to creating the model!

#2. Create the section component

Now that we have all the schema elements that, both directly and indirectly, will be a part of our final multi-purpose section component, we'll go ahead and create it!

Multi-purpose section component

We'll click + Add next to Components and add it using this information:

We'll click Add component to save, and then we'll start adding instances to it.

We will start by adding a Single line text field from the right sidebar. Since all the sections we'll add to this component already have their own title fields, this field is only meant to be used as title field for the component only, and will not be used as part of the content.

Let's add it by clicking Add on the Single line text field card on the right sidebar.

We'll use the following information:

We'll click Add to save.

Whether you followed the step-by-step tutorial for each individual recipe, or cloned the basic project, by now your project has a number of components for different page sections. We will now add them as part of a Modular component field, so when we use it in a content entry, we will be able to select which component to include.

We'll find the Modular component field on the Add fields right sidebar, click on it, and use the following information:

We'll click Add to save.

Finally, since we already have a theme enumeration created in our project, we will add it as an enumeration field that will let us select a section theme when we use this component in a content entry:

We'll find the Enumeration field on the Add fields sidebar, and click Add on the field card.

We'll use the following information:

We'll click Add to save.

This is how you create a multi-purpose page section component containing a number of different section types. Creating the section as a component, allows you to reuse the structure in different models in your project as if it were a template!

#Useful links

• Enumerations
• Components documentation