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.
With Ceros, you can reveal additional content when a user takes an action in your experience. To get started with this lesson, go ahead and upload the build-along experience to your account.
To create this effect, we need to add a hover state to the object. This way, when the user hovers their cursor over the button, it will trigger the state of the button to change.
You can see in our layers panel that our button consists of a square shape and text box. The square shape has a dark opaque fill color—and the text is colored white. Using Object States, we can easily set these two objects to switch colors when a user hovers over the button.
We’re going to set this up so that our square shape turns white, and our text turns blue, when we hover over the button. We can start by selecting our square shape, navigating to the design tab and clicking the plus sign next to ‘States’. The current state of our square shape will be set as the default state, let’s add a transition here with the standard timing to ensure this looks smooth. Now, in the drop down we can add a Hover state— let’s also add a transition here to match our default state. Further down in our design tab we can change the color of our hover state to white, and set the opacity to 100%. Now, let’s go through the same process for the text box. This time we’re going to change the color to a dark blue. Feel free to use the color picker on the canvas so that your text matches the experience. After we’ve added our hover states to the square shape and the text box, we’ll want to select the entire group and make sure to click “Use group as trigger”; this will trigger all of the hover states in the group at the same time. And it’s actually that simple. Now when you preview your experience, you will see when you hover over the button, the button changes to the Hover state that you’ve applied.
Now we can build out our interaction to show a popup. To start, let’s ensure the popup image’s visibility is turned off by default. And then navigate over to our original button. As you can see in the subsequent menu, you can add as many different interactions as you want. In this case we will only have two but feel free to combine multiple actions and triggers to achieve your desired effect. In a previous step, we made sure to check off “use group as trigger” to trigger the hover object state of the button. Checking this button automatically creates two interactions on the button—we’re going to edit the existing on click interaction. Let’s adjust it to have an on click trigger with a show action and then choose our popup folder as the target. Note that you’ll also want to deselect the button group.
To give your user a way to exit the window, turn the visibility of the popup group back on, and add a hotspot over the “Close” icon. On this hotspot we can apply an interaction that says “On Click”- “Hide”- “Popup group”.
Once you’ve finished, go ahead a turn off the visibility of the popup and then navigate back over to your preview to see if your effect works as intended.
Lastly, let’s take a look at the difference between the Go to URL and Open URL in Lightbox interactions. Be sure to download the build along experience to your account.
On the build along experience, select the hotspot on page 1 and navigate to the Interact tab. Choose an “On Click” trigger and “Go to URL” as the action. Here you can enter any URL that you want to link to.
The second option keeps your users within the Ceros experience, so go ahead and set up the interaction the exact same way, but choose Open URL in Lightbox as the interaction.
Taking a look at the preview, you can see how both of these actions can fit the different needs of your content. If you have any questions on the interactions in this lesson, please feel free to reach out via the support chat within Ceros.
With Ceros, you can reveal additional content when a user takes an action in your experience. To get started with this lesson, go ahead and upload the build-along experience to your account.
To create this effect, we need to add a hover state to the object. This way, when the user hovers their cursor over the button, it will trigger the state of the button to change.
You can see in our layers panel that our button consists of a square shape and text box. The square shape has a dark opaque fill color—and the text is colored white. Using Object States, we can easily set these two objects to switch colors when a user hovers over the button.
We’re going to set this up so that our square shape turns white, and our text turns blue, when we hover over the button. We can start by selecting our square shape, navigating to the design tab and clicking the plus sign next to ‘States’. The current state of our square shape will be set as the default state, let’s add a transition here with the standard timing to ensure this looks smooth. Now, in the drop down we can add a Hover state— let’s also add a transition here to match our default state. Further down in our design tab we can change the color of our hover state to white, and set the opacity to 100%. Now, let’s go through the same process for the text box. This time we’re going to change the color to a dark blue. Feel free to use the color picker on the canvas so that your text matches the experience. After we’ve added our hover states to the square shape and the text box, we’ll want to select the entire group and make sure to click “Use group as trigger”; this will trigger all of the hover states in the group at the same time. And it’s actually that simple. Now when you preview your experience, you will see when you hover over the button, the button changes to the Hover state that you’ve applied.
Now we can build out our interaction to show a popup. To start, let’s ensure the popup image’s visibility is turned off by default. And then navigate over to our original button. As you can see in the subsequent menu, you can add as many different interactions as you want. In this case we will only have two but feel free to combine multiple actions and triggers to achieve your desired effect. In a previous step, we made sure to check off “use group as trigger” to trigger the hover object state of the button. Checking this button automatically creates two interactions on the button—we’re going to edit the existing on click interaction. Let’s adjust it to have an on click trigger with a show action and then choose our popup folder as the target. Note that you’ll also want to deselect the button group.
To give your user a way to exit the window, turn the visibility of the popup group back on, and add a hotspot over the “Close” icon. On this hotspot we can apply an interaction that says “On Click”- “Hide”- “Popup group”.
Once you’ve finished, go ahead a turn off the visibility of the popup and then navigate back over to your preview to see if your effect works as intended.
Lastly, let’s take a look at the difference between the Go to URL and Open URL in Lightbox interactions. Be sure to download the build along experience to your account.
On the build along experience, select the hotspot on page 1 and navigate to the Interact tab. Choose an “On Click” trigger and “Go to URL” as the action. Here you can enter any URL that you want to link to.
The second option keeps your users within the Ceros experience, so go ahead and set up the interaction the exact same way, but choose Open URL in Lightbox as the interaction.
Taking a look at the preview, you can see how both of these actions can fit the different needs of your content. If you have any questions on the interactions in this lesson, please feel free to reach out via the support chat within Ceros.