Zum Hauptinhalt springen
Sehen Sie sich das Video-Tutorial für Anweisungen zur Verwendung des grafischen Editors an. Nach der Erstellung eines Kontos und der Installation des Kameleoon-Skripts können Sie Experimente erstellen und starten. Verwenden Sie den grafischen Editor, um Experimente mit wenigen Klicks zu ändern. Hier sind einige Tipps, bevor Sie beginnen:
  • Der grafische Editor funktioniert nicht im Inkognito-Modus.
  • Wenn seitenübergreifende Cookies blockiert sind, funktioniert der grafische Editor nicht.
  • Mozilla blockiert Cookies standardmäßig. Wenn Sie Mozilla verwenden, müssen Sie Cookies manuell aktivieren.
Verbessern Sie die Nutzung des grafischen Editors mit der Kameleoon Grafischer Editor-Erweiterung. Um Probleme mit dem grafischen Editor zu beheben und bewährte Praktiken zu sehen, siehe den Fehlerbehebungsartikel.

Vorteile für den Nutzer

  • Verbesserte Leistung und Kompatibilität.
  • Intuitive Benutzeroberfläche für eine bessere Erfahrung und Benutzerfreundlichkeit.
  • Möglichkeit, Batch-Bearbeitungen über mehrere Seiten hinweg vorzunehmen.
  • Erweiterte Anpassungsoptionen.
  • Nahtlose Integration mit Kameleoons Widget Studio.
  • KI-gestützte Funktionen für die Inhaltsgenerierung, CSS-Selektorbehandlung und Design-Variationen.

Den grafischen Editor öffnen

Der Bearbeitungsmodus von Kameleoon bietet die Werkzeuge zum Erstellen von Webseiten-Variationen und zum Starten von A/B-Experimenten.

Über Ihre Website

So starten Sie Kameleoon:
  1. Navigieren Sie zu einer Webseite, auf der Sie das Kameleoon-Skript installiert haben.
  2. Drücken Sie Shift + F2 unter Windows oder fn + Shift + F2 unter Mac.
Wenn nichts passiert, fügen Sie #kameleooon=true am Ende Ihres Codes hinzu.
  1. Sobald Kameleoon geladen ist, öffnet sich ein Pop-in. Geben Sie Ihren Benutzernamen und Ihr Passwort ein, um auf den Editor zuzugreifen.
  2. Ein Pop-in öffnet sich und fordert Sie auf, ein Experiment auszuwählen (wenn Sie bereits eines erstellt haben) oder ein neues zu erstellen. Klicken Sie auf Create, um ein Experiment zu erstellen.
  3. Geben Sie die Informationen zu Ihrem Experiment ein und wählen Sie Classic A/B unter Experiment type.
  4. Klicken Sie auf Start.
Der grafische Editor öffnet sich auf Ihrer Webseite.

Über die Kameleoon-App

Sie können den Editor auch über die Kameleoon-App starten.
  1. Melden Sie sich bei Ihrer Kameleoon-App an.
  2. Klicken Sie auf New experiment > With the graphic editor.
  3. Geben Sie die Informationen zu Ihrem Experiment ein und wählen Sie Graphic A/B unter Experiment type.
  4. Klicken Sie auf Create.
Der grafische Editor öffnet sich auf Ihrer Webseite.

Struktur

Experiment-Panel (linke Seite)

Funktion: Verwaltet das aktuelle Experiment, einschließlich Variationen und Elementen auf der Seite. Funktionen:
  • Variationen und Elemente hinzufügen.
  • CSS-Selektoren bearbeiten.
  • Auf verschiedenen Seiten vorhandene Elemente anzeigen und verwalten.

Hauptbearbeitungsbereich (Mitte)

Funktion: Ermöglicht die direkte Interaktion mit Webseitenelementen zur Bearbeitung. Funktionen:
  • Text, Bilder und andere Inhalte auswählen und ändern.
  • Auf Bearbeitungs-Shortcuts zugreifen.

Rechtes Panel (rechte Seite)

Tabs: Design, Zustand, Verlauf Funktionen:
  • Inhalt, Text, Hintergrund, Rahmen, Schatten, Padding, Margin und mehr anpassen.
  • Elementzustände verwalten (z. B. default, hovered, active, focus, disabled).
  • Änderungsverlauf für jedes Element verwalten.

Obere Symbolleiste

Funktion: Bietet Werkzeuge zum Anzeigen und Finalisieren von Änderungen. Funktionen:
  • Wechseln des Gerätemodus.
  • Änderungen simulieren.
  • Das Experiment finalisieren.

Die Anzeige des grafischen Editors anpassen

  • Zoom: Passen Sie die Zoomstufe an Ihren Bildschirm und Ihre Vorlieben an.
  • Linkes Panel reduzieren: Minimieren Sie das linke Panel, um den Arbeitsbereich zu vergrößern.
  • Linkes Panel ausblenden: Blenden Sie das linke Panel vollständig aus, um eine ablenkungsfreie Ansicht zu erhalten.
  • Vollbildmodus: Erweitern Sie den Editor auf den Vollbildmodus für ein immersives Bearbeitungserlebnis.

Simulation und Finalisierung

  • Simulation: Klicken Sie auf SIMULATE, um eine Vorschau anzuzeigen, wie die Änderungen auf Ihrer Website aussehen und funktionieren werden.
  • Finalisierung: Klicken Sie auf FINALIZE, um auf die Finalisierungsschritte zuzugreifen.

Gerätewechsel

Verwenden Sie die obere Symbolleiste, um zwischen verschiedenen Geräteansichten (Desktop, Tablet, Mobil) zu wechseln, um sicherzustellen, dass das Design responsiv ist und auf allen Geräten korrekt angezeigt wird.

Kameleoon Grafischer Editor-Erweiterung

Verbessern Sie die Nutzung des grafischen Editors mit der Kameleoon Grafischer Editor-Erweiterung.

Wann sollte die Grafischer Editor-Erweiterung verwendet werden?

  • Einige Websites beschränken die Verwendung eines iframes. Um iframe-Einschränkungen zu beheben, verwenden Sie die Grafischer Editor-Erweiterung, um diese Beschränkungen zu überschreiben und den grafischen Editor zu starten.
  • Bestimmte Websites zeigen eine mobile Version an, wenn sie einen mobilen User-Agent erkennen. Um sicherzustellen, dass der grafische Editor die mobile Version korrekt anzeigt, muss der Browser sich als mobiles Gerät identifizieren. Die Erweiterung erleichtert den Prozess der mobilen Identifizierung.

So installieren Sie die Grafischer Editor-Erweiterung

Besuchen Sie den Chrome Store, um die Kameleoon Grafischer Editor-Erweiterung herunterzuladen.