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
Carousels are a great way to incorporate more information, images, and videos into your piece without having a cluttered experience. Using the “cycle next” and “cycle previous” interactions, you can easily create custom carousels with any combination of assets.
To follow along with this lesson, go ahead and upload the build-along experience to your account. As you can see in the final experience, we are going to create a basic image carousel that will cycle through three different images when the user clicks on the arrows.
To get started, let’s go ahead and finish up the design of our piece. A few things we are missing are the arrows to navigate back and forth, as well as the hotspots to allow the user to interact with and trigger the cycle actions. Go ahead and search for an arrow you like from the media library, or upload your own arrow icons.
You can always duplicate one for the other side and simply hold shift over the corner to rotate it in 45-degree increments. Alternatively, you can right-click on a duplicated arrow icon and select “Flip Horizontal” to achieve this quickly. While we’re at it, let’s also create two new hotspots over top of these icons to ensure the user has a large area to click on.
Moving over to the Layers panel, you’ll want to organize the content appropriately by placing anything you want to cycle through into its own folder or group. We’ll name the folder “Carousel” in this case. Just make sure you only have the objects or groups of objects you want to cycle through in this folder, and none of the navigation icons or hotspots.
Now we can add our interactions. One quick tip that will save you a few clicks is to apply the interaction to both hotspots at once, and then simply adjust one of them as needed. Select both of the hotspots we created in the layers panel together. Next, navigate to the “Interact” tab and apply a “Click” interaction, with a “Cycle Next” action, with the entire carousel folder as our target. Now, all we have to do is to adjust the left hotspot interaction to "Cycle Previous."
As you can see in the preview, the "Cycle Next" interaction will cycle through all of the assets in your Carousel folder starting from the top down, while the "Cycle Previous" will do the opposite.
In a later lesson, we’ll take a deeper dive into the other group-based interactions to also add an image selector to our carousel
Transcript
Carousels are a great way to incorporate more information, images, and videos into your piece without having a cluttered experience. Using the “cycle next” and “cycle previous” interactions, you can easily create custom carousels with any combination of assets.
To follow along with this lesson, go ahead and upload the build-along experience to your account. As you can see in the final experience, we are going to create a basic image carousel that will cycle through three different images when the user clicks on the arrows.
To get started, let’s go ahead and finish up the design of our piece. A few things we are missing are the arrows to navigate back and forth, as well as the hotspots to allow the user to interact with and trigger the cycle actions. Go ahead and search for an arrow you like from the media library, or upload your own arrow icons.
You can always duplicate one for the other side and simply hold shift over the corner to rotate it in 45-degree increments. Alternatively, you can right-click on a duplicated arrow icon and select “Flip Horizontal” to achieve this quickly. While we’re at it, let’s also create two new hotspots over top of these icons to ensure the user has a large area to click on.
Moving over to the Layers panel, you’ll want to organize the content appropriately by placing anything you want to cycle through into its own folder or group. We’ll name the folder “Carousel” in this case. Just make sure you only have the objects or groups of objects you want to cycle through in this folder, and none of the navigation icons or hotspots.
Now we can add our interactions. One quick tip that will save you a few clicks is to apply the interaction to both hotspots at once, and then simply adjust one of them as needed. Select both of the hotspots we created in the layers panel together. Next, navigate to the “Interact” tab and apply a “Click” interaction, with a “Cycle Next” action, with the entire carousel folder as our target. Now, all we have to do is to adjust the left hotspot interaction to "Cycle Previous."
As you can see in the preview, the "Cycle Next" interaction will cycle through all of the assets in your Carousel folder starting from the top down, while the "Cycle Previous" will do the opposite.
In a later lesson, we’ll take a deeper dive into the other group-based interactions to also add an image selector to our carousel