Transcript
If you’re new to Ceros, this is the place to start. Today, we’re walking through Studio and how to go from a blank canvas to a published experience, no code required.
Creating a Project
Starting in the Home page of the Ceros admin, you’ll see the “Create” button to quickly get started from a template, blank canvas, import, or create a folder. You’ll also see some popular template options available directly below the create button. These just scratch the surface though, we’ll get into templates more later. Over in the experience page, you’ll see… you guessed it… all of your experiences. These can, and most likely should be organized into folders to help keep things tidy. I’ll open up one of my experiences here, and then hop into Studio.
Navigating Studio
Once you're in Studio, you'll see a clean workspace with a few key areas: On the left side we have the toolbar, with text, shapes, images, and much more. I want to call out the asset library tool; this opens your asset library window, where you can view your internal assets that you or members of your team have saved, as well as all of the Ceros assets available. Here, you can simply drag and drop buttons, menus, carousels, or other highly used pieces of content directly onto your canvas.
Beneath the search bar, you can select your canvas; this is where you can adjust the size, scaling, and fill color quickly. A little further down we have the Layers panel, open by default, it’s where you can organize your content. Besides being able to make sure that your text is sitting above a background shape and fully visible, the layers panel is where you manage your folders and groups.
Folders are used in the Layers panel to organize and label your assets, which great for grouping by section or content type.
Groups are used to bundle multiple elements together. You can move or animate them as one for example, and they become crucial for interactions that are applied to multiple elements like a carousel, or a popup button.
Folders and groups serve different purposes, but both help keep your design clean and manageable. There’s also the pages panel to manage multi-page experiences. Over on the right side of Studio we have 3 main tabs;
The Design Tab, where you can customize the style of your content by changing the size, shape, color, image effects, and much more.
The Interact Tab will add on click, on hover, or on view interactions to your content. With your asset selected, choose a trigger, then select an action. You can apply interactions to individual elements, or groups for easy control. It’s how you turn passive and static designs into something people can explore and interact with.
The last tab is the animate tab where you can apply on view and on hide animations. You’ll be able to choose from a variety of animation styles and effects, along with all the options needed to really customize things to perfectly fit your experience.
Collaboration & Editing
To jump between applications, click the Switcher icon in the top right:
Editor for making quick content updates, and MarkUp for giving and receiving feedback.
Additional Options
You’ve also got the Settings panel to further fine tune your experience, seo, social, and accessibility options.
Next to that, there’s the theme panel where you can set default background colors, enable options to navigate pages, or even set your multi-page experience to auto advance as a carousel. View options allow you to show or hide anchors, rulers, guides, grids, and more. The desktop icon in the top center will have additional icons next to it to create tablet and mobile variants of your experience. And right beneath that, you’ll see a new toolbar that appears when you select an object on your canvas.
Contextual Toolbar
This is the contextual toolbar. As you build, the Contextual Toolbar changes based on what’s selected, so you always have the most useful tools right at your fingertips.
For text, you have AI-generated suggestions, hyperlinks, groups, layer position, copy and paste animations, and add to the asset library.
Images will allow you to crop, replace, or remove backgrounds, along with the standard group, layer position, animations, and asset library tools.
Publishing Your Experience
You can also share the experience with members of your team and give them creator, editor, reviewer, or viewer permissions.
Before you publish, let’s check out the preview window. This allows you to make sure all of your interactions and animations are functioning properly. It’s a good idea to regularly preview your experience as you build.
Once everything is ready, click Publish to get a shareable URL or an embed code. If you’ve made changes after publishing, simply click Update, and they’ll go live instantly.
Wrapping Up
And that’s your Studio tour.
Now you’ve got everything you need to start building interactive content with total creative freedom.
We covered a lot today, and if there’s anything you want to learn more about, be sure to check out educate.ceros.com, where you can find articles, courses, webinars, and videos covering everything we went over today in greater detail.
And as always, if you can imagine it, you can make it in Ceros.