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.
- Das Snippet muss auf dieser Seite installiert sein, weil der Editor über das Snippet geladen wird. Siehe Snippet einbinden.
- Du brauchst die Rolle Member, Admin oder Owner.
Den Editor öffnen
- Öffne das Experiment und erstelle eine Variation vom Typ Visual Editor, siehe Variations. Der Editor öffnet sich direkt, nachdem du auf Create variation geklickt hast.
- 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:
https://example.com/product?ablyft_editor_variation=12345&ablyft_editor_token=YOUR_EDITOR_TOKENDie Parameter sind unter URL parameters
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.
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.
- 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.