Markers are a great way to reveal content when learners need it. Learners click them to see additional text and media.
- Formatting Labels
- Controlling Marker Effects
- Understanding Marker States
- Changing Label Fonts
- Adding Audio to Labels
- Adding Pictures and Videos to Labels
- Adding Tooltips
- Formatting Tooltips
- Adding Buttons to Labels
- Making Buttons Interactive
- Formatting Buttons
- Understanding Button States
- Renaming Markers
In the 360° image editor, you can add one or more markers to your interaction. Click Marker on the ribbon, or right-click the image and choose Insert Marker. The marker appears with a customizable icon and blank label where you can enter a title, description, and/or media.
If you want to change the icon for an existing marker, select the marker, click the Icon drop-down arrow, and choose a different symbol from the preset icons or Content Library 360. If you prefer to not use an icon, click No icon.
The Custom section of the icon list displays every Content Library 360 icon that you add to the current 360° image interaction.
Tip: You can number markers sequentially (e.g., 1, 2, 3, etc.). Just select the preset sequential numbers icon at the top-right corner of the icon menu, then add as many markers as you need.
Change the default size of a marker. To resize an icon, drag any of its sizing handles.
Change the accent color for individual markers.
The default color for markers comes from Accent 1 of your theme colors. To change it, select a marker, click the Accent drop-down arrow, and then choose a color. (This updates the color for the selected marker.)
In the same list, you can flip the fill and icon color of the selected marker. Just click Invert Marker Theme.
Change the theme and style for all labels in your interaction all at once.
To change the theme for your labels, go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme.
Note: The light theme makes markers and all labels white and fills the icon with your accent color choice. The dark theme fills markers with your accent color choice, changes the icon to white, and makes all labels black.
In the same tab, you can customize the label style. Just click the Corners drop-down arrow, choose a square or rounded corner style, and decide if you want to hide or show the connector.
Enable or disable the pulsing animation for unvisited markers by going to the Interaction tab, then clicking the Markers drop-down arrow to turn the animation on or off.
Markers in 360° interactions have built-in states, as explained below:
- Normal: This is the initial state for an object.
- If the pulsing animation is enabled, a transparent pulsing circle displays around each unvisited marker.
- If the pulsing animation is disabled, each unvisited marker displays as it does in the 360° image editor without a pulsing circle.
- Hover: This is how an object appears when learners move their mouse over it. When learners hover over a marker, its color dims or brightens depending on the theme (i.e., the color of the marker dims with the dark theme and brightens with the light theme), and the cursor changes to a hand.
- Selected: This is how an object appears when it’s selected. When learners click a marker, an outline in the color of the marker icon appears around the marker.
- Visited: This is how an object appears after it’s clicked.
Note: At this time, there isn’t a way to customize the built-in states for markers in 360° interactions.
The fonts used for the label title and description default to your project’s theme fonts.
To use a different font, use the font selector in the Marker tab to modify an individual label, or customize your theme fonts to change all the labels in your course at the same time.
Import audio from your computer, generate text-to-speech clips, choose audio from the media library, or record narration right in Storyline 360. Just select your marker, go to the Label tab on the ribbon, click Audio, and choose one of the audio options:
Audio from File
Use this option to import an audio clip from your computer.
Use this option to insert an audio clip from the media library.
Use this option to record an audio clip.
Use this option to convert your text to narration.
Change your audio playback device and recording devices. You can also modify the recording volume level.
After adding audio, additional options on the Media ribbon become available, such as an audio editor, a volume adjuster, and more. To learn more about working with audio, visit Editing Audio and Using the Audio Tools.
To change the accent color for the selected marker’s media controls, click Accent on the Media ribbon, and choose the player’s accent color or a custom one.
To add closed captions to marker audio, select the audio and click Add Captions on the Media ribbon. Visit this user guide to learn all about working with closed captions.
Add an image or video to each marker’s label. Just select your marker, go to the Label tab on the ribbon, click Picture or Video, and choose one of the following:
Content Library 360 Photos
Use this option to insert a photo from Content Library 360.
Picture from File
Use this option to insert an image from your computer.
Use this option to insert an image from the media library.
Use this option to capture and insert a clip of your screen.
Content Library 360 Videos
Use this option to insert a video from Content Library 360.
Video from File
Use this option to insert a video from your computer.
Use this option to insert a video from the media library.
Use this option to record a video with your webcam.
To edit a picture or video you’ve added to a label, visit these user guides:
Add alt text to all pictures and videos so they’re accessible to screen readers and other assistive technologies. Learn more.
Give learners bite-sized info when they hover over markers in your free-navigation interactions. (Learn how to add tooltips to hotspots.) Install the November 2021 update or later, then follow these steps:
- In the 360° image editor, make sure that you’re using Free navigation mode.
- Select the marker and click Tooltip on the ribbon.
- Add up to 35 characters in the text field next to the marker.
Note: Hovering over a marker without a label or trigger displays its tooltip and automatically counts the marker as viewed in the progress indicator. Conversely, hovering over a marker with a label or trigger displays its tooltip and counts the marker as viewed when learners click it.
Change the theme for all marker tooltips all at once. Just go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme.
Choose a different font and font size for individual marker tooltips and apply formatting (e.g., bold, italics, and underline) to them. Just select the marker tooltip and use the font options in the Marker tab.
- In the 360° image editor, select the marker and click the Label tab on the ribbon.
- Click the Button drop-down arrow and choose one of the pre-built button styles.
- Add up to 35 characters in the button’s text field.
Add alt text to buttons so they’re accessible to screen readers and other assistive technologies. Learn more.
Keep learners engaged by guiding them to the next step in their journey. Perform specific actions, such as launching a website or downloading a document, when learners click a button. Learn more.
Change the accent color for individual buttons. Just select the button, click the Accent drop-down arrow, and then select a color.
Choose a different font and font size for individual buttons and apply formatting (e.g., bold, italics, and underline) to it. Select the button text and use the font options on the Label tab.
Buttons in 360° interactions have the following built-in states:
- Normal: The initial state, displays the selected accent color
- Hover: When interacted with, displays a dimmed color and hand icon
Button states in 360° interactions can’t be customized.
When you add markers, Storyline 360 gives each one a default name: Marker 1, Marker 2, etc. We recommend giving them more intuitive names, so they’re recognizable when adding triggers.
One way to rename a marker is to enter a label title. The name of the marker updates to reflect its label title. Or, double-click the marker on the Markers & Hotspots panel, enter a new name, and press Enter on your keyboard.
To delete a marker, select it and press Delete on your keyboard. Or, select the marker and click Cut on the ribbon.
Another option is to convert the marker to a hotspot. Just select the marker, then click Switch Type on the Marker ribbon. Learn more about hotspots.