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.
Transcript
Ceros experiences usually consist of images, videos, icons, and more, but how do you get those assets from your desktop into Ceros? In this lesson, we’ll explore just that and how to replace, duplicate, and manipulate your assets in the studio. To follow along with this lesson, go ahead and upload the build-along experience to your account.
Since we are working with an existing template, most of the changes we will make will simply be to replace an existing image or video. However, you can pull in your own assets if you want to create an entirely new section. The recommended way to get your content into Ceros is to drag and drop any images, gifs, or video files from your desktop directly onto the canvas. As you can see, these assets will populate in the layers panel as well as on your canvas. They can then can be moved around to fit your design.
In addition to dragging and dropping your assets onto canvas, you can copy and paste assets from external sources like Photoshop, Illustrator, and Sketch. You also have the ability to copy and paste objects from one Ceros experience and paste them into another. This helps ensure continuity between multiple experiences or just helps save some time during the build process.
To use the “Replace Asset” feature we mentioned earlier, you can simply right-click on the object you want to replace, then select ”Replace Image” from the drop-down menu. This will place the new image or video in the exact location of the original and will apply any animations or interactions from the original file. If the image doesn’t fit in your design, you can either resize it or right-click on the image to crop it.
Beyond changing the layout or size of your asset, you can adjust image attributes like brightness, contrast, hue, and more directly from the design tab. To access further editing tools, right-click on an image. In this drop-down menu, you can flip the image and remove the background to create transparent backgrounds.
As you add assets to your canvas, it’s important to try to stay as organized as possible. When applicable, you can group individual elements together or simply organize multiple objects into different folders. This will become increasingly important as we move on to creating interactions and animations in a later lesson.
In the next video, we will explore how to animate objects on the canvas.
Transcript
Ceros experiences usually consist of images, videos, icons, and more, but how do you get those assets from your desktop into Ceros? In this lesson, we’ll explore just that and how to replace, duplicate, and manipulate your assets in the studio. To follow along with this lesson, go ahead and upload the build-along experience to your account.
Since we are working with an existing template, most of the changes we will make will simply be to replace an existing image or video. However, you can pull in your own assets if you want to create an entirely new section. The recommended way to get your content into Ceros is to drag and drop any images, gifs, or video files from your desktop directly onto the canvas. As you can see, these assets will populate in the layers panel as well as on your canvas. They can then can be moved around to fit your design.
In addition to dragging and dropping your assets onto canvas, you can copy and paste assets from external sources like Photoshop, Illustrator, and Sketch. You also have the ability to copy and paste objects from one Ceros experience and paste them into another. This helps ensure continuity between multiple experiences or just helps save some time during the build process.
To use the “Replace Asset” feature we mentioned earlier, you can simply right-click on the object you want to replace, then select ”Replace Image” from the drop-down menu. This will place the new image or video in the exact location of the original and will apply any animations or interactions from the original file. If the image doesn’t fit in your design, you can either resize it or right-click on the image to crop it.
Beyond changing the layout or size of your asset, you can adjust image attributes like brightness, contrast, hue, and more directly from the design tab. To access further editing tools, right-click on an image. In this drop-down menu, you can flip the image and remove the background to create transparent backgrounds.
As you add assets to your canvas, it’s important to try to stay as organized as possible. When applicable, you can group individual elements together or simply organize multiple objects into different folders. This will become increasingly important as we move on to creating interactions and animations in a later lesson.
In the next video, we will explore how to animate objects on the canvas.