Skip to main content

[AUTO_EDIT] Connect box elements to CMS properties in the Design Editor

Learn how to connect CMS properties you've set up in the CMS Dashboard to box elements in the Design Editor. This guide covers the steps for connecting properties to image boxes, text boxes, rich text boxes, and conditional settings.

Updated today

Point: What is Studio CMS?

Studio CMS is a Content Management System feature that lets you structure, manage, and update content directly within Studio.Design. By combining models, items, and properties, you can centrally manage frequently updated content like blog posts and news articles.

To learn more about how Studio CMS works and how to get started, check out these articles:

How Studio CMS works

With Studio CMS, visual design and content are created and managed separately, as shown below.

Your content will only display correctly on your site once you connect box elements to CMS properties in the Design Editor.

Where to configure

What to configure

Content

CMS Dashboard

Visual Design

Design Editor

This article explains how to connect properties that you've already set up in the CMS Dashboard to box elements in the Design Editor.

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:

Tips: These steps apply only to CMS article content created with Studio CMS.
If you're using an external CMS service like microCMS and connecting article content via API, see API Integration (API List).

Connect image boxes and text boxes to CMS properties

1. Select a box element

Within a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List), select the box element you want to connect a property to.

The type of box you use depends on the property you want to display:

Note: Connecting the body (main content) property of a CMS article item

To connect the body (main content) property of a CMS article item, use a Rich Text Box instead of a Text Box.

For instructions, see Connect a Rich Text Box to the body (main content) property below.

2. Open the settings tab in the right panel

In the right panel, open the appropriate settings tab for the element you selected. If the panel is closed, open the right panel first.

  • Image Box: Open the [Image] tab

  • Text Box: Open the [Text] tab

3. Select a CMS property from the input field to connect it

Click the input field within each tab and choose the property you want to connect from [Select from CMS Properties].

  • Image Box: Click the [URL] input field

  • Text Box: Click the [Text] input field

If the property you're connecting is a multi-select type, the [Connect as list] option is automatically enabled when you connect the property, and the linked box is automatically converted into a list.

Note: When connecting a reference property

When connecting a reference property, the appearance and selection method in [Select from CMS Properties] differs depending on whether the property is single-select or multi-select.

■ Connecting a single-select reference property

  • It appears in a separate section from other properties. Click the arrow next to the property name to select the property you want to connect.

■ Connecting a multi-select reference property

  • It appears in the same list as other properties.

  • The [Connect as list] option is automatically enabled when you connect the property, and the linked box is automatically converted into a list.

  • You cannot use a connector from the CMS property list in the [Data] tab to connect this type of property.

4. Verify your settings

  1. Open the Page Panel.

  2. Use the selector at the bottom of the Page Panel to switch between items displayed on the article page, and confirm that the box connected to the property updates correctly.

  3. Open Live Preview to check that everything displays correctly.

  4. Check how it looks on the published site.

    • Make sure all relevant CMS items have their status set to Published.

    • If everything looks good, publish your site from the Publish Panel.

    • If your site is already published, update your site to apply the changes to the live version.

Connect a Rich Text Box to the body (main content) property

To display the body (main content) property of a CMS article item, connect a Rich Text Box to the CMS property using a connector in the [Data] tab.

Tips: You can use this same method to connect any property that isn't a multi-select type.

1. Select a box element

Select the Rich Text Box within a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List).

2. Open the [Data] tab in the right panel

In the right panel, select the [Data] tab to display the list of CMS data.

If the panel is closed, open the right panel first.

3. Connect the Rich Text Box to the body (main content) property using a connector

Drag a connector from the body (main content) property of the CMS article item in the Data tab to the Rich Text Box on the screen.

4. Verify your settings

  1. Use the selector at the bottom of the Page Panel to switch between items displayed on the article page, and confirm that the box connected to the property updates correctly.

  2. Open Live Preview to check that everything displays correctly.

  3. Check how it looks on the published site.

    • Make sure all relevant CMS items have their status set to Published.

    • If everything looks good, publish your site from the Publish Panel.

    • If your site is already published, update your site to apply the changes to the live version.

Connect a Boolean property to a box element

1. Select a box element

Within a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List), select the box element you want to connect a property to.

2. Connect the Boolean property

  1. Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.

  2. Use a connector to link the box to the Boolean property.

  3. In the [Settings] tab of the right panel, set the display conditions.

3. Verify your settings

  1. Open the Page Panel.

  2. Use the selector at the bottom of the Page Panel to switch between items displayed on the article page, and confirm that the box connected to the property updates correctly.

  3. Open Live Preview to check that everything displays correctly.

  4. Check how it looks on the published site.

    • Make sure all relevant CMS items have their status set to Published.

    • If everything looks good, publish your site from the Publish Panel.

    • If your site is already published, update your site to apply the changes to the live version.

Connect a Color property to a box element

1. Select a box element

Within a dynamic element (Dynamic Page, Dynamic Modal, or Dynamic List), select the box element you want to connect a property to.

2. Connect the Color property

  1. In the right panel, navigate to the color field where you want the property to be applied.

  2. Click the color field to open the Color Palette.

  3. In the Color Palette, select the [CMS] tab.

  4. Select the Color property to connect it.

3. Verify your settings

  1. Open the Page Panel.

  2. Use the selector at the bottom of the Page Panel to switch between items displayed on the article page, and confirm that the box connected to the property updates correctly.

  3. Open Live Preview to check that everything displays correctly.

  4. Check how it looks on the published site.

    • Make sure all relevant CMS items have their status set to Published.

    • If everything looks good, publish your site from the Publish Panel.

    • If your site is already published, update your site to apply the changes to the live version.

Related Articles
How to Display a "NEW" Badge on CMS Items During a Specified Period
[AUTO_EDIT] CMS List
[AUTO_EDIT] CMS List Filters: Dynamic Filter
[AUTO_EDIT] Creating CMS article items in the CMS Dashboard
[AUTO_EDIT] Set up links from a CMS list to CMS article pages
Did this answer your question?