Tutorials

Use the hotspot element if you want to use an image that requires detailed explanations at specific points (e.g., situations involving multiple people, product anatomy or site plans, diagrams, complex infographics, or screenshots). Use hotspots when you want to explain complex visual content.

Hotspots enable the visual linking of information. They are particularly suitable for exploratory learning phases in which learners can discover content at their own pace.

Video tutorial #

Learn how to create the Big Slider in the following video tutorial.

Add hotspots #

Drag the hotspot element into a module.

Step 1 – Add image #

Check the hotspots to see what settings are available for the image.

Select image

Select an image from the media library that you want to explain with hotspots.

Width

Choose whether your image should be displayed across the entire width.

Step 2 – Choose Hotspot Type #

Check out the hotspots to see which hotspot types are available to you.

Icon Hotspots

Click on Icon to display a symbol in the middle of your hotspots.

Number hotspots

Click on number if your hotspots should be numbered.

Step 3 – Hotspot Settings #

Check out the hotspots to see how to manage your hotspots.

Add hotspot

Click „Add hotspot“ to add a new hotspot.

Hotspot arrangement

Change the order of the hotspots by clicking and dragging the move icon.

Delete hotspots

Delete a hotspot by clicking the trash can icon.

Layout 1 – Action Hotspots #

You have 4 hotspot layouts available. In this step-by-step guide, we will go through all layout variants and hotspot types and show you the respective setting options.

Operation Hotspot

Click on the first item „Action“ to insert an action hotspot.

Hotspot types at a glance #

Check out the hotspots in the image to learn which hotspot types are available in excelerate and how they work.

Audio

Click on the first point, „Audio,“ to convert your hotspot into an audio hotspot. Learners can then play an audio track by clicking on it.

Download

Click on the second point „Download“ to convert your hotspot into a download hotspot. Learners can then download a stored file with a click.

Section

Click on the third point „Section“ to convert your hotspot into a section hotspot. Learners can then click it to get to the next section in the WBT.

Item 1 – Audio #

Click on the first point, „Audio,“ to convert your hotspot into an audio hotspot. Learners can then play an audio track by clicking on it.

Hotspot color

Decide whether your hotspot should have a light or dark ring in the center. This ensures optimal visibility on light and dark images.

Hotspot content

Give your hotspot a title and decide whether it should be displayed permanently. If the title display is enabled, your hotspot will appear as shown on the right.

Select audio

Select an audio track from the media library to play when the hotspot is clicked. While playing, the hotspot will be displayed as shown on the right. The audio can be stopped at any time by clicking again.

Item 2 – Download #

Click on the second point „Download“ to turn your hotspot into a download hotspot. Learners can then download the attached file with a click.

Hotspot color

Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.

Hotspot content

Give your hotspot a title and decide whether you want it to be displayed permanently or not. When the title is displayed, your hotspot can look like the one on the right.

Download Select file

Select a file from the media library that your learners can download, or insert a download link by clicking „Link“.

Item 3 – Section #

Click on the third bullet point „Section“ to turn your hotspot into a section hotspot, allowing learners to navigate to the next section in the WBT with a click.

Hotspot color

Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.

Hotspot content

Give your hotspot a title and decide whether you want it to be displayed permanently or not. When the title is displayed, your hotspot can look like the one on the right.

Layout 2 – Tooltip Hotspots #

The tooltip layout is structured differently than the action layout. With the action layout, an action is triggered immediately. With the tooltip layout, as the name suggests, clicking it opens a small tooltip with the content you entered. The hotspot icon changes according to the selected hotspot type. For example, if you selected „Audio“, a player icon appears there.

Tooltip Hotspot

Click on the second item „Tooltip“ to insert a tooltip hotspot.

Hotspot types at a glance #

Check out the hotspots in the image to learn which hotspot types are available in excelerate and how they work.

Click

Click on the first item „Point“ to create a simple hotspot. Learners can use this to display content such as titles or running text by clicking on it.

Audio

Click on the second „Audio“ point to turn your hotspot into an audio hotspot, where learners can play an audio track by clicking it.

Download

Click on the third point „Download“ to turn your hotspot into a download hotspot where learners can download a stored file with a click.

Section

Click on the fourth point „Section“ to create a section hotspot. This allows learners to click and go to the next section of the WBT.

Information

Hotspot types 2, 3, and 4 are the same as in the Layout 1 hotspot. Feel free to scroll up to take another look at them.

Item 1 – Click #

Click on the first item „Point“ to create a simple hotspot. Learners can use this to display content such as titles or running text by clicking on it.

Hotspot color

Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.

Hotspot content

Give your hotspot a title and decide whether you want it to be displayed permanently or not. When the title is displayed, your hotspot can look like the one on the right.

Title, text, and image

Decide which of the three inputs your learners will see when clicking. You can add a heading, text, and an image as needed.

Tooltip View #

Check out the slides to see what the tooltip hotspot looks like for learners when open.

Click #

Audio #

Download #

Section #

Layout 3 – Popup Hotspots #

The popup layout type is similar to the tooltip. Clicking it opens a window. The difference with the popup is that the windows are larger. This also makes them better suited for images and videos. The inputs for the various hotspot types are the same across all recurring types, but the video player is a new addition.

Popup Hotspot

Click on the third point „Popup“ to insert a popup hotspot.

Hotspot types at a glance #

Check out the hotspots in the image to learn which hotspot types are available in excelerate and how they work.

Click

Click on the first item „Click“ to turn your hotspot into a simple hotspot where learners are shown content such as a title, running text, or image by clicking.

Audio

Click on the second „Audio“ point to make a popup with an audio file from your hotspot that learners can play after opening it.

Download

Click on the third point „Video“ to turn your hotspot into a popup with a video that learners can play after opening it.

Download

Click on the fourth point „Download“ to turn your hotspot into a download popup, where learners can download a file after opening it.

Section

Click on the fifth item „Section“ to turn your hotspot into a popup with a section where learners can navigate to a preset section in the WBT after opening it.

Information

Hotspot types 2, 3, and 4 are the same as in the „1 Hotspot“ layout. The exception here is the video, as this is a new addition. All the settings have remained the same; however, what has changed is the functionality of the hotspots. Feel free to scroll up to take another look at them.

Item 3 – Upload video #

Click on the third point „Video“ to turn your hotspot into a popup with a video that learners can play after opening it.

Hotspot color

Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.

Hotspot content

Give your hotspot a title and decide whether you want it to be displayed permanently or not. When the title is displayed, your hotspot can look like the one on the right.

Video

Choose a video from the media library or add it via a link.

Layout 4 – Overlay Hotspots #

Select the overlay layout so that clicking on the hotspot displays an overlay that you can customize with the Content Editor.

Overlay Hotspot

Click on the fourth item, „Overlay,“ to insert an overlay hotspot.

Overlay Layout Overview #

Look at the hotspot in the image to see which settings are available for the overlay layout hotspot.

Edit overlay

Click on „Edit Overlay“ to customize the overlay contents with the Content Editor.

Edit overlay #

Click „Edit overlay“ to create the hotspot content.

To see how to edit an overlay, click here.

Edit overlay

Help

What would you like to know?

Tutorials

How-tos

Hotspots

Application #

Video tutorial #

Add hotspots #

Step 1 – Add image #

Step 2 – Choose Hotspot Type #

Step 3 – Hotspot Settings #

Layout 1 – Action Hotspots #

Hotspot types at a glance #

Item 1 – Audio #

Item 2 – Download #

Item 3 – Section #

Layout 2 – Tooltip Hotspots #

Hotspot types at a glance #

Item 1 – Click #

Tooltip View #

Click #

Audio #

Download #

Section #

Layout 3 – Popup Hotspots #

Hotspot types at a glance #

Item 3 – Upload video #

Layout 4 – Overlay Hotspots #

Overlay Layout Overview #

Edit overlay #