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 like blogs and news in one place.
For more on how Studio.Design CMS works and how to use the basics, check out the articles below.
Display writers' social media info in the CMS
This article walks you through how to set up different social media icons (such as Instagram, X, and Facebook) and links for each writer item, based on writer info managed in Studio.Design CMS.
Once set up, clicking a writer's social media icon in the CMS list takes you directly to that writer's social media account page.
Step 1. Create a CMS model (User Type) to manage writer info
Create a User Type CMS model to manage your writer info, then add writer items.
In the CMS dashboard, create a new User Type model.
Inside the model you just created, add items for each writer.
Step 2. Add properties for social media
Add text properties to store the URLs of the social media accounts each writer uses.
Open the User Type model, and click the "+" button to add a text property.
Name the property something clear like "instagram_url" or "x_url" so it's easy to tell which social media platform it represents.
Repeat for each social media platform you want to include.
Step 3. Add the social media URLs
Enter the URLs of each writer's social media accounts into the corresponding writer items.
Enter URLs into the matching properties for each platform the writer uses, such as Instagram, X (formerly Twitter), and Facebook.
It's fine to leave any properties blank for platforms the writer doesn't use.
Step 4. Place the CMS list on your page
Add a CMS list to a page in the design editor to display your writer info as a list.
Open the design editor.
Open the page where you want to display the writer list.
Open the Connect panel in the left sidebar, then add a dynamic list (CMS list) connected to the User Type model you created in Step 1, placing it where you want the writer list to appear.
If you need to change the connected data, see Change the connected data.
Step 5. Add icons and set up links inside the list
Add social media icons inside the list and link them to the properties you created in Step 2.
Add an icon box and change it to the social media icon you want to use.
Move it into the layer where you want the icon placed.
Use the right panel to adjust the icon's size, color, background color, spacing, and other settings to make it look clean and easy to recognize.
Select the icon you added, then open the [Settings] tab in the right panel.
If the panel is closed, open the right panel.
Click the [Link] input field.
Click the [+] that appears, then choose your social media property from [Select from CMS property].
Pick the URL property that matches each social media icon (for example, instagram_url).
Step 6. Set up display conditions
By setting display conditions, icons only show up for writer items that have a social media URL filled in. If no URL is registered, the icon is automatically hidden.
Select the social media icon.
Open the [Settings] tab in the right panel.
If the panel is closed, open the right panel.
Under Display condition, set the condition to "property is set" and choose the matching social media URL property (for example, facebook_url).
conditional display