Articles on: CMS Integrations

How to bind dynamic data to elements

Binding dynamic CMS data to elements is the most basic functionality for the CMS integration.

Binding data to elements
Dynamic properties panel

Dynamic data can ONLY be added to elements contained in CMS Items or CMS Lists as they require a source from which the data can be pulled.

Binding data to elements

Make sure you have a CMS Item or List in the page. Next:

Drag the element you want in the Success layer of the CMS Item
Go to the Right panel
Click on the Bind data icon next to the attribute you want to make dynamic
In the Dynamic Property panel select the data you want to bind
Click Bind property

Here’s an example in which we bind data to a text element and an image element.

Binding dynamic content to elements with the dynamic property panel

Dynamic properties panel

Through the Dynamic panel, data imported from your imported CMS collections can be bound to almost any element in your project, including: text, rich text, images, videos, date, iframes and more.

Dynamic data can be used to change an element’s content, source or various properties such as ID’s, img alt, etc.

The dynamic properties panel will list all of the fields that you created in the CMS to define your collections (or content models, depending on the CMS).

Nesting a CMS element into another CMS element with a different source will enable you to use the properties from both sources.

All of the dynamic properties in nested structures are available to be bound to elements at any level of the structure.

Dynamic panel properties vs entries in the Headless CMS

Updated on: 26/03/2024

Was this article helpful?

Share your feedback


Thank you!