Designer Courses / Create in Ceros

Create Micro Content

In this lesson, we will be building out a small interactive experience that can be embedded on your blog or webpage. If you would like to follow along with our build, be sure to download the assets below and unzip them to your canvas. Below you will find step by step instructions, however, please consult the videos for additional context. We’ve also included a demo piece of micro content below.

Overview & Canvas Set Up

Before we can start populating the Ceros studio, we need to first create a Ceros Experience and set up our canvas to the appropriate size.

  • In the Ceros Admin, add a new experience titled “Micro Content” and dive into the studio
  • Set the canvas to be 640 pixels wide by 640 pixels high with 640 pixels as the fold

When working in photoshop, you would need to create your assets at 2x the size of the Ceros canvas to accommodate for retina devices. In this case, your Photoshop canvas would have to be 1280px high by 1280px wide.

Importing Assets and Creating Objects

To upload the assets for this build, which can be downloaded above, you simply need to locate the images on your desktop, and drag-and-drop them onto the canvas. Once you’ve added these images go ahead and follow the below instructions to align them on the canvas.

  • Align the car image using “Align to center” and the “Align to top” in the inspector panel
  • Manually align the flashers image to the car (over brake lights)
  • Create a square shape to contain our popup text
  • Add a text box for the car’s top speed – “Top Speed 273 mph”
    • Changing the font to Lato and adjust the size to be 19
  • Add a “Plus” icon from the noun project, and align it to your popup

Lesson 3) Layers, Hotspots and Interactions

Let’s go ahead and organize layers, create Hotspots and add interactions to our experience. Hotspots allow users to interact with your experience, either by clicking, hovering, or when a particular object is viewed.

  • Add a “Hotspots”, “Top Speed”, and “Background” layer
  • Grab both the Top Speed text box, and Square Shape in the layers panel, and drag it into the top speed layer
  • Select the “hotspots” layer, and draw a hotspot over the plus icon
  • Click on the interactions tab of the inspector panel
    • Apply an On-click trigger > Toggle action > Top Speed layer as target
  • Toggle Visibility of Top Speed layer “Off” before looking at preview

Animations and Finalization

Let’s go ahead and add some simple animations to our assets to make them feel more native to the canvas. As you’re adding animations, it might be helpful to have the live preview open on another screen so you can see how your changes look in real time.

  • Select the Blinkers image and navigate to the animations panel
    • Apply an “On View” animations of “Flash” > .5 second delay > one second duration > set to repeat
  • Select both popup objects
    • Apply an “On View” animation of “Fade in Up” > 0 second delay > .5 a second duration
    • Apply an “On Hide” animation of “Fade Out Down” > 0 second delay > .2 second duration
  • Select Plus Icon
    • Apply an “On View” animation of “Fade in Up” > .1 second delay > 1 second duration
    • After previous effect completes apply a “Pulse” > .2 second delay > 2 second duration > set to repeat.

Duplicating Repeat Assets

In this final step, we will duplicate a few assets on our canvas and adjust them for their new popup. This is simply a time-saving step, however, you can just as easily repeat the above steps for the other two popup objects.

  • Add a “Downforce” and “Horsepower” layer
  • Copy the two objects in the “Horsepower” layer, and paste them into the “Downforce” and Horsepower” layer
    • Realign all of these objects on the canvas so they are not overlapping
  • Select the Plus Icon and drag out two copies for our new popups
  • Select the Hotspot for the “Top Speed” Plus Icon and duplicate it for the two additional Plus signs
    • Change the name to reflect the appropriate popup
    • Adjust the interaction to point to the appropriate popup target
  • Turn off visibility for each popup layer

Embedding on Site

Once you are satisfied with your experience, you can navigate to the top menu bar and select Publish. From here you will be provided with a live link to the content as well as two different options for embedding. Select the “Copy Full Height” toggle and navigate to your CMS. In the HTML or Text Editor, paste your Ceros Embed Code.

If you have any questions or comments while creating this Experience, or just need a bit of help, please reach out to us through the support chat and we’ll be happy to assist. Additionally, if you would like to learn the ins and outs of publishing and embedding, be sure to check out our “Publishing, Embedding, and More course.

Create Micro Content