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.
The ability to embed third party content within Ceros gives you a ton of creative flexibility. Embedded objects can include YouTube, Vimeo, or Wistia videos, forms, Google Maps, Spotify playlists, social content and more.
They can also feature dynamic content that is constantly changing, like data or charts, and can parse information back and forth with external vendors and platforms.
Embed YouTube Video
Let’s get started by embedding a YouTube video into our experience.
- Open this YouTube video in a new window and select the share option (or copy the code provided below)
- Navigate to the Embed popup within YouTube
- Toggle Suggested videos, Player controls, and Video title options to Off
- Navigate back to Ceros
<iframe src="https://www.youtube.com/embed/O-XrRQf7BPM?rel=0&controls=0&showinfo=0" width="1120" height="630" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
In Ceros:
- Draw an Embedded Object placeholder on the canvas
- Paste the YouTube embed code into code section of the Inspector window
- Change the Width in the code to 1120px and the Height to 630px
- Hit enter to save your changes
- Align YouTube video object on the canvas
Embed Google Map
- Navigate to this Google Map link and select the share option (or copy the code we provided below)
- Select the Embed option and copy the provided embed code
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12091.339967690581!2d-73.99976813206443!3d40.74365624361572!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a539593991%3A0xa53552ec20fbf244!2sCeros!5e0!3m2!1sen!2sus!4v1504904840476" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
In Ceros:
- Draw an Embedded Object placeholder at the bottom of the experience
- Paste the Google Maps embed code into the code section of the Inspector window
- Change the Width in the code to 100% and Height to 100%
- Hit enter to save your changes
- Align the google map on the canvas
Embed Lead Capture Form
We’ve provided a test lead capture form from Hubspot below, however, you can also navigate to your own Marketing CRM system and select the share option on your form to use one of your own. If you are using Hubspot or Marketo, be sure to check out our Video Lesson on those integrations specifically.
<!-- [if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '403603',
formId: 'd04c570d-b3a2-4658-9155-ef1156530770'
});
</script>
In Ceros:
- Draw an Embedded Object placeholder over the white background object
- Paste the above embed code into the code section of the inspector window
- Hit enter to save your changes
- Preview the experience to ensure your form is appearing as expected
The ability to embed third party content within Ceros gives you a ton of creative flexibility. Embedded objects can include YouTube, Vimeo, or Wistia videos, forms, Google Maps, Spotify playlists, social content and more.
They can also feature dynamic content that is constantly changing, like data or charts, and can parse information back and forth with external vendors and platforms.
Embed YouTube Video
Let’s get started by embedding a YouTube video into our experience.
- Open this YouTube video in a new window and select the share option (or copy the code provided below)
- Navigate to the Embed popup within YouTube
- Toggle Suggested videos, Player controls, and Video title options to Off
- Navigate back to Ceros
<iframe src="https://www.youtube.com/embed/O-XrRQf7BPM?rel=0&controls=0&showinfo=0" width="1120" height="630" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
In Ceros:
- Draw an Embedded Object placeholder on the canvas
- Paste the YouTube embed code into code section of the Inspector window
- Change the Width in the code to 1120px and the Height to 630px
- Hit enter to save your changes
- Align YouTube video object on the canvas
Embed Google Map
- Navigate to this Google Map link and select the share option (or copy the code we provided below)
- Select the Embed option and copy the provided embed code
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12091.339967690581!2d-73.99976813206443!3d40.74365624361572!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a539593991%3A0xa53552ec20fbf244!2sCeros!5e0!3m2!1sen!2sus!4v1504904840476" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
In Ceros:
- Draw an Embedded Object placeholder at the bottom of the experience
- Paste the Google Maps embed code into the code section of the Inspector window
- Change the Width in the code to 100% and Height to 100%
- Hit enter to save your changes
- Align the google map on the canvas
Embed Lead Capture Form
We’ve provided a test lead capture form from Hubspot below, however, you can also navigate to your own Marketing CRM system and select the share option on your form to use one of your own. If you are using Hubspot or Marketo, be sure to check out our Video Lesson on those integrations specifically.
<!-- [if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '403603',
formId: 'd04c570d-b3a2-4658-9155-ef1156530770'
});
</script>
In Ceros:
- Draw an Embedded Object placeholder over the white background object
- Paste the above embed code into the code section of the inspector window
- Hit enter to save your changes
- Preview the experience to ensure your form is appearing as expected