Hi everyone! This is Anastasia from Strapi, and in this video I will show you how
to use components and dynamic zones. Components and dynamic zones are
powerful capabilities that make Strapi stand out from other CMS options.
It allows marketers to build new pages with dynamic layouts using configurable components.
This way, they are not dependent on developers or designers for assistance, because they can
select components from the pre-arranged library. Developers benefit from this capability as well, since they spend less time and
effort on content modelling. This feature shortens time to market and allows
marketers to quickly and autonomously ship new pages that follow the brand guidelines, which
are defined once the library is first built out. So what are Dynamic zones and components?
Components are ready-made groups of fields, connected to a specific front-end. In Strapi,
you can define your own custom component library with the help of designers and developers,
and create a website builder experience. You can make each content
configurable. For instance, let marketers choose what color or shape the
button should be, how to center text, etc. A dynamic zone is a building block
that allows you to insert components to any page. You can add different component
collections to any content type structure. Let's see how it works in practice. To
add a dynamic zone or a component we go to a Content Types Builder and open any
collection or single type. Let's try to add a dynamic zone to a restaurant. We can
see that the structure is ready and we already have one Dynamic Zone called "blocks",
which has a selection of different components that we can use. But let's try to add a
new dynamic zone to the end of our page. We can give any name to this Dynamic Zone
field: let's call it "restaurant information". Now we can add components to the
dynamic zone. We can create a new one or use an existing component from
a library that we have defined before. Here you can see, that there are
different collections of components: one is called "blocks" for example where
we have the "Call To Action", "FAQ", etc, other collection is called "Global" for the footer
& navigation, another one is called "pricing", "restaurant", "shared", etc so you can name it
anything you want and organize it as you wish. Let's select a couple of components
from the "blocks" collection. And there we go! We can see that there is a new
Dynamic Zone with different components in it. Now let's try to add a new
component to an existing page. Let's go to the content manager
and choose any restaurant. This restaurant page has already been published, but let's say we want to add some more
content to it, right in the middle of the page. Before doing that, let's have
a look at what it looks like right now. This is the restaurant page,
it has a couple of pictures, some information here, couple of
reviews, and that's it. So let's say we want to add a call to action
block right here, after the reviews. To add a new block let's scroll to our Dynamic
Zone. In here we can see the button "add a component to blocks" - that's the name of the
dynamic Zone that was here. Now we can see two different component collections: one is related
to a restaurant, and the other one is named "blocks" which means it's a general component
collection, but we can name them anything we want. Let's find a call to action button, and we can
see that there are different themes. Let's choose a primary theme. We can add a title, add some
text that will be displayed below the title and we can add our call to action
once again. We can choose a theme of a button here. Let's choose
the secondary one and add a link. In "Target" we can choose if we want to open the
page in a new tab, or keep it in the same tab. And there we go! Once again, these components
can be set in any way you wish, so if you wish to add more settings, for example, choose a font,
or choose a shape of a button, you can do that. Let's click on "Save" and see what is our result. Here's our updated restaurant page. Let's
scroll to the bottom and there we go - the new CTA block that we added just in a couple of
minutes. The great thing about this feature is: if I open another restaurant, I can see that
there is no call to action in the bottom, but there is a different component
with suggestions of other restaurants. It means that with Dynamic zones and
components I can customize any page. Component Dynamic zones are great proofs of
Strapi's customizability, flexibility and adaptability to ever changing environments.
It helps all teams work independently, iterate faster, and have the right
degree of control over the design. Thank you for watching this video! By the
way, you can try Strapi out without having to install it. Just go to our website and
fill out this form to get access to it.
