# Hinzufügen interaktiver Punkte

Interaktive Punkte sind die anklickbaren Hotspots, die Ihre Interaktiven Räume zum Leben erwecken. Diese Anleitung behandelt alles, was Sie über das Erstellen, Positionieren und Stylen dieser interaktiven Elemente wissen müssen.

## 🎯 Was sind interaktive Punkte?

Interaktive Punkte sind anklickbare Bereiche, die über Ihrem Hintergrundbild liegen und Produktinformationen, Links oder benutzerdefinierte Inhalte anzeigen. Wenn Besucher über diese Punkte hovern oder klicken, sehen sie:

* Produktdetails und Preisangaben
* Schnelle „In den Warenkorb“-Optionen
* Links zu Produktseiten
* Benutzerdefinierter Text oder Call-to-Action-Nachrichten

## 🛠️ Hinzufügen Ihres ersten interaktiven Punkts

### Schritt 1: Zugriff auf die Punkt-Einstellungen

1. **Designanpasser öffnen**
   * Navigieren Sie zu **Onlineshop → Themes**
   * Klicken Sie **Passen Sie** bei Plain Jane Interactive
2. **Abschnitt Interaktive Umgebung auswählen**
   * Klicken Sie auf Ihren Abschnitt „Interaktive Umgebung“
   * Scrollen Sie nach unten zu **Interaktive Punkte**
3. **Neuen Punkt hinzufügen**
   * Klicken Sie **Interaktiven Punkt hinzufügen**
   * Eine neue Punktkonfiguration wird angezeigt

### Schritt 2: Punktinhalt konfigurieren

#### Produktorientierte Punkte

1. **Produkt auswählen**
   * Klicken Sie **Produkt auswählen**
   * Wählen Sie aus dem Produktkatalog Ihres Shops
   * Produkttitel, Preis und Bild werden automatisch ausgefüllt
2. **Überschreibungsoptionen**
   * **Benutzerdefinierter Titel**: Überschreiben Sie den Produktnamen
   * **Benutzerdefinierte Beschreibung**: Fügen Sie spezifische Details hinzu
   * **Preis anzeigen**: Preisanzeige ein-/ausschalten

#### Benutzerdefinierte Link-Punkte

1. **Benutzerdefinierten Link aktivieren**
   * Schalten Sie **Benutzerdefinierten Link verwenden** auf EIN
   * Geben Sie Ihre Ziel-URL ein
   * Fügen Sie benutzerdefinierten Titel und Beschreibung hinzu

### Schritt 3: Positionieren Sie Ihren Punkt

#### Visuelle Positionierung

1. **X-Position (Horizontal)**
   * Wertebereich: 0–100%
   * 0% = Ganz linke Kante
   * 50% = Mitte
   * 100% = Ganz rechte Kante
2. **Y-Position (Vertikal)**
   * Wertebereich: 0–100%
   * 0% = Obere Kante
   * 50% = Mitte
   * 100% = Untere Kante

#### Positionierungstipps

* **Vorschau-Modus verwenden** um die Platzierung der Punkte in Echtzeit zu sehen
* **Mit kleinen Schritten feinabstimmen** (1–2% Anpassungen)
* **Auf verschiedenen Bildschirmgrößen testen** um eine richtige Platzierung sicherzustellen

## 🎨 Gestaltung Ihrer Punkte

### Optionen zur Punktdarstellung

#### Stiltypen

1. **Pulse (Standard)**
   * Animierter pulsierender Kreis
   * Ideal, um Aufmerksamkeit zu erzeugen
   * Subtile Bewegung fällt ins Auge
2. **Plus-Symbol**
   * Sauberes "+"-Symbol
   * Minimalistisch und modern
   * Gut für professionelle/unternehmerische Themes
3. **Punkt**
   * Einfacher kreisförmiger Indikator
   * Dezenteste Option
   * Fügt sich natürlich in Bilder ein

#### Farb-Anpassung

* **Primärfarbe**: Hauptfarbe des Punkts
* **Sekundärfarbe**: Akzent- oder Pulsfarbe
* **Textfarbe**: Text der Inhaltsüberlagerung
* **Hintergrundfarbe**: Punkt-Hintergrund

### Größe und Sichtbarkeit

* **Punktgröße**: Durchmesser anpassen (Standard: 40px)
* **Pulsintensität**: Animationsstärke steuern
* **Deckkraft**: Punkttransparenz einstellen
* **Z-Index**: Ebenenreihenfolge (höher = prominenter)

## 📱 Mobile Überlegungen

### Touch-freundliches Design

* **Mindestgröße**: 44px für einfaches Tippen
* **Abstände**: Mindestens 8px zwischen den Punkten
* **Kontrast**: Sicherstellen, dass Punkte auf Mobilgeräten sichtbar sind

### Mobil-spezifische Einstellungen

* **Auf Mobile anzeigen**: Sichtbarkeit der Punkte umschalten
* **Mobilgrößen-Multiplikator**: Größe für kleine Bildschirme anpassen
* **Vereinfachte Animationen**: Bewegung für bessere Performance reduzieren

## 🔧 Erweiterte Punktkonfiguration

### Hover-Effekte

```css
/* Benutzerdefinierte Hover-Animationen */
.interactive-point:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
```

### Benutzerdefinierte Inhaltsüberlagerungen

* **Rich-Text-Formatierung**: Verwenden Sie HTML in Beschreibungen
* **Bildüberlagerungen**: Produktbilder zu Tooltips hinzufügen
* **Videoinhalte**: Produktvideos einbetten
* **Sozialer Nachweis**: Bewertungen oder Sterne einbeziehen

### Bedingte Anzeige

* **Anzeigen/ausblenden basierend auf Gerät**: Mobil vs. Desktop
* **Zeitbasierte Anzeige**: Saisonale oder werbliche Inhalte
* **Nutzerverhalten**: Anderen Inhalt für wiederkehrende Besucher anzeigen

## 💡 Best Practices

### Strategische Platzierung

1. **Hauptprodukte hervorheben**
   * Bestseller oder Neuankömmlinge hervorheben
   * Fokus auf margenstarke Artikel
   * Logische Produktgruppen erstellen
2. **Natürliche Positionierung**
   * Platzieren Sie Punkte auf oder nahe tatsächlicher Produkte im Bild
   * Vermeiden Sie leere Flächen oder zufällige Platzierung
   * Berücksichtigen Sie den Blickverlauf des Betrachters
3. **Ausgewogene Verteilung**
   * Nicht alle Punkte in einem Bereich bündeln
   * Schaffen Sie visuellen Rhythmus im Raum
   * Lassen Sie Zwischenräume zwischen Elementen

### Content-Strategie

1. **Überzeugende Texte**
   * Verwenden Sie handlungsorientierte Sprache
   * Heben Sie einzigartige Funktionen oder Vorteile hervor
   * Halten Sie Texte prägnant und scanbar
2. **Preisstrategie**
   * Preise für sofortige Transparenz anzeigen
   * Verwenden Sie Aktionspreise, um Dringlichkeit zu erzeugen
   * Erwägen Sie, Preise für Luxusartikel zu verbergen
3. **Call-to-Action-Optimierung**
   * Klare, spezifische CTAs ("Jetzt kaufen", "Mehr erfahren")
   * Dringlichkeit schaffen, wenn angebracht
   * CTA-Stil an Markenstimme anpassen

## 🎪 Kreative Umsetzungsideen

### Saisonale Kampagnen

* **Feiertagskollektionen**: Interaktive Geschenkführer
* **Sommer/Winter**: Saisonale Produktpräsentationen
* **Zurück-zur-Schule**: Studenten-Essentials in Wohnheimumgebungen

### Lifestyle-Integration

* **Raum-Makeovers**: Vorher/Nachher mit kaufbaren Produkten
* **Outfit-Zusammensteller**: Komplettes Look-Koordination
* **Rezept-Integration**: Küchenwerkzeuge in Kochkontexten

### Markengeschichten

* **Blicke hinter die Kulissen**: Produktionsprozess mit Hervorhebung von Werkzeugen
* **Markenerbe**: Zeitstrahl der Geschichte mit Produktentwicklung
* **Nachhaltigkeit**: Umweltfreundliche Produkteigenschaften

## 📊 Performance-Optimierung

### Ladeüberlegungen

* **Bildoptimierung**: Hintergrundbilder komprimieren
* **Punktbegrenzungen**: Maximal 10–12 Punkte pro Abschnitt
* **Lazy Loading**: Punkte laden, wenn sie in den Sichtbereich kommen

### Analyseintegration

```javascript
// Interaktionen mit Punkten verfolgen
function trackPointClick(productId, pointPosition) {
  // An Analyseplattform senden
  gtag('event', 'interactive_point_click', {
    'product_id': productId,
    'position_x': pointPosition.x,
    'position_y': pointPosition.y
  });
}
```

## 🐛 Fehlerbehebung

### Häufige Probleme

#### Punkte werden nicht angezeigt

* **Positionierungswerte prüfen**: Muss 0–100% sein
* **Produktstatus verifizieren**: Stellen Sie sicher, dass Produkte veröffentlicht sind
* **Sichtbarkeit des Abschnitts**: Bestätigen Sie, dass der Abschnitt aktiviert ist

#### Anzeigeprobleme auf Mobilgeräten

* **Touch-Zielgröße**: Punktgröße für Mobilgeräte erhöhen
* **Viewport-Probleme**: Auf verschiedenen Gerätegrößen testen
* **Leistung**: Animationen auf langsamen Geräten reduzieren

#### Inhaltsüberlappung

* **Z-Index-Konflikte**: Ebenenreihenfolge anpassen
* **Tooltip-Positionierung**: Platzierung der Überlagerung konfigurieren
* **Responsive Breakpoints**: Verschiedene Positionen für verschiedene Bildschirme festlegen

### Leistungsprobleme

* **Langsames Laden**: Bilder optimieren und Punktanzahl reduzieren
* **Animationsverzögerung**: Effekte vereinfachen oder auf Mobilgeräten deaktivieren
* **Speichernutzung**: Implementieren Sie Lazy Loading für große Abschnitte

## 🔍 Testen und Optimieren

### A/B-Test-Ideen

* **Punktplatzierung**: Verschiedene Positionen testen
* **Visuelle Stile**: Pulsierende versus statische Punkte vergleichen
* **Inhaltstypen**: Produktinfos versus benutzerdefinierte Nachrichten
* **Farbschemata**: Markenfarben versus kontrastierende Farben testen

### Zu verfolgende Kennzahlen

* **Klickrate**: Punktklicks zu Produktseiten-Besuchen
* **Konversionsraten**: Käufe, die von interaktiven Punkten stammen
* **Interaktionsdauer**: Zeit, die mit Punkten interagiert wurde
* **Mobil vs. Desktop**: Leistungsunterschiede nach Gerät