Hello and welcome.
In this tutorial, we’ll explore the Studio Editor and its main features.
By the end of this video, you’ll have a clear overview of this powerful workspace—one you’ll likely use on a daily basis.
Let’s start by creating an example post. Give it a name. Then select a template.
Your post is now created. To begin adding content, click Open Editor in the top right.
The Editor is the core workspace of Studio, Radiosphere’s CMS. It’s designed to help you create and manage content for your website and apps—whether that’s pages, posts, shows, podcasts, or any other content type in your project.
It provides a flexible set of components and features to help you design your content exactly the way you need.
Now, let’s take a look at how the interface is structured.
At the top, in the header, you’ll find two main tabs: Content and Settings.
Let’s dive into the Content tab, where you build and edit your content.
In the center, you’ll find the main editing view, also called what-you-see-is-what-you-get view. It updates in real time as you make changes, giving you an accurate preview of how your content will appear across different device sizes.
The panel on the right lists all the attributes specific to your document. Here, you can edit its title, subtitle, add tags, authors, and other metadata.
On the left, you’ll find the Elements Tree. It shows all the elements that make up your content, organized in a hierarchical structure.
You can collapse or expand the entire structure using the button at the top-right of the tree.
Selecting an element from the tree highlights it in the main center view. Click on it to start editing.
To add a new element, click Add Element and choose the element you want to add.
In this example, we’ll add an Image element.
An image placeholder is now added to the preview.
When you select an element—either from the tree or directly in the preview—the right panel updates to show settings specific to that element. Depending on the selected element, you may see up to three tabs: Setup, Style, and Conditions.
The Setup tab contains all available attributes for the selected element. In this example, we’re using an Image element so we can upload an image, define the type of placeholder or change its aspect ratio.
The Style tab lets you control the visual appearance of the selected element in your post, including size, spacing, borders, and shadows. We’ll explore this section in more detail in another video.
The Conditions tab lets you control when and where the selected element is displayed. This can be based on time, user, or device conditions. For example, you can hide an element on weekends, show it only to registered users, or disable it on mobile devices. Elements with conditions are highlighted as such in the Elements tree.
When you deselect the element, the right panel returns to its original state: displaying the general attributes of your document.
Before publishing, you may want to review your document's settings. To do so, open the Settings tab in the header. This is where you configure how your content is described and displayed outside the Editor, including in search engines and on social media.
Once ready, click Publish in the top right to make it visible to everyone.
You now have a clear understanding of how the Editor is structured. In the next videos, we’ll explore each area in more detail and show you how to make the most of it.