Get to Know Ceros
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Understanding Ceros Analytics
In this lesson, we'll overview the Ceros analytics dashboard and how you can better understand the key performance indicators that can help you improve your content.
Search Engine Optimization (SEO) and Ceros
In this lesson, we'll dive into the various tools in Ceros that can help you optimize your content for search.
Importing Your Design Files
In this lesson, we'll walk through how to import design files from Photoshop, Illustrator, and Sketch files into Ceros.
Theme and Settings Panel
In this lesson, we'll review the different customization options available within the Theme Menu and Settings Panel.
Creating Buttons and Popups
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Creating Mobile Variants Using Adaptive Layouts
In this lesson, we'll take a look at how you can easily create different variants of an experience for Desktop, Tablet, and Mobile devices using the Global Layouts panel.
Create a Carousel
In this lesson, we'll review the steps to creating an image carousel using the Cycle Next and Cycle Previous interactions.
Creating Interactive Maps
In this lesson, we'll review one of the many ways you can create an interactive map in Ceros.
Creating Accessible Content in Ceros
In this lesson, we'll walk through how to leverage the accessibility tools and features in the Ceros studio.
Using Object States for Data Viz
In this lesson, we'll review one of the ways you can create an interactive Bar Chart in Ceros using Object States.
Creating Charts in ChartBlocks
In this lesson, we'll review how to create charts and graphs in ChartBlocks.
How to Use MarkUp
In this quick lesson, we'll walk through how to use MarkUp to streamline the process of giving and receiving design feedback.
Embedding 3rd Party Content and Forms
In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.
Creating Interactive Charts
In this lesson, we'll take a look at how to create animated, interactive charts in Ceros.
Creating an Interactive Menu Bar
In this lesson, we'll take a look at how to create an interactive menu bar to set up some basic navigation within your experience.
Advanced Carousel
In this lesson, we'll build off of the previous carousel lesson to create a more advanced experience using the Show Target and Hide Others interactions.
Creating an Interactive Timeline
In this lesson, we'll review one of the many ways you can create an interactive timeline in Ceros.
Create a Looping Video Background
In this lesson, we'll explore how to make any video file function as a background element - as well as how to layer additional assets overtop for more unique visualizations.
Gating Content with Hubspot and Marketo Forms
In this lesson, we'll take a look at how you can gate multipage eBooks and long scrolling infographics using Hubspot and Marketo forms.
Creating a Slideshow
In this lesson, we'll cover how to create an automatic image slideshow within your experience.
In this Lesson, we’ll take a look at how you can easily create different variants of an experience for different device types.
By default, Ceros will scale to fit whatever device your user is viewing the content on, but we also allow our users to tailor the design of their experiences for desktop, tablet, and mobile devices.
When you first create an experience, you will always start with the desktop version – which you can see reflected in the Global Layout window. You typically should finalize this initial design before moving on to any of the other variants – to ensure you’re not duplicating work.
Once you have finished this initial design, you can choose to generate either a Tablet version or Mobile version to customize. Whichever you choose, you’ll see the entire canvas size is automatically adjusted to tablet or mobile dimensions, however we will not attempt to reflow your assets. This leaves the design control in your hands.
Keep in mind that in some cases, customizing a variant may be as simple as resizing the content, and in other cases you may want to do a complete redesign – it’s up to you to decide what works best for your piece.
To reflow your content, first select all of the assets and manually center them on your canvas. From there you can go in and begin making individual adjustments such as moving around your text, re-stacking elements, and maybe even deleting unnecessary sections. Note that if you select a text object, the selection color will be different. This is because your experience will automatically sync any text changes made between variants to save you time while editing. This is only to the characters themselves, so you can still customize the font styles if necessary (you can also turn off text syncing altogether in the inspector panel).
It’s also critical to make sure you are adjusting any faulty interactions that broke when converting to a touch device variant. You’ll see that any hotspots or objects that have “On Hover” interactions on them will have a red dot next to them in the layers panel. This means that this interaction is brokensince you won’t be able to Hover on a touch device. So make sure to adjust any Hover or rollover interactions for the variants you create.
If you have any questions on creating a mobile or tablet variant or have trouble optimizing your versions, feel free to reach out via the support chat and we’ll be happy to help.
In this Lesson, we’ll take a look at how you can easily create different variants of an experience for different device types.
By default, Ceros will scale to fit whatever device your user is viewing the content on, but we also allow our users to tailor the design of their experiences for desktop, tablet, and mobile devices.
When you first create an experience, you will always start with the desktop version – which you can see reflected in the Global Layout window. You typically should finalize this initial design before moving on to any of the other variants – to ensure you’re not duplicating work.
Once you have finished this initial design, you can choose to generate either a Tablet version or Mobile version to customize. Whichever you choose, you’ll see the entire canvas size is automatically adjusted to tablet or mobile dimensions, however we will not attempt to reflow your assets. This leaves the design control in your hands.
Keep in mind that in some cases, customizing a variant may be as simple as resizing the content, and in other cases you may want to do a complete redesign – it’s up to you to decide what works best for your piece.
To reflow your content, first select all of the assets and manually center them on your canvas. From there you can go in and begin making individual adjustments such as moving around your text, re-stacking elements, and maybe even deleting unnecessary sections. Note that if you select a text object, the selection color will be different. This is because your experience will automatically sync any text changes made between variants to save you time while editing. This is only to the characters themselves, so you can still customize the font styles if necessary (you can also turn off text syncing altogether in the inspector panel).
It’s also critical to make sure you are adjusting any faulty interactions that broke when converting to a touch device variant. You’ll see that any hotspots or objects that have “On Hover” interactions on them will have a red dot next to them in the layers panel. This means that this interaction is brokensince you won’t be able to Hover on a touch device. So make sure to adjust any Hover or rollover interactions for the variants you create.
If you have any questions on creating a mobile or tablet variant or have trouble optimizing your versions, feel free to reach out via the support chat and we’ll be happy to help.