Skip to main content

Add Interactive Content in Studio

Under the Interactive category in Studio add Hotspots, Flashcards, Sliders, Flow Charts and Organization Charts.

Written by Stella Meyer
Updated over a week ago

Hotspot: Upload an image and mark key target zones using the Add Target Zone button.

The Contextual Panel lets you select hotspot size as well as the style. You can also edit hotspot information and the button icon.

Flash Card: Create deck of cards with terms/concepts at the front and description at the back. Images can also be added to the front and/or back of the card to further explain the term/concept.

The Contextual Panel lets you select a deck style and count style. You can choose to show card count and randomize the card order and if the front and back of cards must be viewed in order to complete the block.

Slider/Journey: Upload a sequence of images and add text descriptions to each. Users can drag a slider to move through the sequence, viewing the images and text descriptions in order.

After adding your first step, you can click on the Add Step button highlighted below to add additional images and text steps to the Journey.

The Contextual Panel contains settings for the look, such as image scaling and the slider colour, but also includes two options for Incremental and Continuous modes. Incremental will display each image as separate images when the user scrolls through the timeline, while continuous mode will smoothly blend the images together.

Once finished, users will be able to move through the Journey and view the images and text in order. This is an example using continuous mode, where you can see the images blend gradually as the user progresses.

Accordion: Lets you create multiple sections that each have a collapsable text element. You can add additional sections by clicking Add a Panel, which will bring up a window for you to enter the panel header and body text.

The Contextual Panel lets you reorder the sections and choose whether the first panel is automatically expanded when the section is viewed. You can also opt to only allow one section to be visible at a time. You can also customize the look of the section, such as changing the expand button between a + or a v button, as well as changing the header and text colors.

Pop Up: This Content Block allows you to create text and add an optional image that, when clicked, opens a pop up window that shows content.

Add the initial content in the Click Content side and the content that should be shown when clicked in the Reveal Content side.

Contextual Panel: This area allows you to choose the Panel Type which determines your tile layout β€” if Horizontal is selected, the image and text are shown side-by-side and multiple panels are placed vertically, and if Vertical is selected, the image is placed above the text and multiple panels are placed beside each other.

You can also change the Background and Text Colors.

Adding an additional panel is done using the Add a Panel button, and reordering can be accomplished by clicking and dragging on the six dots to the left of the items in the Panel Order section.

Did this answer your question?