You’ve got your collection, you’ve added the information. Now it’s time to head back to your canvas and add the elements that need to be dynamic.

Making elements dynamic

First, add all the elements that you need to create your CMS page. Once you have your framework, you can connect the elements to the collection.

In our screenshot below, we’re keeping it simple (as it’s just for demonstration purposes).

This is how it’s done:

• Add a div block. Go to settings and connect the collection (Blog). This adds an amount of containers that’s equal to the added items.

• Add a heading and in the settings, connect the corresponding field, also named data key (Name)

• Add a paragraph and in the settings, connect the corresponding field, also named data key (Body)

Now each heading and paragraph will change automatically, taking the data that’s stored in the collection.

When you style one of the elements, the changes are applied to all of them. For example, if you make the headings italic, all three headings will be displayed that way.

Regular pages with collections

Let’s say you’re creating a blog section. You will need two things: a blog overview page and blog post pages. The overview page is what we’ll discuss here.

Overview pages are created with building blocks that are later linked to elements from a collection.

To get started with your blog overview page, you’ll first create your design statically. On your canvas, add all the elements that you need to display one blog, like a header, blog title, description, image and button to read more. Grids are great for this!

Then, link each element to the right field your collection. You’ll see that the content changes automatically to display the information that’s inside the collection.

Note: You can select from fixed and inline variables.