Content modelling > Modular content fields
The Modular Content field is used to define a dynamic area for richer page layouts.
For example in a landing page, defining a Modular Content field allows the writer to choose between adding a text section, a carousel, or a call-to-action. This gives the writer the freedom to compose a landing page by alternating and ordering as many of these choices as they want/need.
You can use Modular content for defining dynamic layouts in any of your models: blog posts, landing pages, case studies, tutorials, any place you want to give the content writers the choice between different template options.
Developers are in charge of defining which elements writers can use to compose content for a specific modular content field. You can think of those as "low-level" models, called Block models. Authors, to compose their dynamic content, will be able to add and reorder these blocks as they prefer.
How to build a Modular content editor
Suppose we have an Article model, and we want to add a modular content field to manage its content. The first step is to decide which are the different kind of basic blocks you want your authors to alternate. In this case, we want our content to be a flexible composition of:
Text
Quotes
Videos
Text + Image blocks
To achieve this result, first we create the Article model, and add a Modular content field to it:
In the validation tab you can choose which blocks will populate your modular content field. Let's add the Quote block:
Create/edit a block
If you go to the Blocks Library tab in the Admin area, you will see all the blocks that you have already created, and you can create a new one:
Blocks are just a composition of fields, just like ordinary models. In our case, we want the Quote Block to be made of two fields: one containing the actual quote, the other containing the author.
You can click on the Plus button on the bottom to create a new block. In this case, a multi-paragraph text field to contain the text of the quote, and a single-line string text to display the name of the quote's author. If this block is used in one of your Models you will see a notice, for example we see that our Quote Block is used in the Content field.
If you go to your Content Area now you should see a new option called "Quote" in the modular content field's dropdown.
Reusing block models
With these building blocks you can start to design and develop a modular template that matches models and modular blocks in DatoCMS' schema.
Once you have set up the different blocks you can reuse them across different models.
This means that the exact same block structure is reused across modular contents and models. If you now modify the block in one place the changes will be reflected across all modular contents.
This will effectively enable you to develop a modular template that will allow editors to build complex pages just by creating new records in the CMS!
Tutorial: build a dynamic landing page with Modular Content field
If you're curious to see the full power of Modular Content fields in action, take a look at this video tutorial which covers everything you need to build a customizable landing page made of different reusable blocks:
