# Data Design

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FoVAakAyPv6gOazny6dOs%2Fimage.png?alt=media&#x26;token=16560efa-8820-4b63-93ba-7452ef78d224" alt="" width="76"><figcaption><p>Data Design</p></figcaption></figure></div>

The **`Data Design`** element is used to design a template with various elements and placeholders. This template can subsequently be populated with real data and dynamically incorporated into your page via [Page Flow](https://docs.zingy.ai/app-editor/page-flow).&#x20;

The data design element can be positioned anywhere on the page, but it's important to note that as mere templates, they will not be rendered in the [Page Preview](https://docs.zingy.ai/app-editor/page-editor/page-preview) or when accessed by users of your app.

Each instance of the data design element on a page, will create one design template that can be dynamically shown on your page. Additionally, you have the flexibility to replicate the template multiple times, enabling the addition of rows to a table or any other desired repetition as needed.

Within a Data Design, certain elements like [Image](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/image), [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) and [Text](https://docs.zingy.ai/app-editor/page-editor/editing-text), allow you to define placeholder fields, whose values can be set from real data.&#x20;

{% hint style="success" %}
Look for the **`Dynamic Content`** toggle switch and the **`Field Name`** settings in these elements for defining the placeholder field names.
{% endhint %}

For example you can add a [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) element and set its [URL dynamically](https://docs.zingy.ai/app-editor/page-editor/link#dynamic-content). Similarly a text element's content can also be set dynamically.

To facilitate template design, certain element placement rules are relaxed. For instance, you can directly drag a [Layout Column](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column) into the data design element without the requirement of adding a [Layout Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-row) element first.

{% hint style="success" %}
The usage of Data Design element is explained in more detail in [Dynamic Content](https://docs.zingy.ai/app-editor/dynamic-content).
{% endhint %}