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
When creating in the Ceros Studio, you’ll have almost limitless creative freedom regarding the format your content can take. So, to get familiar with how to create an experience and what to consider when setting up your canvas, let’s begin by navigating to the Ceros platform and clicking on the “New Project” button.
Projects are essentially folders into which you can organize your different experiences. Experiences are the actual pieces of content you’ll create, publish, and share. When creating an experience, you have the option to design from scratch with a blank canvas, start with a template, or import an existing design file.
When using a template, you can browse Ceros Inspire or choose from the gallery of templates uploaded by yourself or other members of your team. Everything within a template - from the images, layout, interactions, and more are completely customizable. Even further, you can also copy specific elements from one template and use them in a completely separate experience.
For this lesson, browse Ceros Inspire and preview templates that look interesting. Once find one you like, click “Use Template” to import it into your Project. From there, simply click on the template’s thumbnail to open it in the Studio.
Once in the Studio, you may be familiar with many of the tools in the toolbar. But for those you’re not familiar with, we’ll dive deeper into them throughout each of these lessons.
At the top center of the Studio, you will see a section for the global layouts of your experience. This is essentially where you can adapt your design for different device types, including desktop, tablet, and mobile. Check out our “Creating Mobile Variants using Adaptive Layouts” lesson for a deeper dive later on.
In the bottom left corner of the Studio, you’ll find all the pages included in your experience - in this case, there’s just one. You can add additional pages using the “Add Page” button at the bottom of the Page’s panel.
By default, we’ve already picked out some common screen dimensions that will work nicely across desktop, tablet, and mobile devices. You can, of course, always adjust these to fit your particular needs by clicking on the canvas and changing the settings in the design tab. But the default widths should be a good starting point, and the height can obviously be adjusted as you add additional content to each page.
Additionally, you can adjust how your experience will scale when viewed in a web browser. By default, it will scale based on the fold line you specify; however, you can turn scaling off entirely or simply tell the studio to expand to the full width of the browser window. Since users will load the experience up on different devices, the amount of content they see will be dependent on their screen real estate. To get an idea of how your content would look for your users, click on the preview button to get a real-time view.
Transcript
When creating in the Ceros Studio, you’ll have almost limitless creative freedom regarding the format your content can take. So, to get familiar with how to create an experience and what to consider when setting up your canvas, let’s begin by navigating to the Ceros platform and clicking on the “New Project” button.
Projects are essentially folders into which you can organize your different experiences. Experiences are the actual pieces of content you’ll create, publish, and share. When creating an experience, you have the option to design from scratch with a blank canvas, start with a template, or import an existing design file.
When using a template, you can browse Ceros Inspire or choose from the gallery of templates uploaded by yourself or other members of your team. Everything within a template - from the images, layout, interactions, and more are completely customizable. Even further, you can also copy specific elements from one template and use them in a completely separate experience.
For this lesson, browse Ceros Inspire and preview templates that look interesting. Once find one you like, click “Use Template” to import it into your Project. From there, simply click on the template’s thumbnail to open it in the Studio.
Once in the Studio, you may be familiar with many of the tools in the toolbar. But for those you’re not familiar with, we’ll dive deeper into them throughout each of these lessons.
At the top center of the Studio, you will see a section for the global layouts of your experience. This is essentially where you can adapt your design for different device types, including desktop, tablet, and mobile. Check out our “Creating Mobile Variants using Adaptive Layouts” lesson for a deeper dive later on.
In the bottom left corner of the Studio, you’ll find all the pages included in your experience - in this case, there’s just one. You can add additional pages using the “Add Page” button at the bottom of the Page’s panel.
By default, we’ve already picked out some common screen dimensions that will work nicely across desktop, tablet, and mobile devices. You can, of course, always adjust these to fit your particular needs by clicking on the canvas and changing the settings in the design tab. But the default widths should be a good starting point, and the height can obviously be adjusted as you add additional content to each page.
Additionally, you can adjust how your experience will scale when viewed in a web browser. By default, it will scale based on the fold line you specify; however, you can turn scaling off entirely or simply tell the studio to expand to the full width of the browser window. Since users will load the experience up on different devices, the amount of content they see will be dependent on their screen real estate. To get an idea of how your content would look for your users, click on the preview button to get a real-time view.