Point: What is Studio.Design CMS?
Studio.Design CMS is a Content Management System (CMS) feature that lets you structure, manage, and update content directly within Studio.Design. By combining models, items, and properties, you can manage frequently updated article content—such as blogs and news posts—all in one place.
For more on how Studio.Design CMS works and how to use it, see the following articles.
How Studio.Design CMS works
With Studio.Design CMS, you create and manage your visual design and your content separately, as shown below.
Content only displays correctly on your site once you connect box elements in the Design Editor to your CMS properties.
| Where to set it up | What you set up |
Content |
| |
Visual design |
|
This article walks you through how to connect properties—already set up in the CMS Dashboard—to elements in the Design Editor.
For details on each property type and how to configure them, see CMS Properties.
Before following the steps in this article, make sure you've completed the setup below.
Tips: These steps apply only to CMS article content created with Studio.Design CMS.
If you're pulling article content from an external CMS service such as microCMS through an API, see the API integration (API List) article instead.
Connecting image boxes and text boxes to CMS properties
1. Select a box element
Inside a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List), select the box element you want to connect a property to.
The box type you use depends on the property you want to display.
Note: Connecting the body property of a CMS article item
To connect the body property of a CMS article item, 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 that matches 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] turns on automatically when you connect the property, and the connected box is converted into a list.
Click the relevant input field inside the tab.
Under [Select from CMS properties], choose the property you want to connect.
For an image box: the [URL] input field
In the example below, an "Avatar" property is selected from a reference property that points to a model called "Writer."
For a text box: the [Text] input field
In the example below, a "Name" property is selected from a reference property that points to a model called "Writer."
You can also open the [Data] tab and use the connector to link the property to the box element.
Grab the round icon [・] in front of the property name listed in the Data tab, then drag and drop it onto the box element you want to connect.
Once the connection is made, the round icon [・] turns blue.
Note: Connecting reference properties
When connecting a reference property, the appearance and selection method in [Select from CMS properties] vary depending on whether the property is single-select or multi-select.
■ Connecting a single-select reference property
It appears in a section separate from other properties. Click the arrow next to the property name to 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] turns on automatically when the property is connected, and the connected box is converted into a list.
You can't make this connection using the connector from the CMS property list in the [Data] tab.
4. Check your settings
Open the Page panel.
Use the selector at the bottom of the Page panel to switch between items shown on the article page, and confirm that the connected box updates correctly.
Open Live Preview to confirm everything displays correctly.
Check how it appears on the published site.
Make sure the status is set to Published for all the CMS items you want to show.
If everything looks good, publish the site from the Publish panel.
If the site is already live, update the site to apply your changes.
Connecting a Rich Text Box to a Rich Text property
To display a Rich Text property, such as the body of a CMS article item, use the connector in the [Data] tab.
Tips: You can use the same method to connect any property other than a multi-select type.
1. Select a box element
Select a Rich Text Box inside a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List).
2. Open the [Data] tab in the right panel
Select the [Data] tab in the right panel to see the list of CMS data.
If the panel is closed, open the right panel first.
3. Use the connector to link the Rich Text Box to the Rich Text property
Use the 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 settings
Use the selector at the bottom of the Page panel to switch between items shown on the article page, and confirm that the connected box updates correctly.
Open Live Preview to confirm everything displays correctly.
Check how it appears on the published site.
Make sure the status is set to Published for all the CMS items you want to show.
If everything looks good, publish the site from the Publish panel.
If the site is already live, update the site to apply your changes.
Connecting a Boolean property to a box element
1. Select a box element
Inside a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List), select the box element you want to connect a 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 the connector to link the box to a Boolean property.
In the [Settings] tab of the right panel, set the display conditions.
3. Check your settings
Open the Page panel.
Use the selector at the bottom of the Page panel to switch between items shown on the article page, and confirm that the connected box updates correctly.
Open Live Preview to confirm everything displays correctly.
Check how it appears on the published site.
Make sure the status is set to Published for all the CMS items you want to show.
If everything looks good, publish the site from the Publish panel.
If the site is already live, update the site to apply your changes.
Connecting a Color property to a box element
1. Select a box element
Inside a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List), select the box element you want to connect a 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.
Choose a Color property to connect it.
3. Check your settings
Open the Page panel.
Use the selector at the bottom of the Page panel to switch between items shown on the article page, and confirm that the connected box updates correctly.
Open Live Preview to confirm everything displays correctly.
Check how it appears on the published site.
Make sure the status is set to Published for all the CMS items you want to show.
If everything looks good, publish the site from the Publish panel.
If the site is already live, update the site to apply your changes.