Studio CMS is a content management system (CMS) built right into Studio.Design. It's handy when you need to keep managing pages that share the same design — like news, blog posts, job listings, or case studies.
This article walks you through what Studio CMS does and how it works.
Tips: What is a CMS?
CMS stands for Content Management System. It's a way of managing your website's content in a database, so you can add and edit content without knowing anything about design or coding. It's a great fit for content that follows the same design and gets updated regularly — think news, blog posts, and case studies.
How Studio CMS works
With Studio CMS, you create and manage your data in the CMS Dashboard, and build and design your pages in the Design Editor. Here's what you do in each place:
Note: Creating data in the CMS Dashboard alone won't make it appear on your site. Content only shows up once you've connected it in the Design Editor.
| Where you work | What you do there |
Creating and managing data | Creating and managing CMS Models and CMS Items / Setting up CMS Properties / Creating CMS Collections | |
Building and designing pages | Creating Dynamic Pages, Dynamic Modals, and Dynamic Lists / Setting up page layouts and designs / Connecting box elements to properties |
Getting started with Studio CMS
To use the CMS features in Studio.Design, start by turning on Studio CMS for your project.
If the project doesn't have CMS turned on yet, you'll see a screen asking how you'd like to get started. Select [Start from scratch].
* This screen won't appear for projects that are already using the CMS.
Tips: Other ways to get started with the CMS
Starting from a template
You can use template data that comes with CMS Models and CMS Items already set up.
When you start from a template, Dynamic Pages and search pages with properties already connected are created for you in the Design Editor — so all you need to do is edit your content in the CMS Dashboard, and it'll show up on your pages right away.
We offer the following templates, depending on what you need:
Media & Blog
Member profiles
News & Announcements
Starting with data brought over from WordPress
Select [Import XML file] at the bottom of the screen. For step-by-step instructions, see Importing data from WordPress into Studio.Design.
Creating and managing data: the CMS Dashboard
You create and manage your Studio CMS content in a database called the CMS Dashboard. You can get there from either the Project Dashboard or the Design Editor.
How content data is structured
Content data is made up of these three parts. You'll set them up in this order: CMS Model ⇨ CMS Item ⇨ CMS Property.
Type of data | What it is |
A single piece of content | |
A group that holds CMS Items together | |
Additional information you can add to a CMS Item |
CMS Models
A CMS Model is a group that holds CMS Items together. When you start creating content data, the CMS Model comes first.
There are four model types. Pick the one that fits what you're building.
For more details, see CMS Models.
Type | What it's for |
Built for writing articles | |
Ideal for managing members | |
Ideal for managing categories, tags, and similar data |
CMS Items
A CMS Item is a single piece of content managed within Studio CMS. Once you've created a CMS Model, you can start adding items to it.
For more details, see CMS Items.
CMS Properties
CMS Properties are pieces of information you can add to a CMS Item. Beyond the required default properties, you can add all kinds of properties to give your items more detail.
For more details, see CMS Properties.
CMS Collections
A CMS Collection is a group of items you hand-pick from a specific CMS Model. It's great for things like featured article lists or displaying content in ranked order.
For more details, see CMS Collections.
Building and designing pages: the Design Editor
You set up your page layouts and designs in the Design Editor.
There are three features you'll use. For each one, you choose which CMS Model to pull from, then connect properties to box elements so your content appears on the page.
Feature | What it does | Common uses |
Displays the details of one CMS Item per page | Article detail pages, job detail pages | |
Displays the items in a CMS Model as a list | Article lists, member lists | |
Displays the details of a CMS Item in a modal | Product detail modals |
Showing your Studio CMS content on your site
Creating data in the CMS Dashboard alone won't make it appear on your site. You'll need to make two connections in the Design Editor:
Step 1: Choose the data source
Pick the CMS Model you want to pull from for dynamic elements like Dynamic Pages and Dynamic Lists (CMS Lists).
Step 2: Connect properties to box elements
Connect the properties from the CMS Model you chose in Step 1 to each box element on the screen. This is where you decide which content appears in which box.
The process works a little differently for Dynamic Pages and Dynamic Lists (CMS Lists):
Feature | Choosing the data source | Connecting to box elements |
Dynamic Page | Choose the CMS Model to display on the page | Connect each box on the page to the property you want it to show |
Choose the CMS Model to display in the list | Connect each box in the list to the property you want it to show |
You make these connections in the right panel — either in the settings area for that type of box element, or from the [Data] tab. If the panel is closed, go ahead and open the right panel.
For step-by-step instructions on connecting box elements, see Connecting box elements to CMS Properties in the Design Editor.
