# Data Design

<div align="left"><figure><img src="/files/D2iK6WpbpsDaq2E4Iar7" 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](/app-editor/page-flow.md).&#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](/app-editor/page-editor/page-preview.md) 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](/app-editor/page-editor/built-in-elements/image.md), [Link](/app-editor/page-editor/built-in-elements/link.md) and [Text](/app-editor/page-editor/editing-text.md), 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](/app-editor/page-editor/built-in-elements/link.md) element and set its [URL dynamically](/app-editor/page-editor/built-in-elements/link.md#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](/app-editor/page-editor/built-in-elements/layout-column.md) into the data design element without the requirement of adding a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row.md) element first.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
