Dynamic elements
You’ve got your database, 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 dynamic page. Once you have your framework, you can connect the elements to the database.
In our screenshot below, we’re keeping it simple (as it’s just for demonstration purposes).
This is how it’s done:
Add a container
Add a div block. Go to settings and connect the right source (Blog). This adds an amount of containers that’s equal to the added fields
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 database.
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.
Tip: You can also mix static with dynamic content. If you change the heading text above directly in your canvas and not connect it to any data key in the settings, your heading will be static.
Static pages with dynamic data
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 database.
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 source and key in your database. You’ll see that the static content changes automatically to display the information that’s inside the database.
Note: You can select from fixed and inline variables.