A Dynamic Page is a page type that dynamically displays content from CMS Items managed in Studio.Design CMS or detail data retrieved via the Data Connect API, with one page per item.
In this article, a single piece of data managed in Studio.Design CMS is referred to as a "CMS Item," and a single piece of data retrieved via the Data Connect API is referred to as "detail data."
Point: What is Studio.Design CMS?
Studio.Design CMS is a built-in Content Management System (CMS) that lets you structure, manage, and update content directly within Studio.Design. By combining models, items, and properties, you can manage frequently updated content—such as blogs and news—all in one place.
For more on how Studio.Design CMS works and how to get started, see the following articles:
Supported data sources
When creating a Dynamic Page, you'll select the data source you want to connect.
You can connect to the following types of data:
CMS Models created in Studio.Design CMS
Detail endpoints from the Data Connect API
Note: Retrieving detail endpoints from the Data Connect API requires a Business Plus plan or higher.
Adding a Dynamic Page
Click the [+] button in the top-right corner of the screen.
You can also add a page using the [+] button in the Pages panel.
In the page type selector, choose Dynamic Page.
By default, only [Page], [Modal], and [Redirect] are shown, so click ">" to reveal and select [Dynamic Page].
Select the data source you want to connect to the Dynamic Page. Choose a [CMS Model] if you're using Studio.Design CMS, or a detail endpoint if you're using the API.
Click [Create].
Tip: You can create a Dynamic Page even in projects where the CMS has not been initialized, as long as you have a valid API detail endpoint.
Switching the data displayed on the screen
A Dynamic Page can preview one item of data from the connected data source on the canvas.
For Dynamic Pages connected to Studio.Design CMS data, the first CMS Item in the linked CMS Model is shown by default. You can switch the item being previewed from the menu at the bottom of the Pages panel.
Note: Data retrieved from an API cannot be switched in the preview.
Connecting data to boxes on a Dynamic Page
You can link fields from the connected data source to the boxes placed on a Dynamic Page so their content displays dynamically.
For Studio.Design CMS, you'll use CMS Properties. For the API, you'll use fields from the detail data.
Place a text box or image box on your Dynamic Page.
Select the element you want to connect.
Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.
Select a CMS Property if you're using Studio.Design CMS, or a detail data field if you're using the API.
Link the appropriate field to each box.
For detailed steps on linking CMS Properties, see Linking box elements to CMS Properties in the Design Editor.
For details on the behavior and specifications of each CMS Property, see CMS Properties.
Changing the data source
To change the data source connected to a Dynamic Page, use the Page Settings tab.
Note: Important points when changing data
You can't switch between different data source types—for example, from a Studio.Design CMS Model to API data.
When you change the data source, the design on the canvas is preserved. However, if the field structures differ between the old and new data sources, you'll need to reconnect the data on each element.
Select the Dynamic Page in the Pages panel.
If you're using Studio.Design CMS, select the new CMS Model under [CMS Model].
If you're using the API, select an API detail endpoint.
Setting meta information for a Dynamic Page
You can set meta information—such as page title, description, and cover image—for Dynamic Pages, just like static pages.
As with static pages, configure these settings in the [Page] and [Site] tabs in the right panel.
For more details on settings and SEO, see the following articles:
Setting paths and parameters
A Dynamic Page URL is made up of a fixed path and a dynamic parameter. The value used for the dynamic part differs between Studio.Design CMS and the API.
Path settings for Studio.Design CMS
For Studio.Design CMS Dynamic Pages, the URL path uses :slug.
The slug is a value set per CMS Item in the CMS dashboard, and the :slug portion is replaced with each CMS Item's slug.
For details, see the Slug article.
Path settings for Data Connect API
For Dynamic Pages connected to data retrieved via the Data Connect API, the page path uses the same URL parameter name as the detail endpoint.
For example, if the detail endpoint is https://example.com/api/items/:id, set the page path to something like /contents/:id.
When linking from a list page to a detail page, pass an identifier such as id from the list data into that parameter. If the parameter names don't match, the correct detail data won't be retrieved.
Editing box designs on a Dynamic Page
You can edit the design of each box on a Dynamic Page in the Design Editor, just like on a regular page.
The base design settings are shared across all connected data.
Text, images, spacing, layout, and other settings can be edited the same way as on a regular page.
While the displayed content changes per item, the same base design is applied to all boxes.
Using Boolean properties and display conditions
Note: Boolean properties and display conditions are not available on Dynamic Pages connected to a Data Connect API.
On Dynamic Pages connected to Studio.Design CMS, you can use Boolean properties and display conditions to change what's shown based on conditions.
For example, you can display a badge only on certain CMS Items, or show and hide elements based on conditions. You can also use conditional styles to change colors or appearance depending on a condition.
For setup details, see the articles below:
Article Per-article settings CMS Blog