How do I map CMS data onto elements in my TeleportHQ layout

Steps to Map CMS Data

1. Connect to Your Headless CMS:
- First, ensure that your headless CMS is connected to TeleportHQ. You will need to import the content types you want to use in your project.

2. Select the Element:
- In your TeleportHQ project, choose the element on the canvas that you want to map CMS data to.

3. Access the Data Mapping Options:
- Look for the "Dynamic Data" or data mapping icon in the Right Panel. This will allow you to link the selected element to the CMS data.

4. Map the Data Fields:
- In the mapping section, select the relevant data fields from your CMS that correspond to the properties of the element. For instance, if you are working with a text element, map it to a text field from your CMS.

5. Use Mixed Type and Array Mappers:
- If your CMS data includes mixed types or arrays, use the Mixed Type CMS element or Array Mapper. These helper elements allow you to handle complex data structures:
- Mixed Type: Useful for fields that can reference multiple data types.
- Array Mapper: Ideal for fields that contain lists or arrays of items.

6. Preview and Test:
- After mapping, preview your layout to ensure that the CMS data is displaying correctly. Make any necessary adjustments to the mappings as needed.

7. Sync Changes:
- If you make changes in your CMS, remember to sync the content types in TeleportHQ to reflect those updates in your project.

By following these steps, you can effectively create dynamic pages in TeleportHQ that utilize data from your headless CMS, enhancing the interactivity and content management capabilities of your website[1][5].