Announcing beta.18 - build your pages on the fly with Dynamic Zones
Tags: strapi, api, javascript, webdev
Published: 2019-12-18 09:59:10

---
title: Announcing beta.18 - build your pages on the fly with Dynamic Zones
published: true
description: Build rich layout pages or complex data structures on the fly with Dynamic Zones. Create components and reuse them in the same or different Content Types. 
tags: strapi, API, javascript, web development
---

![Strapi Dynamic Zones CMS beta.18](https://blog.strapi.io/content/images/2019/12/beta.18_cover-4.png)

Strapi powers content management and API creation for applications like [ASOS](https://www.collusion.com/), [IBM](https://www.ibm.com/thought-leadership/institute-business-value/), [Société Générale](https://strapi.io/stories/societe-generale-develops-e-training-website-with-strapi), [Mug & Snug](https://strapi.io/stories/mug-and-snug-uses-strapi-to-develop-a-scalable-social-commerce) and thousands of projects.

Strapi facilitates content management for all users. Our goal is to empower you to create any project you have in mind. For this reason, we are thrilled to announce the release of Strapi beta.18 with a highly requested feature, that will unleash your creativity even more!

A HUGE thanks to the 300+ individuals who have already contributed to the Strapi project, the team is super grateful for your help! We’d like to give a special shout out to [@0LL1](https://github.com/0LL1), [@chriswinch](https://github.com/chriswinch), [@Froelund](https://github.com/Froelund) and [@derrickmehaffy](https://github.com/derrickmehaffy). Well done!


As always the full changelog can be found in the repository [here](https://github.com/strapi/strapi/releases/tag/v3.0.0-beta.18).

## Introducing the Dynamic Zones feature

To be able to build dynamic pages or create complex data structures, it's often very helpful to create sections such as sliders and quotes or data structures such as meta fields so that you can reuse them whenever needed.

It is now possible with the Dynamic Zones! And in a way so flexible, that the only limit is your imagination!

Let's dive into it.

## The most flexible way to create rich experiences

In this version, we are introducing a new data structure: the **Components**.
Components allow you to **create nested fields** to organize your information, **repeat this data structure** to build arrays or to **reuse this data structure** across multiple Content-Types. 

In other words, it means that you can pick on the fly **any component**, **reorder them as you wish** in the repeatable zone and create **original** content structure.

Let's explain this in detail. 

##Building a blog post data structure with the Dynamic Zones

For the sake of this example, we will create the data structure for a blog using *Components* and *Dynamic Zones*. 

In this example, let's say that I'm Tim Cook, and I'm writing an article on my blog about the *Release of the new MacBook Pro*. Why not?

I want to add the following rich layouts to my article: a quote linking to my bio on Wikipedia and a slider, with 3 pictures of MacBooks Pro.


#####1. Creating the Blog Post Content-Type
 
Let's start by creating the Content-Type *Blog Post*.

This post will have the following fields:

- A text field *Title*
- A media field *Cover*
- A unidirectional one-to-many relation field *Authors*


<a href="https://www.loom.com/share/e20fd7da27ae41b7b2dc0aaaa58f72fb"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/e20fd7da27ae41b7b2dc0aaaa58f72fb-with-play.gif"> </a>


#####2. Creating Components

Then, we'll create our first ***Component***. 

As said earlier, *Components* allow you to group fields to organize your structure.
In our example, we will use *Components* to create differents elements needed for our blog post :

- **Meta tags**: a meta tag must have 2 fields: one name and one value
- **Quote**: the quote layout must include a quote, an author and a link to the biography of the author.
- **Slider**: a slider has a bit more depth: it is composed of slides, that each contains a picture and a caption. The Slide model must be repeatable and I want to be able to reorder my slides if needed.

So first, let's create the Meta *Component*.

<a href="https://www.loom.com/share/f949c3e1e5cb429b909cf0afcea8eab5">  <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/f949c3e1e5cb429b909cf0afcea8eab5-with-play.gif"></a>


Then, the Quote *Component*.

<a href="https://www.loom.com/share/273d07ef4b8f49f382984097c87c8cfd"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/273d07ef4b8f49f382984097c87c8cfd-with-play.gif"> </a>


Last but not least, the Slider *Component*.

<a href="https://www.loom.com/share/9d9869db02484dea84c4c36289c91a45"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/9d9869db02484dea84c4c36289c91a45-with-play.gif"> </a>


#####3. Creating a Dynamic Zone
Now that we created the needed *Components*, let's create a *Dynamic Zone* that will include them to build the content of our blog post.
We will first add the Quote and Slider *Components* that we just created, then a *Rich Text* Component, that we will create on the fly in the *Dynamic Zone*.

<a href="https://www.loom.com/share/b21be8a7e9b344988d8ebfc7714e21d8"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/b21be8a7e9b344988d8ebfc7714e21d8-with-play.gif"> </a>

Nice, uh?

Now, that we created the data structure, let's head to the Content Manager and manage our content.

<a href="https://www.loom.com/share/d8508da2ae974542a005571776f4c7af"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/d8508da2ae974542a005571776f4c7af-with-play.gif"> </a>

In this video, you can see that adding a *Component* to a *Dynamic Zone* is super fast and easy.

A Dynamic Zone allows your editors to choose between any types of rich layouts. You just have to create and add them, it's as simple as that. Your Content Manager just has to pick them in the list and add them.

It works for any section with any combination of text, or image like sliders, quotes, testimonials, etc. The list is infinite and the only limit is your imagination!

Your writers have total control to add section by section the different part to build the post and to order them however they want.

<a href="https://www.loom.com/share/2cb04d309451415da44d8ea8f773aeac"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/2cb04d309451415da44d8ea8f773aeac-with-play.gif"> </a>


##Editing the layout

You may have noticed a little change in the Plugin section of the left menu: the Content Manager is gone.

The configuration of the Content Types' layouts can now be done through the *Configure the View* button directly in the Content Type Builder. 
Drag and drop your fields to reorder them and save, and you can visualize the result immediately in the List view of your Content Type. 

<a href="https://www.loom.com/share/b8553f89fe654bfb8807724965e929de"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/b8553f89fe654bfb8807724965e929de-with-play.gif"> </a>

##Upgrade to beta.18

If you are already building your project with Strapi, we recommend that you upgrade to the latest version in order to benefit from these new features! Follow the detailed instructions in our [migration guide](https://strapi.io/documentation/3.0.0-beta.x/migration-guide/migration-guide-beta.17-to-beta.18).

## Get started

If you are new to Strapi, just give it a try!

Take a look at the [Getting Started](https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html#_1-install-strapi-globally) guide to jump on board, or get started with the following command line:

```
yarn create strapi-app my-app --quickstart 
```

##Get involved

Check out our public product roadmap to see what features we’ll be working on next.

Don’t see a feature you’d like in the backlog? Feel free to [submit new feature requests](https://portal.productboard.com/strapi/1-public-roadmap/tabs/2-under-consideration) or even better, [**start contributing**](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) to Strapi on GitHub. All contributions and users are welcome! 

Don’t take our word for it. Have a look at the tweet posted last week by Michele Riva, the creator of [JSMonday](https://www.jsmonday.dev/) and proud contributor of Strapi:


![Tweet Contribution Michele Riva](https://blog.strapi.io/content/images/2019/12/sleva_tweet.png)

Happy hacking!