Point: What is Studio.Design CMS?
Studio.Design CMS is a Content Management System (CMS) feature that lets you structure, manage, and update content right within Studio.Design.
By combining models, items, and properties, you can manage frequently updated content like blogs and news articles all in one place.
For more on how Studio.Design CMS works, see What is Studio.Design CMS.
This article walks you through enabling Studio.Design CMS, creating article content, and publishing it on your site. Here are the steps:
Get started with CMS
Create article content in Studio.Design CMS
Adjust the design of CMS content in the Design Editor
Change the publish status of CMS items
Publish your site
Step 1. Get started with CMS
To use CMS, first enable Studio.Design CMS in your project.
For projects where CMS hasn't been enabled yet, you'll see a screen asking how you'd like to get started. Select [Start from blank].
* This screen won't appear for projects that are already using CMS.
Tips: Other ways to get started with CMS
Starting from a template
You can use template data that comes preloaded with CMS Models and CMS Items.
When you start from a template, dynamic pages and search pages with properties already linked are automatically created in the Design Editor. That means your content will show up on your pages as soon as you edit it in the CMS Dashboard.
We offer the following templates for different use cases:
Media / Blog
Team / Member Profiles
News / Announcements
Starting by importing data from WordPress
Select [Import XML file] at the bottom of the screen. For detailed steps, see Importing data from WordPress to Studio.Design.
Step 2. Create article content in Studio.Design CMS
Once CMS is enabled, you'll build the structure and contents of your article in the CMS Dashboard. Add and edit your CMS Model, CMS Items, and CMS Properties in that order.
For more on creating article content, see Creating CMS article items in the CMS Dashboard.
Create an article type model
A CMS Model is the framework that organizes your content data (CMS items). In this article, we'll create an article type model, which is designed specifically for creating articles.
In the CMS Dashboard, click the [+] button in the top left.
Select Article type from the dropdown menu.
Enter a model name and click [Create].
Add an article item and write the body
A CMS Item is a single piece of content data managed within a CMS Model. Add an article item to the article type model you just created, then fill in content like the body text.
Add a new article item to your model.
Choose your model from the list, then click the [Add Item] button.
You can also add an item using the [+ Add new] button in the top right corner.
Open the detail editing screen for the article item, then edit the Rich Text property to write the body.
Add CMS Properties
CMS Properties are the related pieces of information you add to each item. Add things you want to display on your site — such as the article title and cover image — as properties.
The various pieces of related info managed within an item are CMS Properties. Register the info you need — like article title, body, and cover image — as CMS Properties.
On the items list screen, click [+] and choose the property type.
Edit the property label, then click [Add].
Set the property value for each item.
Step 3. Create a dynamic page and link properties
Move to the Design Editor, add a dynamic page, and link your CMS properties to boxes.
Point: What is a dynamic page?
A dynamic page is a page type that displays items from a linked CMS Model, switching between them as needed. With a single page design, you can manage multiple article items together.
Add a dynamic page
In the Design Editor, add a dynamic page. Choose the article type model you created in Step 2 as the linked CMS Model.
By default, the new dynamic page will only have the "Title" property from the linked CMS Model (article model) placed on it.
Add boxes and link properties
Add boxes to display the properties you want, like the body text and cover image.
Link properties to each box using the [Data] tab in the right panel, or via the settings area that matches the box type. If the panel is closed, open the right panel.
For details on how to link properties, see Linking box elements to CMS properties in the Design Editor.
In the example below, the "Cover image" property is linked to an image box, and the "Body" property is linked to a rich text box.
Refine the box design
Adjust the design of your boxes — things like size, margins, and padding.
Related: Studio.Design basics and layout flow
Tips: Switching the CMS item shown on a dynamic page
Use the selector at the bottom of the Page panel to switch the article item displayed on your dynamic page. Check that property displays switch correctly across multiple items.
4. Change the publish status of CMS items
Studio.Design CMS includes a built-in publish management feature (publish status) for individual CMS items. Only items with a status of "Published" will appear on your live site.
You can also schedule a future publish date and time. For details, see CMS Properties: Status and publish date.
Note: CMS items whose status isn't "Published" won't appear on your site, even if the site itself is published.
5. Publish your site
Once you've finished tweaking your entire site — including the CMS content — you're ready to publish.
Note: Pages can't be published or updated individually. Make sure your entire site is ready before you hit publish.
With Studio.Design, you can publish your site on a custom domain or on a Studio.Design subdomain. For details, see the articles below.
Learn about Studio.Design CMS through video
The videos below walk you through the steps for publishing a news article using Studio.Design CMS in detail.
CMS blog article blog create new dynamic page