{"id":272,"date":"2026-06-08T07:20:32","date_gmt":"2026-06-08T07:20:32","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&#038;p=272"},"modified":"2026-09-07T10:23:10","modified_gmt":"2026-09-07T10:23:10","password":"","slug":"hotspots","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/hotspots\/","title":{"rendered":"Hotspots"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"272\" class=\"elementor elementor-272\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53be4df4 e-con-full e-flex e-con e-parent\" data-id=\"53be4df4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74c087da elementor-widget elementor-widget-text-editor\" data-id=\"74c087da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Application<\/h2><div class=\"elementor-element elementor-element-a9dff80 elementor-widget elementor-widget-fp-text\" data-id=\"a9dff80\" data-element_type=\"widget\" data-widget_type=\"fp-text.default\"><div class=\"elementor-widget-container\"><div class=\"text\"><p class=\"p1\">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.<\/p><p class=\"p1\">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.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bdc9c1 elementor-widget elementor-widget-button\" data-id=\"1bdc9c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#1\" id=\"1\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-108cdd3 elementor-widget elementor-widget-text-editor\" data-id=\"108cdd3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Video tutorial<\/h2><div class=\"elementor-element elementor-element-a9dff80 elementor-widget elementor-widget-fp-text\" data-id=\"a9dff80\" data-element_type=\"widget\" data-widget_type=\"fp-text.default\"><div class=\"elementor-widget-container\"><div class=\"text\"><p>Learn how to create the Big Slider in the following video tutorial.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b37abb0 elementor-widget elementor-widget-video\" data-id=\"b37abb0\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;vimeo&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"Vimeo video player\" src=\"https:\/\/player.vimeo.com\/video\/1198578448?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51a35644 elementor-widget elementor-widget-spacer\" data-id=\"51a35644\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f42e604 elementor-widget elementor-widget-text-editor\" data-id=\"5f42e604\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Add hotspots<\/h2><div id=\"model-response-message-contentr_a9f677e6d41788df\" class=\"markdown markdown-main-panel stronger enable-updated-hr-color\" dir=\"ltr\" aria-live=\"polite\" aria-busy=\"false\"><p data-path-to-node=\"0\">Drag the hotspot element into a module.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12bceb7f elementor-widget elementor-widget-image\" data-id=\"12bceb7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Hotspots-einfuegen.jpg\" title=\"Insert hotspots\" alt=\"Hotspots einfu\u0308gen\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2a1873 elementor-widget elementor-widget-spacer\" data-id=\"a2a1873\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21d42b14 elementor-widget elementor-widget-text-editor\" data-id=\"21d42b14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Step 1 \u2013 Add image<\/h2><p>Check the hotspots to see what settings are available for the image.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35fa93c9 elementor-widget elementor-widget-hotspots\" data-id=\"35fa93c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Layout-1.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 46%; left: 65%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Select image<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select an image from the media library that you want to explain with hotspots.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 57%; left: 65%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Width<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Choose whether your image should be displayed across the entire width.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c98afea elementor-widget elementor-widget-spacer\" data-id=\"c98afea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2d18ab elementor-widget elementor-widget-text-editor\" data-id=\"a2d18ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Step 2 \u2013 Choose Hotspot Type<\/h2><p>Check out the hotspots to see which hotspot types are available to you.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ad3709 elementor-widget elementor-widget-hotspots\" data-id=\"9ad3709\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Hotpots.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 27%; left: 24%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Icon Hotspots<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on Icon to display a symbol in the middle of your hotspots.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 27%; left: 76%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Number hotspots<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on number if your hotspots should be numbered.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c3ec0b6 elementor-widget elementor-widget-spacer\" data-id=\"6c3ec0b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42b1801 elementor-widget elementor-widget-text-editor\" data-id=\"42b1801\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Step 3 \u2013 Hotspot Settings<\/h2><div class=\"container\"><div id=\"model-response-message-contentr_54885ef6289e126f\" class=\"markdown markdown-main-panel stronger enable-updated-hr-color\" dir=\"ltr\" aria-live=\"polite\" aria-busy=\"false\"><p data-path-to-node=\"0\">Check out the hotspots to see how to manage your hotspots.<\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76a296b elementor-widget elementor-widget-hotspots\" data-id=\"76a296b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Hotpots-1.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 17%; left: 67%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Add hotspot<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click \u201eAdd hotspot\u201c to add a new hotspot.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 46%; left: 67%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot arrangement<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Change the order of the hotspots by clicking and dragging the move icon.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 78%; left: 67%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Delete hotspots<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Delete a hotspot by clicking the trash can icon.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d1821b9 elementor-widget elementor-widget-spacer\" data-id=\"3d1821b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f0ab691 e-flex e-con-boxed e-con e-parent\" data-id=\"f0ab691\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43cbc11 elementor-widget elementor-widget-text-editor\" data-id=\"43cbc11\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"1\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h1>Layout 1 \u2013 Action Hotspots<\/h1><p>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7107ac1 elementor-widget elementor-widget-hotspots\" data-id=\"7107ac1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/aktion.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 35%; left: 67%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Operation Hotspot<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the first item \u201eAction\u201c to insert an action hotspot.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c93f886 elementor-widget elementor-widget-spacer\" data-id=\"c93f886\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-165e330 elementor-widget elementor-widget-text-editor\" data-id=\"165e330\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Hotspot types at a glance<\/h2><p>Check out the hotspots in the image to learn which hotspot types are available in excelerate and how they work.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43bfd38 elementor-widget elementor-widget-hotspots\" data-id=\"43bfd38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Hotpot-Ueberblick.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 22%; left: 18%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Audio<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the first point, \u201eAudio,\u201c to convert your hotspot into an audio hotspot. Learners can then play an audio track by clicking on it.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot\" style=\"top: 22%; left: 50%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Download<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the second point \u201eDownload\u201c to convert your hotspot into a download hotspot. Learners can then download a stored file with a click.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 22%; left: 82%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Section<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the third point \u201eSection\u201c to convert your hotspot into a section hotspot. Learners can then click it to get to the next section in the WBT.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bcbc567 elementor-widget elementor-widget-spacer\" data-id=\"bcbc567\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da06616 elementor-widget elementor-widget-text-editor\" data-id=\"da06616\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Item 1 \u2013 Audio<\/h2><p>Click on the first point, \u201eAudio,\u201c to convert your hotspot into an audio hotspot. Learners can then play an audio track by clicking on it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5abb6cb elementor-widget elementor-widget-hotspots\" data-id=\"5abb6cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Audio.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 35%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot color<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Decide whether your hotspot should have a light or dark ring in the center. This ensures optimal visibility on light and dark images.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 52%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot content<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">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.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 69%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Select audio<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">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.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7f461c elementor-widget elementor-widget-spacer\" data-id=\"d7f461c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bbc46a elementor-widget elementor-widget-text-editor\" data-id=\"2bbc46a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Item 2 \u2013 Download<\/h2><p data-pm-slice=\"1 1 []\">Click on the second point \u201eDownload\u201c to turn your hotspot into a download hotspot. Learners can then download the attached file with a click.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-116f6e2 elementor-widget elementor-widget-hotspots\" data-id=\"116f6e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Download.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 35%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot color<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 52%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot content<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">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.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 69%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Download Select file<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select a file from the media library that your learners can download, or insert a download link by clicking \u201eLink\u201c.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac34737 elementor-widget elementor-widget-spacer\" data-id=\"ac34737\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8328ee elementor-widget elementor-widget-text-editor\" data-id=\"e8328ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Item 3 \u2013 Section<\/h2><p>Click on the third bullet point \u201eSection\u201c to turn your hotspot into a section hotspot, allowing learners to navigate to the next section in the WBT with a click.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2919cd7 elementor-widget elementor-widget-hotspots\" data-id=\"2919cd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Abschnitt.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 45%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot color<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 63%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot content<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">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.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5356de4b e-flex e-con-boxed e-con e-parent\" data-id=\"5356de4b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9083271 elementor-widget elementor-widget-spacer\" data-id=\"9083271\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-693beea elementor-widget elementor-widget-text-editor\" data-id=\"693beea\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"1\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h1>Layout 2 \u2013 Tooltip Hotspots<\/h1><div class=\"container\"><div id=\"model-response-message-contentr_b80d202641566466\" class=\"markdown markdown-main-panel stronger enable-updated-hr-color\" dir=\"ltr\" aria-live=\"polite\" aria-busy=\"false\"><p data-path-to-node=\"0\">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 \u201eAudio\u201c, a player icon appears there.<\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-565fd672 elementor-widget elementor-widget-hotspots\" data-id=\"565fd672\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Tooltip-1.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 35%; left: 67%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Tooltip Hotspot<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the second item \u201eTooltip\u201c to insert a tooltip hotspot.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-784c1100 elementor-widget elementor-widget-spacer\" data-id=\"784c1100\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31239c46 elementor-widget elementor-widget-text-editor\" data-id=\"31239c46\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Hotspot types at a glance<\/h2><p>Check out the hotspots in the image to learn which hotspot types are available in excelerate and how they work.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79a5634b elementor-widget elementor-widget-hotspots\" data-id=\"79a5634b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Hotpot-Ueberblick-2.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 22%; left: 16%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Click<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the first item \u201ePoint\u201c to create a simple hotspot. Learners can use this to display content such as titles or running text by clicking on it.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot\" style=\"top: 22%; left: 38%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Audio<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the second \u201eAudio\u201c point to turn your hotspot into an audio hotspot, where learners can play an audio track by clicking it.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 22%; left: 62%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Download<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the third point \u201eDownload\u201c to turn your hotspot into a download hotspot where learners can download a stored file with a click.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 22%; left: 82%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    4                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Section<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the fourth point \u201eSection\u201c to create a section hotspot. This allows learners to click and go to the next section of the WBT.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 87%; left: 58%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    5                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Information<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">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.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41375b6 elementor-widget elementor-widget-spacer\" data-id=\"41375b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57d2afdd elementor-widget elementor-widget-text-editor\" data-id=\"57d2afdd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Item 1 \u2013 Click<\/h2><p>Click on the first item \u201ePoint\u201c to create a simple hotspot. Learners can use this to display content such as titles or running text by clicking on it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51655184 elementor-widget elementor-widget-hotspots\" data-id=\"51655184\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Klick.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 35%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot color<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 52%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot content<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">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.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 69%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Title, text, and image<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Decide which of the three inputs your learners will see when clicking. You can add a heading, text, and an image as needed.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62f0cb8e elementor-widget elementor-widget-spacer\" data-id=\"62f0cb8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0de49b elementor-widget elementor-widget-text-editor\" data-id=\"c0de49b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Tooltip View<\/h2><p>Check out the slides to see what the tooltip hotspot looks like for learners when open.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b27854 elementor-widget elementor-widget-excelerate-slider\" data-id=\"4b27854\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"excelerate-slider.default\">\n\t\t\t\t\t\t\t<div class=\"excelerate-slider-outer\" id=\"excelerate-slider-outer-4b27854\">\n\t\t\t<div class=\"excelerate-slider-left\">\n\t\t\t\t<div class=\"excelerate-slider-texts\" id=\"excelerate-slider-texts-4b27854\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h1>Click<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h1>Audio<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h1>Download<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h1>Section<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"excelerate-slider-arrows\" id=\"excelerate-slider-arrows-4b27854\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"excelerate-slider-images\" id=\"excelerate-slider-images-4b27854\">\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Schmall-1-2.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Schmall-4.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Schmall-2-2.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Schmall-3-1.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-26607871 e-flex e-con-boxed e-con e-parent\" data-id=\"26607871\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-580ddc7f elementor-widget elementor-widget-spacer\" data-id=\"580ddc7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3411a025 elementor-widget elementor-widget-text-editor\" data-id=\"3411a025\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"1\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h1>Layout 3 \u2013 Popup Hotspots<\/h1><div class=\"container\"><div id=\"model-response-message-contentr_bc9375a368a22f1a\" class=\"markdown markdown-main-panel stronger enable-updated-hr-color\" dir=\"ltr\" aria-live=\"polite\" aria-busy=\"false\"><p data-path-to-node=\"0\">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.<\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fa60e4 elementor-widget elementor-widget-hotspots\" data-id=\"5fa60e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Tooltip-2.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 35%; left: 70%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Popup Hotspot<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the third point \u201ePopup\u201c to insert a popup hotspot.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3afb1703 elementor-widget elementor-widget-spacer\" data-id=\"3afb1703\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38164454 elementor-widget elementor-widget-text-editor\" data-id=\"38164454\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Hotspot types at a glance<\/h2><p>Check out the hotspots in the image to learn which hotspot types are available in excelerate and how they work.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1faef172 elementor-widget elementor-widget-hotspots\" data-id=\"1faef172\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Hotpot-Ueberblick-3.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 22%; left: 12%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Click<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the first item \u201eClick\u201c to turn your hotspot into a simple hotspot where learners are shown content such as a title, running text, or image by clicking.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot\" style=\"top: 22%; left: 32%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Audio<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the second \u201eAudio\u201c point to make a popup with an audio file from your hotspot that learners can play after opening it.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 22%; left: 51%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Download<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the third point \u201eVideo\u201c to turn your hotspot into a popup with a video that learners can play after opening it.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 22%; left: 70%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    4                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Download<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the fourth point \u201eDownload\u201c to turn your hotspot into a download popup, where learners can download a file after opening it.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 22%; left: 89%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    5                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Section<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the fifth item \u201eSection\u201c to turn your hotspot into a popup with a section where learners can navigate to a preset section in the WBT after opening it.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 87%; left: 58%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    6                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Information<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Hotspot types 2, 3, and 4 are the same as in the \u201e1 Hotspot\u201c 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.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14e0ed5 elementor-widget elementor-widget-spacer\" data-id=\"14e0ed5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e694cc9 elementor-widget elementor-widget-text-editor\" data-id=\"3e694cc9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Item 3 \u2013 Upload video<\/h2><p>Click on the third point \u201eVideo\u201c to turn your hotspot into a popup with a video that learners can play after opening it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20a18f8d elementor-widget elementor-widget-hotspots\" data-id=\"20a18f8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Video-1.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 35%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot color<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Determine whether your hotspot has a light or dark ring in the center. This ensures perfect visibility on dark or light images.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 52%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Hotspot content<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">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.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 78%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Video<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Choose a video from the media library or add it via a link.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ceb5b4d e-flex e-con-boxed e-con e-parent\" data-id=\"1ceb5b4d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1acc2de1 elementor-widget elementor-widget-spacer\" data-id=\"1acc2de1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b374180 elementor-widget elementor-widget-text-editor\" data-id=\"5b374180\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"1\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h1>Layout 4 \u2013 Overlay Hotspots<\/h1><p>Select the overlay layout so that clicking on the hotspot displays an overlay that you can customize with the Content Editor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e3b8b97 elementor-widget elementor-widget-hotspots\" data-id=\"6e3b8b97\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 39%; left: 71%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Overlay Hotspot<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on the fourth item, \u201eOverlay,\u201c to insert an overlay hotspot.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18b193ca elementor-widget elementor-widget-spacer\" data-id=\"18b193ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d93fdc elementor-widget elementor-widget-text-editor\" data-id=\"5d93fdc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Overlay Layout Overview<\/h2><p>Look at the hotspot in the image to see which settings are available for the overlay layout hotspot.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60a5c67d elementor-widget elementor-widget-hotspots\" data-id=\"60a5c67d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Hotpot-Ueberblick-4.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 21%; left: 51%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Edit overlay<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on \u201eEdit Overlay\u201c to customize the overlay contents with the Content Editor.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40ab666 elementor-widget elementor-widget-spacer\" data-id=\"40ab666\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1029f14d elementor-widget elementor-widget-text-editor\" data-id=\"1029f14d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Edit overlay<\/h2><p>Click \u201eEdit overlay\u201c to create the hotspot content.\u00a0<\/p><p>To see how to edit an overlay, click here.<\/p><p><a href=\"https:\/\/help.excelerate.app\/en\/help\/overlay-bearbeiten\/\">Edit overlay<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-662a8a2 elementor-widget elementor-widget-image\" data-id=\"662a8a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"491\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay-1-1024x628.jpg\" class=\"attachment-large size-large wp-image-3144\" alt=\"\" srcset=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay-1-1024x628.jpg 1024w, https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay-1-300x184.jpg 300w, https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay-1-768x471.jpg 768w, https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay-1-18x12.jpg 18w, https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay-1-360x221.jpg 360w, https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/06\/Overlay-1.jpg 1502w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Anwendung Verwende das Hotspot Element, wenn du ein Bild verwenden m\u00f6chtest, das detaillierte Erkl\u00e4rungen an bestimmten Stellen ben\u00f6tigt (z. B. Situationen mit mehreren Personen, Produktanatomie oder Lagepl\u00e4ne, Diagramme, komplexe Infografiken oder Screenshots). Nutze Hotspots, wenn du komplexe visuelle Inhalte erkl\u00e4ren m\u00f6chtest. Hotspots erm\u00f6glichen das visuelle Verkn\u00fcpfung von Informationen. Sie eignen sich besonders f\u00fcr explorative Lernphasen, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[11],"doc_tag":[],"class_list":["post-272","docs","type-docs","status-publish","hentry","doc_category-inhaltselemente"],"year_month":"2026-09","word_count":1638,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Creator - Inhalt - Elemente","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/inhaltselemente\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":199,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/272\/revisions"}],"predecessor-version":[{"id":4971,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/272\/revisions\/4971"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=272"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=272"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=272"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}