Designer Courses / Getting Started

Studio Overview

In this lesson, we will explore the Ceros studio, which is where you will produce all of your interactive content. To get started, navigate to admin.ceros.com, and either create a new experience or click into an existing experience in your projects folder.

Once in the studio, the design toolbar across the top should look familiar if you use tools like photoshop or illustrator. The tools here allow you to select items on the canvas, pan around, add anchors to create different navigable sections, add text, draw lines and shapes, add vector icons, create different areas for the user to interact with (hotspots), add images and videos and embed third-party content like Vimeo, Google Maps, social posts and more.

Along the left-hand side of the studio, you can add additional pages and navigate between pages of an experience. We will automatically add default page navigation buttons once you add an additional page to your Experience. This default navigation can be customized in the theme panel of your Ceros studio. Moving to the bottom of the studio, you can specify the width, fold and height of an experience. The fold height is the portion of the screen visible before a user has to scroll. By default, the canvas will be set to 1280 pixels wide by 720 pixels high, which is a great size for laptop viewing however, these dimensions can be customized to fit any device, web page or browser window. Additionally, Ceros will automatically scale to fit whatever screen size the user visits from.

In the top right of the studio, you can preview your experience to see live updates to your content as you work. Additionally, you can publish your experience which will move it over to our master server, and provide you with a few different options for embedding and sharing your content. Once published, any additional changes you make in the studio will not be visible on the live link until you republish.

The theme menu is where you can customize the background color or image for your experience. This image will fill the viewport behind your Ceros experience. You also have the ability to customize the navigation arrow colors, enable swipe to navigate on touchscreen devices, show or hide the default navigation arrows, or create a carousel option to continuously scroll through the different pages of your experience.

Theme menu

In the settings panel you can customize various elements of your experience like the title and URL slug, toggle optimize loading on and off to either serve your experience faster but with lower resolution images initially – or slower with only high-resolution images. You can also specify a fallback URL for any user visiting from an unsupported browsers in this menu.

The SEO properties allow you to customize the keywords, meta description or canonical URL for an experience. And finally, the custom HTML field allows you to add additional functionality to an experience like advanced analytics tracking or marketing automation pixels.

Layer and Inspector Panel

The two floating panels in your studio allow you to arrange the different elements and objects on your canvas, and where you can start bringing your objects to life with interactions and animations. In the layers panel, you can add folders to organize your studio, group multiple objects together, and sync commonly used objects. For each folder, group or object in the layers panel, you have the ability to toggle the visibility on or off in order to create unique interactions to show and hide these objects.

In the inspector panel, the available menus will contextually change depending on the object you currently have selected. Moving from left to right, the layout panel lets you adjust the different dimensions and locations of an object – as well as align and distribute objects. The shape tab lets you specify the color, border, shadow, and opacity of an object. The text menu allows you to edit the characteristics of your text like alignment, font, color, size and more. The interactions panel is where you can add in click or hover states to your experience. Be sure to check out this Interactions lesson to learn more. The animations tab is where you can specify the different entry, exit, and attention seeker animations to add character and movement to your piece. Be sure to check out our Animations lesson to learn how to set these up. And finally the settings menu, which provides advanced customization based on the element you have selected like autoplay for videos or an HTML editor for embedded 3rd party objects.

The last piece of the studio to point out is the support widget, which provides direct access to our support team who help you with any questions or concerns you may have.

 

Studio Overview