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
Interactions are a great tool to keep your users engaged with your content. They enable you to shift your users' focus to the most important portions while still allowing them to uncover even more information if they so choose. To follow along with this lesson, go ahead and upload the build-along experience to your account.
As you can see in this final experience, we’re building off our previously created experience, with a few additional sections added in. The main callouts here are the down arrow is now clickable, and we’ve made some basic hover and click interactions to the later section.
So let’s get started by making the arrow drive users to the next section. In longer scrolling pieces, sections are created by using the anchor tool in the toolbar. Let’s place an anchor right above the second section of content. The blue line represents the top of the user's screen.
Now that we have the anchor designated, we need to set up the action to drive users to it. Let’s first select the “Hotspot” tool, and then create a hotspot over top of the arrow icon. With the hotspot still selected, navigate to the “Interact” tab and click on the plus icon to add a new interaction. Let’s select “click” in this case and move to the action we want to apply. Throughout the rest of our intermediate and advanced lessons, we will explore each interaction in more depth. But to give you a brief overview.
- The “Link” section will allow you to navigate to different pages or positions in your experience or navigate to an external URL.
- The “Visibility” section allows you to show or hide different objects or pages in your experience based on a user's action. We’ll actually use a few of these to create some basic popups and hovers later in this lesson.
- The ”Group-Based Visibility” section allows you to create more advanced interactions and carousels of content. We have an entire lesson dedicated to this, so be sure to check it out.
- The “Z-Position” section allows you to rearrange or reset the position of objects.
- And finally, there are some standard social sharing options for various networks.
So, back to the arrow hotspot, let’s use the “Scroll to Position” action here, and choose the first anchor we placed on the canvas as our target. Checking out the preview of the experience, you’ll see that when we click on the arrow, our screen automatically scrolls us down to the following section.
In the next video, we’ll create a hover and click interaction and explain how to add object states to assets in an experience.
Transcript
Interactions are a great tool to keep your users engaged with your content. They enable you to shift your users' focus to the most important portions while still allowing them to uncover even more information if they so choose. To follow along with this lesson, go ahead and upload the build-along experience to your account.
As you can see in this final experience, we’re building off our previously created experience, with a few additional sections added in. The main callouts here are the down arrow is now clickable, and we’ve made some basic hover and click interactions to the later section.
So let’s get started by making the arrow drive users to the next section. In longer scrolling pieces, sections are created by using the anchor tool in the toolbar. Let’s place an anchor right above the second section of content. The blue line represents the top of the user's screen.
Now that we have the anchor designated, we need to set up the action to drive users to it. Let’s first select the “Hotspot” tool, and then create a hotspot over top of the arrow icon. With the hotspot still selected, navigate to the “Interact” tab and click on the plus icon to add a new interaction. Let’s select “click” in this case and move to the action we want to apply. Throughout the rest of our intermediate and advanced lessons, we will explore each interaction in more depth. But to give you a brief overview.
- The “Link” section will allow you to navigate to different pages or positions in your experience or navigate to an external URL.
- The “Visibility” section allows you to show or hide different objects or pages in your experience based on a user's action. We’ll actually use a few of these to create some basic popups and hovers later in this lesson.
- The ”Group-Based Visibility” section allows you to create more advanced interactions and carousels of content. We have an entire lesson dedicated to this, so be sure to check it out.
- The “Z-Position” section allows you to rearrange or reset the position of objects.
- And finally, there are some standard social sharing options for various networks.
So, back to the arrow hotspot, let’s use the “Scroll to Position” action here, and choose the first anchor we placed on the canvas as our target. Checking out the preview of the experience, you’ll see that when we click on the arrow, our screen automatically scrolls us down to the following section.
In the next video, we’ll create a hover and click interaction and explain how to add object states to assets in an experience.