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

/* 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

// 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