Dynamic page

Display CMS data in a dynamic page

Saika avatar
Written by Saika
Updated over a week ago

In the dynamic page, you can use CMS data (model, item, and property) to elements in the page to display and design the contents.

Please read the following article to learn more about the CMS data, such as a model and how STUDIO CMS works.

This article introduces the features of a dynamic page and what you can do using the page.



1) Choose and change the CMS model

When adding a dynamic page, you have to choose the CMS model.

On the dynamic page, you can use CMS data (property) to elements and display contents.

Click on the model name on the style bar to change the model at any time.

Changing the model doesn't affect the design you created on the page.

However, you may need to set a property to elements again if the structure of the CMS property is different.

2) CMS item slug (:slug)

A slug can be editable in the CMS dashboard per item.

Please check the article below for more information.

The ':slug' is at the end of the page pass in the dynamic page.

The path will change depending on the slug of the CMS item. It will be displayed as :slug in the editor.

The first item on the item list will be shown in default. You can change items from the CMS item list in the editor by selecting one.

3) Data panel

On the dynamic page, the data panel button is displayed on the upper left of the screen.

The data panel, where you can see the list of properties added to the model, will appear once you click the button.

You can use CMS data by connecting from the data panel to elements or their styles.

4) Styling CMS data per item

All the elements and their styles on a dynamic page are the same throughout the items in the model.

However, you can use boolean property (with conditional visibility or conditional styles functions) to change the style or hide/display elements.
Read the articles below to learn more about the functions.

5) How to use CMS data in the design editor

a) Connecting from data panel to box elements

Open the data panel in the design editor. Then click a dot next to the property you want to use, and drag it to a box to connect.

For example, you can drag text and number properties from the data panel to a text box to display the string you added to the CMS dashboard.

Read the article below to learn more about other properties.

When hovering the cursor over CMS data in the data panel, the connecting blue line will appears. You can check where the CMS data is displayed or used in styles.

The reference property data is hidden by default, so you can click ▼ to see all the data.

b) Use CMS data from the box setting panel

You can set up the information to be displayed from the box setting panel in the right corner.

When you add a text box/image box within the item and open the box setting panel, you can select properties to refer as variables.

c) Use CMS data in the Site and Page settings panel

You can set the page title, description, and OGP (Open Graph protocol) image for dynamic pages.

Setting this information leads to a better SEO. Read SEO Settings | STUDIO U for more information about SEO in STUDIO.

In the title and description, you can use the variable information that the model has in the meta information.

Hover the cursor over the input field and click the + icon that appears to display the suggestions.

The text typed directly in the field will be displayed in black text. It'll be fixed text to all the items in the same model.

Click on the social cover field to upload an image or choose a property.

Use property when you want to set different social cover images for each page.

If you upload an image, all the items (pages) in the model will have the same social cover.

Note

cms blog dynamic page

Did this answer your question?