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 review one of the many ways you can create an interactive timeline in Ceros. As you can see in the final example, we have a simple timeline with a few different points we can interact with. When you click on any of the years beneath the timeline, the current popup is hidden and a new one shown for each year. This is a great way to show a large amount of information in a much more digestible format. To follow along with this lesson, download the build along experience to your Ceros account.
As you can see, in the build-along experience, we’ve already added the base for the timeline, we have 4 points on our timeline labeled in years as 1960, 1980, 2000, and 2020–and we’ve created four popup folders consisting of text and an image for each year. In this build along experience were using images of televisions for each year but you can easily swap your own images for these placeholders using the Replace Image tool.
To ensure our interactions are going to work as planned, we will need to place all of the popup folders into a single parent folder in our layers panel which we will target with our interaction. So let’s select each of the 4 popups folders and click on the folder button in the bottom left hand corner of the layers panel to place them in one large folder. Don’t forget to name this folder Popups.
The reason we are adding each of these popups to one large folder is so that our interaction can make sure only one popup from that folder is showing at any point in time while simultaneously hiding the others. Lets turn on the visibility of our 1960 popup, and turn the others off by clicking the eyeball icon next to those layers.
Now that our experience is set up, we can go in and add our interactions and animations. To make our lives a bit easier, were going to create one interaction to start and then simply duplicate it for all of the other popups. Select the hotspot tool, and draw a new hotspot over the 1960 spot on the timeline. We’ll name this hotspot Show Popup 1960. On the interact tab, let’s apply a click trigger, with a Show Target and Hide Others action, and then select 1960 popup in the popups folder.
To save a bit of time, let’s duplicate this hotspot 3 times for each of the other years on our timelines, and rename those accordingly. So we can rename those Show Popup 1980, Show Popup 2000, and Show Popup 2020 respectively.
Since we’ve already set up the interaction in a previous step, all we need to do is adjust each one to target the appropriate popup. So on each hotspot, navigate to the interact tab and edit the interaction to target the appropriate popup folder. Also, make sure you deselect the Popup 1960 folder in these interactions as well so you’re not targeting multiple popup folders at once. So on our second popup hotspot, lets navigate to the interact tab and edit the interaction to target Popup 1980, and deselect Popup 1960. On the 3rd popup hotspot let’s edit it to target Popup 2000, and on the 4th popup, let’s edit the interaction to target popup 2020.
In the second video lesson, we’ll add some subtle animations to our popups to polish off the experience. Let’s open up each popup folder in our layers panel so we can see all of our layers. Now, let’s select the television image in the 1960 popup and navigate to the animate tab. Here, we’ll add an On View- Rock In animation with the default settings and timing, as well as an On Hide- Rock Out animation with the same settings.
Now, right click on that image and select Copy Animations, and we’re going to right click and Paste Animations onto each other Television image in our layers panel, so we are pasting it onto the 3 other TV layers inside the other popup folders.
Let’s also select each textbox in all of our popups by holding down Command or Control on our keyboard and selecting those layers in our layers panel. We can apply a standard Fade In and Fade Out Animation to these.
Feel free to add in any more animations to make this experience your own. When you’re finished, go ahead and load up the preview window to see how our timeline works now. You can experiment with different effects and your own assets to customize the timeline for your own content.
In this lesson, we’ll review one of the many ways you can create an interactive timeline in Ceros. As you can see in the final example, we have a simple timeline with a few different points we can interact with. When you click on any of the years beneath the timeline, the current popup is hidden and a new one shown for each year. This is a great way to show a large amount of information in a much more digestible format. To follow along with this lesson, download the build along experience to your Ceros account.
As you can see, in the build-along experience, we’ve already added the base for the timeline, we have 4 points on our timeline labeled in years as 1960, 1980, 2000, and 2020–and we’ve created four popup folders consisting of text and an image for each year. In this build along experience were using images of televisions for each year but you can easily swap your own images for these placeholders using the Replace Image tool.
To ensure our interactions are going to work as planned, we will need to place all of the popup folders into a single parent folder in our layers panel which we will target with our interaction. So let’s select each of the 4 popups folders and click on the folder button in the bottom left hand corner of the layers panel to place them in one large folder. Don’t forget to name this folder Popups.
The reason we are adding each of these popups to one large folder is so that our interaction can make sure only one popup from that folder is showing at any point in time while simultaneously hiding the others. Lets turn on the visibility of our 1960 popup, and turn the others off by clicking the eyeball icon next to those layers.
Now that our experience is set up, we can go in and add our interactions and animations. To make our lives a bit easier, were going to create one interaction to start and then simply duplicate it for all of the other popups. Select the hotspot tool, and draw a new hotspot over the 1960 spot on the timeline. We’ll name this hotspot Show Popup 1960. On the interact tab, let’s apply a click trigger, with a Show Target and Hide Others action, and then select 1960 popup in the popups folder.
To save a bit of time, let’s duplicate this hotspot 3 times for each of the other years on our timelines, and rename those accordingly. So we can rename those Show Popup 1980, Show Popup 2000, and Show Popup 2020 respectively.
Since we’ve already set up the interaction in a previous step, all we need to do is adjust each one to target the appropriate popup. So on each hotspot, navigate to the interact tab and edit the interaction to target the appropriate popup folder. Also, make sure you deselect the Popup 1960 folder in these interactions as well so you’re not targeting multiple popup folders at once. So on our second popup hotspot, lets navigate to the interact tab and edit the interaction to target Popup 1980, and deselect Popup 1960. On the 3rd popup hotspot let’s edit it to target Popup 2000, and on the 4th popup, let’s edit the interaction to target popup 2020.
In the second video lesson, we’ll add some subtle animations to our popups to polish off the experience. Let’s open up each popup folder in our layers panel so we can see all of our layers. Now, let’s select the television image in the 1960 popup and navigate to the animate tab. Here, we’ll add an On View- Rock In animation with the default settings and timing, as well as an On Hide- Rock Out animation with the same settings.
Now, right click on that image and select Copy Animations, and we’re going to right click and Paste Animations onto each other Television image in our layers panel, so we are pasting it onto the 3 other TV layers inside the other popup folders.
Let’s also select each textbox in all of our popups by holding down Command or Control on our keyboard and selecting those layers in our layers panel. We can apply a standard Fade In and Fade Out Animation to these.
Feel free to add in any more animations to make this experience your own. When you’re finished, go ahead and load up the preview window to see how our timeline works now. You can experiment with different effects and your own assets to customize the timeline for your own content.