# Visual Editor URL: https://docs.ablyft.com/de/guides/experiments/visual-editor/ > Baue Variations, indem du deine eigene Website visuell bearbeitest, ohne Code zu schreiben. Mit dem Visual Editor änderst du deine Website per Klick: Texte bearbeiten, Bilder austauschen, Farben oder Layouts ändern. ABlyft speichert deine Änderungen als Teil der Variation und wendet sie bei Visitors an, die ihr zugewiesen sind. Du brauchst keine JavaScript- oder CSS-Kenntnisse, solltest aber verstehen, welche Änderungen du vornimmst. ## Bevor du beginnst * Das Experiment braucht eine **Example URL**: die Seite, die du bearbeiten möchtest. Siehe [Ein Experiment erstellen](https://docs.ablyft.com/de/guides/experiments/create-experiment/). * Das **Snippet muss auf dieser Seite installiert sein**, weil der Editor über das Snippet geladen wird. Siehe [Snippet einbinden](https://docs.ablyft.com/de/developers/installation/snippet/). * Du brauchst die Rolle Member, Admin oder Owner. ## Den Editor öffnen 1. Öffne das Experiment und erstelle eine Variation vom Typ **Visual Editor**, siehe [Variations](https://docs.ablyft.com/de/guides/experiments/variations/). Der Editor öffnet sich direkt, nachdem du auf **Create variation** geklickt hast. 2. Um eine bestehende Variation später zu bearbeiten, klicke in ihrer Zeile der Card **Variations** auf **Edit**. ABlyft öffnet deine Example URL mit zwei zusätzlichen URL-Parametern, zum Beispiel: ```text https://example.com/product?ablyft_editor_variation=12345&ablyft_editor_token=YOUR_EDITOR_TOKEN ``` Die Parameter sind unter [URL parameters](https://docs.ablyft.com/de/developers/reference/url-parameters/#ablyft_editor_variation-and-ablyft_editor_token) beschrieben. `ablyft_editor_variation` ist die ID der Variation, die du bearbeitest, `ablyft_editor_token` ist ein persönlicher Token, der **8 Stunden** gültig ist. Findet das Snippet den Token, lädt es den Editor über deiner Seite. > **Halte den Editor-Link privat:** Der Link enthält deinen persönlichen Editor-Token. Teile ihn nicht. Jedes Mal, wenn du den Editor öffnest, erstellt > ABlyft einen neuen Token und macht deinen vorherigen ungültig, sodass ein älterer Editor-Tab eventuell nicht mehr > funktioniert. Lädt der Editor nicht, schließe ihn und klicke erneut auf **Edit**. ## Änderungen vornehmen und speichern Wähle ein Element auf der Seite aus und ändere es im Editor. ABlyft speichert jede Änderung zusammen mit einem CSS-Selektor, der das Element identifiziert. Sieht ein Visitor die Variation, findet das Snippet das Element über den Selektor und wendet die Änderung an, zum Beispiel neuen Text, HTML, einen Link, eine Bildquelle, eine Klasse oder Styles. Deine Änderungen werden in der Variation gespeichert. Du kannst sie unter **Edit settings** der Variation im Feld **Settings from Visual Editor** einsehen (ein vom Editor erzeugtes JSON-Dokument). Im selben Bereich kannst du einer Visual-Editor-Variation **JS code** und **CSS code** hinzufügen, wenn du etwas brauchst, das der Editor nicht kann. Prüfe das Ergebnis mit der Preview, siehe [Preview & QA](https://docs.ablyft.com/de/guides/experiments/preview-and-qa/). ## Editor-Erweiterungen Editor-Erweiterungen sind vorgefertigte Bausteine, die eine Änderung im Editor nutzen kann. Jede Erweiterung bringt ihr eigenes HTML, CSS und JavaScript mit. ABlyft stellt sie bereit; in deinem Project gibt es dafür keine Einstellung. Nutzt eine Variation eine Erweiterung, nimmt ABlyft sie automatisch in dein Snippet auf. ## Gut zu wissen > **Selektoren hängen von deiner Seite ab:** Der Editor adressiert Elemente über CSS-Selektoren. Ändern deine Entwickler später das HTML der Seite (zum Beispiel > Klassennamen), findet eine Änderung ihr Element möglicherweise nicht mehr. Zeigt eine Variation ihre Änderungen nicht, > siehe [Änderungen fehlen](https://docs.ablyft.com/de/guides/troubleshooting/changes-missing/). * Wird eine Seite im Editor nicht richtig geladen, wende dich an den ABlyft-Support. * Mit dem Typ **Code** baust du dieselben Änderungen von Hand, siehe [Variations](https://docs.ablyft.com/de/guides/experiments/variations/). ## Nächste Schritte - [Preview & QA](https://docs.ablyft.com/de/guides/experiments/preview-and-qa/): Sieh deine Änderungen so, wie Visitors sie sehen werden. - [Variations](https://docs.ablyft.com/de/guides/experiments/variations/): Andere Variation-Typen und Code. - [Änderungen fehlen](https://docs.ablyft.com/de/guides/troubleshooting/changes-missing/): Wenn eine Änderung nicht erscheint.