Point: What is Studio.Design CMS?
Studio.Design CMS is a CMS (Content Management System) feature that lets you structure, manage, and update content directly in Studio.Design. By combining models, items, and properties, you can centrally manage frequently updated article content like blogs and news.
For more on how Studio.Design CMS works and how to use it, see the articles below.
Key features and structure of Studio.Design CMS
With Studio.Design CMS, you create and manage data in the CMS dashboard, and create and design pages in the Design Editor. Here's an overview of what you do in each:
By connecting box elements to CMS properties, your content displays correctly on the site.
| Where you work | Main tasks |
Creating and managing data | Creating and managing CMS models and CMS items / Setting up CMS properties / Creating CMS collections | |
Creating and designing pages | Creating dynamic pages, dynamic modals, and dynamic lists / Setting page layout and design / Connecting box elements to properties |
This article walks you through how to connect box elements on a CMS article page (created as a dynamic page) to CMS properties you've set up in the CMS dashboard.
For details on each property type and how to configure them, see CMS properties.
The steps in this article assume you've already completed the following setup:
Tips: These steps apply only to CMS article content created in Studio.Design CMS.
If you're connecting article content managed in an external CMS service like microCMS via API, see the API connection (API list) article instead.
Connecting image boxes and text boxes to CMS properties
1. Select a box element
Inside a dynamic page or dynamic modal, select the box element you want to connect a property to. The type of box you use depends on which property you want to display.
Note: Connecting a rich text property
To connect a rich text property, use a rich text box instead of a text box.
See Connecting a rich text box to a rich text property below for the steps.
2. Open the settings tab in the right panel
In the right panel, open the settings tab for the element you selected. If the panel is closed, open the right panel first.
Image box: [Image] tab
Text box: [Text] tab
3. Select a CMS property to connect
Tips: If the property you're connecting is a multi-select type, [Connect as list] is enabled when you make the connection, and the box you connected automatically becomes a list.
Click the relevant input field in each tab.
Choose the property you want to connect from [Select from CMS properties].
For an image box: [URL] input field
In the example below, the "Avator" property is selected from a reference property that points to a model called "Writer."
For a text box: [Text] input field
In the example below, the "Name" property is selected from a reference property that points to a model called "Writer."
Alternatively, open the [Data] tab and use a connector to link the property to the box element.
Grab the round icon [・] next to the property name in the data tab list and drag and drop it onto the box element you want to connect.
Once the connection is made, the round icon [・] turns blue.
Note: Connecting a reference property
When connecting a reference property, the appearance and selection method in [Select from CMS properties] differ depending on whether the property is single-select or multi-select.
■ Connecting a single-select reference property
It's shown separately from other properties. Click the arrow next to the property name and choose the property you want to connect.
■ Connecting a multi-select reference property
It appears in the same list as other properties.
[Connect as list] is enabled when you make the connection, and the box you connected automatically becomes a list.
You can't set up connections with a connector from the CMS property list in the [Data] tab.
4. Check your setup
Open the page panel.
Use the selector at the bottom of the page panel to switch between items displayed on the article page, and confirm that the box you connected the property to updates correctly.
Open Live Preview and make sure everything displays correctly.
Check how it looks on your live site.
Make sure all relevant CMS items have a Published status.
If everything looks good, publish the site from the publish panel.
If the site is already published, run Update Site to apply the changes to the live site.
Connecting a rich text box to a rich text property
To display a rich text property such as article body text, use a connector from the [Data] tab to link it.
Tips: You can use the same method to connect any property other than multi-select types.
1. Select a box element
Select a rich text box inside a dynamic page or dynamic modal. If one isn't placed yet, add a rich text box from the add panel.
2. Open the [Data] tab in the right panel
Select the [Data] tab in the right panel to show the list of CMS data.
If the panel is closed, open the right panel first.
3. Use a connector to link the rich text box to the rich text property
Use a connector to link the rich text property of the CMS article item in the data tab to the rich text box on the screen.
4. Check your setup
Use the selector at the bottom of the page panel to switch between items displayed on the article page, and confirm that the box you connected the property to updates correctly.
Open Live Preview and make sure everything displays correctly.
Check how it looks on your live site.
Make sure all relevant CMS items have a Published status.
If everything looks good, publish the site from the publish panel.
If the site is already published, run Update Site to apply the changes to the live site.
Connecting a boolean property to a box element
1. Select a box element
Inside a dynamic page or dynamic modal, select the box element you want to connect the property to.
2. Connect a boolean property
Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.
Use a connector to link the box to a boolean property.
In the [Settings] tab of the right panel, set the display conditions.
3. Check your setup
Open the page panel.
Use the selector at the bottom of the page panel to switch between items displayed on the article page, and confirm that the box you connected the property to updates correctly.
Open Live Preview and make sure everything displays correctly.
Check how it looks on your live site.
Make sure all relevant CMS items have a Published status.
If everything looks good, publish the site from the publish panel.
If the site is already published, run Update Site to apply the changes to the live site.
Connecting a color property to a box element
1. Select a box element
Inside a dynamic page or dynamic modal, select the box element you want to connect the property to.
2. Connect a color property
In the right panel, open the color field where you want to apply the property.
Click the color field to open the color palette.
In the color palette, select the [CMS] tab.
Select a color property to connect it.
3. Check your setup
Open the page panel.
Use the selector at the bottom of the page panel to switch between items displayed on the article page, and confirm that the box you connected the property to updates correctly.
Open Live Preview and make sure everything displays correctly.
Check how it looks on your live site.
Make sure all relevant CMS items have a Published status.
If everything looks good, publish the site from the publish panel.
If the site is already published, run Update Site to apply the changes to the live site.