---
title: "Powerspots"
url: "https://help.cbook.de/de/article/powerspots"
language: "de"
last_updated: "2026-03-30T08:02:08.338Z"
---

# Powerspots

Hotspots supercharged. Erstelle mehrstufige, interaktive Erlebnisse mit Popovers, Overlays, Audios und Aktionen.

## Einleitung

Mit Powerspots erstellst du interaktive, bildbasierte Slides, auf denen Nutzer Inhalte entdecken, indem sie auf Elemente klicken, die über einem Hintergrundbild platziert sind. Du kannst zwei Arten von Elementen hinzufügen — **Hotspots** (klickbare Marker mit Icons) und **Areas** (rechteckige Bereiche mit Text) — und diese mit Overlays, Popovers, Audio und sogar Aktionen anreichern, die andere Elemente auf der Slide verändern.

## Editor-Übersicht

Der Powerspots-Editor besteht aus drei Hauptbereichen:

-   **Toolbar** (oben): Neue Elemente hinzufügen, Elemente zur Bearbeitung auswählen, zwischen Quer- und Hochformat wechseln und die Sidebar ein-/ausblenden.
-   **Canvas** (Mitte): Eine visuelle Vorschau deiner Slide, auf der du deine Elemente sehen und per Drag-and-Drop über dem Hintergrundbild positionieren kannst.
-   **Sidebar** (rechts): Zwei Tabs — **Erscheinungsbild** für Hintergrund- und Interaktionsbild, und **Einstellungen** für Rasterkonfiguration, Elementreihenfolge und die Option „Mehrere gleichzeitig aktive Elemente erlauben".

Wenn du auf ein Element im Canvas klickst (oder es über das Dropdown in der Toolbar auswählst), öffnet sich ein **Element-Editor**\-Dialog mit vier Tabs: Allgemeines, Erscheinungsbild, Zusatz-Inhalte und Aktionen.

## Grundkonzepte

### Hotspots vs. Areas

Es gibt zwei Elementtypen, die du auf einer Powerspots-Slide platzieren kannst:

-   **Hotspot**: Ein runder, icon-basierter Marker. Hotspots können Audiodateien abspielen und benutzerdefinierte Icons für verschiedene Zustände anzeigen (inaktiv, aktiv, Hover, abgeschlossen). Sie eignen sich hervorragend als Markierungen für interessante Stellen auf einem Bild.
-   **Area**: Ein rechteckiger Bereich, der formatierten Text und ein Hintergrundbild enthalten kann. Areas sind nützlich für größere interaktive Zonen oder textbasierte Hinweise.

Beide Typen können **Zusatz-Inhalte** (Overlay oder Popover) haben, als **notwendig** markiert werden und **Aktionen** auf andere Elemente auslösen.

### Hintergrundbild vs. Interaktionsbild

Jede Powerspots-Slide unterstützt zwei Bildebenen:

-   **Hintergrundbild**: Ein rein dekoratives Bild, das den gesamten Slide-Hintergrund füllt. Es kann je nach Bildschirmgröße beschnitten oder gestreckt werden. Du kannst Filter wie Unschärfe, Graustufen, Sepia, Helligkeit und Kontrast anwenden.
-   **Interaktionsbild**: Wird über dem Hintergrund angezeigt. Dieses Bild skaliert immer proportional — es wird niemals beschnitten oder verzerrt. **Wenn deine Elemente exakt über bestimmten Stellen auf dem darunterliegenden Bild positioniert bleiben sollen, verwende immer das Interaktionsbild.** Nur dieses Bild garantiert, dass deine Hotspots und Areas auf unterschiedlichen Bildschirmgrößen korrekt ausgerichtet bleiben. Das Interaktionsbild unterstützt dieselben Filter wie das Hintergrundbild.

Beide Bilder können separate Versionen für Quer- und Hochformat haben. Wenn kein Hochformatbild vorhanden ist, wird das Querformatbild verwendet.

### Fortschrittsverfolgung

Powerspots-Slides verwenden ein Abschlussmodell, kein Bewertungsmodell. Es gibt keine richtigen oder falschen Antworten. Stattdessen kannst du einzelne Elemente als **notwendig** markieren. Die Slide gilt als abgeschlossen, sobald der Nutzer mit allen notwendigen Elementen interagiert hat. Ein Element gilt als „erledigt", wenn der Nutzer es angeklickt hat (bei Popovers), sein Overlay geschlossen hat oder seine Audiodatei zu Ende gehört hat.

## Elemente erstellen und verwalten

### Elemente hinzufügen

Klicke auf die Schaltfläche **Element hinzufügen** in der Toolbar. Ein Dropdown-Menü erscheint mit zwei Optionen:

-   **Hotspot hinzufügen** — erstellt einen neuen Hotspot mit einem Standardlabel wie „hotspot 1"
-   **Area hinzufügen** — erstellt eine neue Area mit einem Standardlabel wie „area 1"

Das neue Element erscheint auf dem Canvas und kann sofort per Drag-and-Drop positioniert werden.

### Elemente auswählen und bearbeiten

Du kannst ein Element auswählen, indem du direkt im Canvas darauf klickst oder es über das Dropdown in der Toolbar auswählst. Dadurch öffnet sich der Element-Editor-Dialog.

### Elemente duplizieren und löschen

-   Zum **Duplizieren** eines Elements öffne den Element-Editor und klicke auf die Duplizieren-Schaltfläche in der Kopfzeile des Dialogs. Falls das Element ein Popover hat, das automatisch geöffnet wird, wirst du gefragt, wie mit dem Duplikat verfahren werden soll.
-   Zum **Löschen** eines Elements öffne den Tab „Allgemeines" im Element-Editor und klicke unten auf **Element löschen**.

### Elemente anordnen

In der Sidebar findest du unter dem Tab **Einstellungen** den Bereich **Elemente anordnen**. Ziehe die Elemente in der Liste per Drag-and-Drop in die gewünschte Reihenfolge. Diese Reihenfolge bestimmt:

-   Die Anordnung der Elemente bei Verwendung des **Raster-Layouts**.
-   Die **Tastatur-Tab-Reihenfolge** — die Reihenfolge, in der Nutzer mit der Tab-Taste zwischen den Elementen navigieren.
-   Die **Screenreader-Reihenfolge** — die Reihenfolge, in der ein Screenreader die Elemente für sehbehinderte Nutzer vorliest.

Eine logische und intuitive Reihenfolge ist wichtig für die Barrierefreiheit.

## Konfigurationsmöglichkeiten

### Einstellungen auf Slide-Ebene

Diese Einstellungen gelten für die gesamte Slide und befinden sich in der Sidebar.

**Tab „Einstellungen":**

-   **Mehrere gleichzeitig aktive Elemente erlauben** — Wenn aktiviert, können Nutzer mehrere Elemente gleichzeitig geöffnet haben. Wenn deaktiviert, wird beim Klick auf ein neues Element das vorherige automatisch geschlossen. Hinweis: Auch bei aktivierter Option wird beim Starten einer neuen Audiodatei die aktuell laufende gestoppt.
-   **Raster** — Definiere ein Raster (Spalten und Reihen, jeweils 1–10), an dem sich Elemente optional ausrichten können. Das ist nützlich, um Elemente gleichmäßig über die Slide zu verteilen.

**Tab „Erscheinungsbild":**

-   **Hintergrundbild** — Wähle ein Bild für Quer- und/oder Hochformat. Wende optionale Filter an: Unschärfe, Graustufen, Sepia (0–100), Helligkeit, Kontrast (0–200). Dieses Bild ist rein dekorativ und kann je nach Bildschirmgröße beschnitten werden.
-   **Interaktionsbild** — Dieselben Filteroptionen wie beim Hintergrundbild. Dieses Bild skaliert proportional und wird nie beschnitten — die richtige Wahl, wenn Elemente exakt über bestimmten Stellen im Bild positioniert bleiben sollen.

### Elementeinstellungen: Tab „Allgemeines"

-   **Label** (erforderlich) — Der Name des Elements. Wird auch von Screenreadern für die Barrierefreiheit verwendet.
-   **Label anzeigen** — Schaltet die sichtbare Anzeige des Labels auf dem Canvas ein oder aus.
-   **Notwendig, um die Slide abzuschließen** — Nur verfügbar, wenn das Element Zusatz-Inhalte (Overlay oder Popover) oder, bei Hotspots, eine Audiodatei hat. Wenn aktiviert, muss der Nutzer mit diesem Element interagieren, um die Slide abzuschließen.
-   **Audiodatei** (nur Hotspots) — Füge eine Audiodatei hinzu. Wenn vorhanden, zeigt der Hotspot Play-/Pause-Icons an und spielt beim Klick Audio ab.
-   **Benutzerdefinierte Icons** (nur Hotspots, nicht verfügbar wenn eine Audiodatei vorhanden ist) — Lade eigene Bilder für vier Zustände hoch:
-   -   **Inaktiv** — Standardzustand
    -   **Aktiv** — wenn das Element gerade geöffnet/aktiv ist
    -   **Hover** — wenn der Nutzer mit der Maus über das Element fährt
    -   **Abgeschlossen** — nachdem der Nutzer mit dem Element interagiert hat
-   **Area-Text** (nur Areas) — Ein Rich-Text-Editor, in dem du Text mit Fettdruck, Kursiv, Unterstreichen, Listen, Links, Formeln und mehr formatieren kannst.
-   **CSS-Klasse** — Für fortgeschrittene Nutzer: Füge dem Element eine benutzerdefinierte CSS-Klasse für individuelles Styling hinzu.

### Elementeinstellungen: Tab „Erscheinungsbild"

-   **Wie im Querformat** (nur im Hochformat sichtbar) — Wenn aktiviert, verwendet das Element dieselbe Position und Größe wie im Querformat. Deaktiviere diese Option, um separate Werte für das Hochformat festzulegen.
-   **Layout** — Wähle zwischen:
-   -   **Manuell positionieren** — Platziere das Element frei mit Top-/Links-Koordinaten.
    -   **Am Raster ausrichten** — Richte das Element am definierten Raster aus. Die Position innerhalb des Rasters wird durch die Reihenfolge bestimmt (festgelegt über „Elemente anordnen").
-   **Position** (nur bei manuellem Layout):
-   -   **Top** und **Links** — Setze die Position in Prozent (0–100 %) oder in benutzerdefinierten CSS-Einheiten für fortgeschrittene Anwendungsfälle.
    -   Das Ziehen des Elements auf dem Canvas aktualisiert diese Werte ebenfalls.
-   **Größe**:
-   -   **Breite** und **Höhe** — In Prozent oder benutzerdefinierten CSS-Einheiten.
    -   **Seitenverhältnis festlegen** — Fixiert die Proportionen. Verfügbare Voreinstellungen: 1:1, 4:3, 16:9, 3:2 (Querformat) und 1:1, 3:4, 9:16, 2:3 (Hochformat).
-   **Hintergrundbild** (nur Areas) — Lege ein Hintergrundbild für die Area fest.
-   **Ebene (z-Index)** — Bestimmt, welche Elemente vor anderen erscheinen. Höhere Werte liegen oben.
-   **Deckkraft** — Ein Wert zwischen 0 (vollständig transparent) und 1 (vollständig sichtbar).
-   **Verhalten**:
-   -   **Element ist deaktiviert** — Das Element ist sichtbar, kann aber nicht angeklickt werden.
    -   **Element ist ausgeblendet** — Das Element ist vollständig unsichtbar.

### Elementeinstellungen: Tab „Zusatz-Inhalte"

Wähle aus, was passiert, wenn ein Nutzer mit dem Element interagiert:

-   **Kein Zusatz-Inhalt** — Das Element ist einfach klickbar, ohne Popup.
-   **Popover** — Ein kleines Popup erscheint neben dem Element.
-   **Overlay** — Ein größerer modaler Dialog öffnet sich über der Slide.

**Popover-Optionen:**

-   **Rich-Text-Inhalt** — Schreibe formatierten Text mit dem Editor.
-   **Popover automatisch beim Laden der Slide öffnen** — Das Popover erscheint sofort, wenn der Nutzer zur Slide navigiert. Falls bereits ein anderes Popover auf automatisches Öffnen eingestellt ist, wirst du gefragt, ob mehrere aktive Elemente erlaubt werden sollen.
-   **CSS-Klasse** — Benutzerdefinierte Styling-Klasse für das Popover.

**Overlay-Optionen:**

-   **Overlay-Größe** — Automatisch (an Inhalt angepasst) oder Vollbild.
-   **Layout des Overlays** — Wähle aus sechs Layout-Vorlagen:
-   -   Eine Spalte, nur Text
    -   Eine Spalte, nur Medien
    -   Zwei Spalten, Medien links / Text rechts
    -   Zwei Spalten, Text links / Medien rechts
    -   Zwei Zeilen, Medien oben / Text unten
    -   Zwei Zeilen, Text oben / Medien unten
-   **Überschrift des Overlays** — Eine Überschrift, die oben im Overlay angezeigt wird.
-   **Bild** — Füge ein Bild hinzu. Wenn auch eine Mediendatei vorhanden ist, dient das Bild als Poster.
-   **Mediendatei** — Füge eine Videodatei hinzu. Wenn das Video Untertitel hat, kannst du einen Standard-Untertitel auswählen.
-   **Rich-Text-Inhalt** — Verfügbar für alle Layouts außer „nur Medien".
-   **CSS-Klasse** — Benutzerdefinierte Styling-Klasse für das Overlay.

**Wichtig:** Wenn ein Hotspot sowohl eine Audiodatei als auch ein Overlay hat, wird eine Warnung angezeigt, die empfiehlt, nur eines von beiden zu verwenden oder stattdessen ein Popover zu nutzen, um die Bedienbarkeit zu verbessern.

### Elementeinstellungen: Tab „Aktionen"

Mit Aktionen kann ein Element das Aussehen oder den Zustand eines anderen Elements verändern, wenn ein bestimmtes Ereignis eintritt. Das ist eine leistungsstarke Funktion, um interaktive, mehrstufige Erlebnisse zu gestalten.

**Eine Aktion einrichten:**

1.  Wähle einen **Auslöser** — wann soll die Aktion ausgeführt werden?
2.  -   **Beim Klick auf das Element** — wenn der Nutzer dieses Element anklickt
    -   **Beim Schließen des Overlays / Popovers** — wenn der Zusatz-Inhalt geschlossen wird
    -   **Wenn die Audiodatei endet** — wenn die Audiodatei fertig abgespielt ist (nur bei Hotspots mit Audio)
3.  Wähle ein **Zielelement** — welches andere Element soll beeinflusst werden?
4.  Konfiguriere die **Änderungen**, die auf das Zielelement angewendet werden sollen:
5.  -   Position, Größe, Deckkraft oder Ebene ändern
    -   Ein- oder ausblenden
    -   Aktivieren oder deaktivieren
    -   Ein neues Hintergrundbild festlegen (bei Areas)
    -   Als erledigt markieren
6.  Änderungen können separat für Quer- und Hochformat konfiguriert werden.

Du kannst einem einzelnen Element mehrere Aktionen hinzufügen, die jeweils auf unterschiedliche Elemente abzielen.

## Quer- und Hochformat

Powerspots-Slides unterstützen sowohl Quer- als auch Hochformat. Du kannst:

-   Separate Hintergrund- und Interaktionsbilder für jede Ausrichtung festlegen.
-   Mit der Schaltfläche **Ansicht drehen** in der Toolbar zwischen den Ausrichtungen wechseln.
-   Separate Position-, Größen- und Erscheinungsbild-Einstellungen pro Element für jede Ausrichtung konfigurieren. Standardmäßig verwendet das Hochformat dieselben Werte wie das Querformat — deaktiviere **Wie im Querformat** im Tab „Erscheinungsbild", um eigene Werte festzulegen.

## Schritt-für-Schritt-Anleitungen

### Eine einfache Bilderkundungs-Slide erstellen

1.  Füge eine Powerspots-Slide zu deinem cBook hinzu.
2.  Füge im Tab „Erscheinungsbild" der Sidebar ein **Interaktionsbild** hinzu. Verwende das Interaktionsbild (nicht das Hintergrundbild), damit deine Hotspots auf jeder Bildschirmgröße exakt über den richtigen Stellen im Bild bleiben.
3.  Klicke auf **Element hinzufügen** und wähle **Hotspot hinzufügen**.
4.  Ziehe den Hotspot an die gewünschte Position auf dem Bild.
5.  Gib dem Hotspot im Tab „Allgemeines" des Element-Editors ein aussagekräftiges **Label** (z. B. „Motor").
6.  Wechsle zum Tab **Zusatz-Inhalte**, wähle **Popover** und schreibe eine kurze Beschreibung.
7.  Wiederhole die Schritte für weitere interessante Stellen.
8.  Markiere Elemente als **notwendig**, wenn Nutzer alle besucht haben müssen, um die Slide abzuschließen.
9.  Optional kannst du ein **Hintergrundbild** für dekorative Zwecke hinzufügen — zum Beispiel eine unscharfe oder abgedunkelte Version desselben Bildes, um den Bereich rund um das Interaktionsbild zu füllen.

### Eine Audio-Tour erstellen

1.  Füge im Tab „Erscheinungsbild" der Sidebar ein **Interaktionsbild** hinzu. So bleiben deine Hotspots unabhängig von der Bildschirmgröße exakt über den richtigen Stellen im Bild positioniert.
2.  Füge einen Hotspot hinzu und öffne den Element-Editor.
3.  Klicke im Tab „Allgemeines" auf **Audiodatei hinzufügen** und lade deinen Audioclip hoch.
4.  Der Hotspot zeigt automatisch Play-/Pause-Icons an. Benutzerdefinierte Icons sind nicht verfügbar, wenn eine Audiodatei vorhanden ist.
5.  Aktiviere optional **Notwendig, um die Slide abzuschließen**, damit Nutzer zuhören müssen, um die Slide abzuschließen.
6.  Wenn du neben dem Audio auch Text oder Medien anzeigen möchtest, verwende ein **Popover** (empfohlen gegenüber einem Overlay bei Hotspots mit Audio).

### Eine interaktive Aufdecksequenz erstellen

Verwende Aktionen, um ein schrittweises Erlebnis zu gestalten, bei dem die Interaktion mit einem Element ein anderes enthüllt oder verändert:

1.  Füge zwei oder mehr Elemente hinzu (z. B. „Schritt 1" und „Schritt 2").
2.  Setze „Schritt 2" im Tab „Erscheinungsbild" auf **Element ist ausgeblendet**, damit es zu Beginn unsichtbar ist.
3.  Wähle „Schritt 1" aus und öffne den Tab **Aktionen**.
4.  Setze den Auslöser auf **Beim Klick auf das Element**.
5.  Wähle „Schritt 2" als Zielelement.
6.  Deaktiviere in den Stil-Einstellungen der Aktion **Element ist ausgeblendet**, um es sichtbar zu machen.
7.  Wenn ein Nutzer jetzt auf „Schritt 1" klickt, erscheint „Schritt 2".

Du kannst diese Interaktionen über mehrere Elemente verketten, um geführte Rundgänge zu erstellen.

### Das Raster-Layout verwenden

Wenn du Elemente gleichmäßig verteilen möchtest (z. B. Hotspots in einem 3×2-Muster):

1.  Setze im Tab „Einstellungen" der Sidebar die **Spalten** auf 3 und die **Reihen** auf 2.
2.  Öffne für jedes Element den Tab „Erscheinungsbild" und setze das **Layout** auf **Am Raster ausrichten**.
3.  Verwende den Bereich **Elemente anordnen** im Tab „Einstellungen", um die Elemente per Drag-and-Drop in die gewünschte Rasterreihenfolge zu bringen.

Raster- und manuell positionierte Elemente können auf derselben Slide koexistieren. Denke daran, dass die Elementreihenfolge auch die Tastatur-Tab-Reihenfolge und die Screenreader-Reihenfolge beeinflusst — ordne die Elemente daher in einer logischen Lesereihenfolge an.