> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Erste Schritte mit dem grafischen Editor > Öffnen Sie den grafischen Editor von Kameleoon und navigieren Sie darin, um A/B-Experimentvariationen direkt auf Ihrer Website zu erstellen, ohne Code zu schreiben. *Sehen Sie sich das [Video-Tutorial](https://academy.kameleoon.com/get-started-with-web-experimentation/164219) für Anweisungen zur Verwendung des grafischen Editors an.* Der grafische Editor ist Kameleoons visuelles, codefreies Tool zum Erstellen von A/B-Experimentvariationen. Er wird direkt über Ihrer Website im Browser geladen, sodass Sie auf jedes Element klicken und es ändern können, ohne Code zu schreiben. Sie können Text aktualisieren, Bilder austauschen, Schaltflächen umgestalten und Layouts anpassen, dann Ihr Experiment in der Vorschau ansehen und sofort starten. Das Erstellen von Testvariationen erfordert normalerweise das Schreiben und Bereitstellen von Code, was einen Engpass verursacht, wenn Produktmanager, Marketingfachleute oder Designer auf Engineering-Ressourcen angewiesen sind. Der grafische Editor beseitigt diesen Engpass, sodass Ihr gesamtes Team unabhängig Experimente durchführen kann. **Bevor Sie beginnen:** * Der grafische Editor funktioniert nicht im Inkognito-Modus. * Wenn seitenübergreifende Cookies blockiert sind, funktioniert der grafische Editor nicht. * Firefox blockiert Cookies standardmäßig. Wenn Sie Firefox verwenden, müssen Sie Cookies manuell aktivieren. **Verbessern Sie die Nutzung des grafischen Editors mit der [Kameleoon Grafischer Editor-Erweiterung](#kameleoon-grafischer-editor-erweiterung).** Um Probleme mit dem grafischen Editor zu beheben und bewährte Praktiken zu sehen, [siehe den Fehlerbehebungsartikel](./troubleshooting-the-graphic-editor). ## 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 `#kameleoon=true` am Ende Ihrer URL hinzu. 3. Sobald Kameleoon geladen ist, öffnet sich ein Pop-in. Geben Sie Ihren Benutzernamen und Ihr Passwort ein, um auf den Editor zuzugreifen. 4. 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. 5. Geben Sie die Informationen zu Ihrem Experiment ein und wählen Sie **Classic A/B** unter **Experiment type**. 6. 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](https://login.kameleoon.com/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 ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/graphic-based-experiments/getting-started-with-the-graphic-editor/0.png) ### 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](https://chromewebstore.google.com/detail/kameleoon-graphical-edito/jglbnpagaignkdmebicmmblgmledhpip), um die Kameleoon Grafischer Editor-Erweiterung herunterzuladen.