Experimente

Visueller No-Code-Editor

Wählen Sie ein Element auf Ihrer eigenen Live-Website und ändern Sie es im Eigenschaftenfeld, oder fügen Sie einen fertigen Abschnitt ein. Die Variante wird gespeichert; die Seite bleibt unberührt.

KI-Editor

Beschreiben Sie die Änderung und sehen Sie zu, wie sie entsteht

Sagen Sie dem Editor in eigenen Worten, was Sie möchten, oder zeigen Sie auf ein Element und fragen Sie. Die KI liest die Seite, schlägt Änderungen vor und zeigt sie direkt auf Ihrer Live-Website in der Vorschau. Gespeichert wird erst, wenn Sie sie übernehmen.

Der KI-Editor neben einer überladenen Landingpage: Ein Prompt bittet um eine klare Überschrift, einen einzigen Haupt-Button und Tarife, die sich leicht vergleichen lassen. Die KI schlägt fünf Änderungen vor und zeigt sie in der Vorschau, während sich die Seite aufgeräumt neu aufbaut, und die Änderungen werden übernommen und gespeichert.
  • Ein Wort oder ein ganzer AbschnittKorrigieren Sie eine Überschrift oder bauen Sie mit nur einem Prompt eine ganze Hero-Sektion, ein Menü oder eine Preistabelle um. Jede Änderung wird einzeln aufgeführt, und Sie behalten nur die, die Sie möchten.
  • JavaScript nur, wenn es nötig istDie meisten Tests betreffen Texte, Stile und Markup, und genau das schreibt die KI. Geht es um Verhalten, etwa um ein Element, das auf einen Klick oder auf Scrollen reagiert, schreibt sie auch den Code, und dieser Code muss eigens freigegeben werden.
  • Die KI liest die Seite für SieDie KI arbeitet mit einer Gliederung der Seite, auf der Sie gerade sind, also mit deren Struktur und Texten. Sie beschreiben das Ergebnis, und die KI findet die Elemente, die geändert werden müssen. Keine Selektoren, kein Entwickler.
  • Eine Vorschau, bevor etwas gespeichert wirdVorgeschlagene Änderungen erscheinen auf Ihrer Live-Seite, jede mit eigener Checkbox. Wenn Sie sie übernehmen, werden daraus gewöhnliche Änderungen in der Variante, die sich bis zum Speichern rückgängig machen lassen.
  • Starke Experimente ohne CodeWer eine bessere Seite beschreiben kann, kann auch die Variante dafür bauen. Die KI antwortet in der Sprache, in der Sie schreiben, und verfasst die Seitentexte in der Sprache der Seite.
  • Die Kosten sehen Sie vorherJede Anfrage verbraucht KI-Credits, und das Panel zeigt Ihnen vor dem Absenden eine Schätzung. Formulareingaben und personenbezogene Daten auf der Seite werden maskiert, bevor überhaupt etwas gesendet wird.
Live-WebsiteEigenschaftenfeldKomponenten

Der Editor öffnet sich in der Seitenleiste von Chrome und lädt Ihre echte Website in einem Frame, sodass Sie auf das zeigen, was Sie ändern wollen, statt es in einem Ticket zu beschreiben. Wenn Sie ein Element auswählen, öffnet sich das Eigenschaftenfeld: Typografie, Abstände über ein ziehbares Box-Modell, Größe, Layout, Hintergrund und Rand, dazu eine Suche über alle CSS-Eigenschaften, die der Browser kennt. Jede Änderung wird in der Variante festgehalten, die Sie gerade bearbeiten, nie an der Seite selbst.

Mit einem Umschalter für Normal, Hover, Focus und Active gestalten Sie die interaktiven Zustände eines Elements ohne CSS, sodass ein Button in der Variante beim Hovern die Farbe wechseln kann, genau wie in Ihrem Stylesheet. Text wird per Doppelklick dort bearbeitet, wo er steht, und Links, Bilder (einschließlich der responsiven Bilder, die die meisten Shopify-Shops nutzen), Alt-Texte und Labels für Barrierefreiheit haben eigene Felder.

Änderungen sind nicht auf das beschränkt, was schon auf der Seite steht. Der Add-Tab ist eine Bibliothek aus Blöcken, Layouts und Medien, von einer Hero-Sektion oder einer FAQ bis zu einer Sticky Bar mit Kaufen-Button auf dem Handy, und jedes Element übernimmt dort, wo es landet, die Schriften und Farben der Website. Jeder Text in einer Änderung kann Daten der jeweiligen Seite enthalten, sodass eine einzige Änderung bei jedem Produkt den passenden Preis zeigt.

Eine Änderungsliste zeigt in klaren Worten alles, was die Variante tut (Moved, Added button, Heading text). Rückgängig und Wiederholen funktionieren zuverlässig, und Bearbeitungen, die Sie während eines laufenden Speichervorgangs machen, bleiben erhalten. Diese Liste ist die Variante. Genau sie wird auf der Seite eines Besuchers angewandt, und aus ihr liest die Umsetzungsübergabe später ab, was ein Entwickler fest einbauen muss.

Kostenlos testenIn der Konsole ansehen

Der Editor auf einen Blick

Ein Bildschirm für alles, was ein Test ändert

Layers und Komponenten links, Ihre Live-Seite in der Mitte, das Eigenschaftenfeld rechts. Die folgenden Abschnitte zeigen jeden Teil davon in Aktion.

Der visuelle Editor auf einer Produktseite: Der Block Trust row wird aus dem Add-Tab gezogen und unter dem Warenkorb-Button abgelegt, seine Bewertungszeile wird an die Produktbewertung und die Rezensionsanzahl gebunden, die die Seite selbst liefert, und die Variante wird gespeichert.

Seitenleiste von Chrome

Öffnen Sie den Editor von der Seite aus, die Sie gerade ansehen

Die Erweiterung dockt neben der Website in der Seitenleiste von Chrome an und folgt dem aktiven Tab. Sie findet die Website, listet ihre Experimente und öffnet den Editor auf dieser Seite statt auf der Seite, auf der der Test angelegt wurde.

  • Volle Höhe, frei in der Größe veränderbar und bleibt offen, wenn Sie in die Seite klicken
  • Nach Status filtern oder nach Name oder Experimentnummer suchen
  • Fragt nur einmal nach Zugriff auf eine Website: wenn Sie den Editor dort zum ersten Mal öffnen
Die Seitenleiste von Chrome neben einer Produktseite, mit den Experimenten der Website im Entwurfsstatus; beim ausgewählten sind seine Varianten und ein Button Open editor zu sehen.

Komponentenbibliothek

Fügen Sie einen ganzen Abschnitt hinzu, nicht nur eine neue Farbe

Ziehen Sie einen Block aus dem Add-Tab auf die Seite, und eine blaue Linie zeigt vorab, wo er landen wird. Er übernimmt Schrift und Überschriftengrößen der Website und die Akzentfarbe der Stelle, an der Sie ihn ablegen.

  • Zwölf Blöcke, von einer Hero-Sektion und einer FAQ bis zu einer Sticky Bar und einem Pop-up
  • Abschnitte, Container und Spalten, die sich auf Smartphones stapeln
  • Video, Bildslider und Galerie, mit YouTube-Wiedergabe über den cookiefreien Player
Der Add-Tab neben einer Produktseite: Die FAQ-Kachel wird auf die Seite gezogen, eine blaue Linie markiert, wo sie landen wird, und unter dem Warenkorb-Button erscheint eine FAQ mit Pfeilsymbolen im selben Grün wie die Buttons der Website.

Dynamische Inhalte

Einmal bauen, und jede Seite setzt ihre eigenen Daten ein

Fügen Sie Seitendaten in jeden Text, jeden Link und jedes Bild ein, ausgewählt aus einer Liste der echten Werte der Seite. Ein einmal gebautes Banner begrüßt jeden Besucher mit der Kampagne, über die er gekommen ist; in einem Shop zeigt eine Sticky Bar bei jedem Produkt dessen Namen und Preis.

  • Kampagnen-, Besucher- und Datumsdaten auf jeder Website, ohne Einrichtung
  • Produkt-, Preis- und Warenkorbdaten in Shops, in der Währung der jeweiligen Seite
  • Fehlende Daten blenden das Element aus oder zeigen einen Fallback, den Sie wählen
Eine Sticky Bar mit Kaufen-Button, einmal aus Produktname und Preis gebaut, auf einem Smartphone: Nacheinander zeigt sie auf drei verschiedenen Produktseiten jeweils deren Namen und Preis.

Datenfeeds

Daten aus Ihren eigenen Systemen, direkt im Test

Binden Sie einen Feed an, den die Website bereits veröffentlicht, etwa Rezensionen, Veranstaltungstermine, Kampagnentexte oder einen Google-Merchant-Produktfeed, wählen Sie, welchen Eintrag jeder Besucher sieht, und haken Sie die Felder an, die eine Seite zeigen darf. Die Server von Pertento rufen ihn nach Zeitplan ab, sodass Besucher nie auf Ihren Server warten.

  • Den Eintrag nach Seitenadresse, URL-Parameter, Kampagne oder Produkt zuordnen
  • Oder für zeitlich begrenzte Aktionen den Eintrag zeigen, der laut Zeitplan gerade aktiv ist
  • Nur die Felder, die Sie anhaken, gelangen jemals zu einem Besucher
Ein Rezensionsfeed in den Websiteeinstellungen, per SKU dem Produkt zugeordnet und stündlich aktualisiert, mit zwei angehakten Feldern, und die Produktseite ersetzt ihren Fallback durch den Bewertungsdurchschnitt und die Anzahl der Rezensionen, die der Feed liefert.

Eigenschaftenfeld und Zustände

Gestalten Sie Hover, Focus und Active, ohne CSS zu schreiben

Im Eigenschaftenfeld bearbeiten Sie alles, was Sie auswählen: Typografie, Abstände an einem Box-Modell, Größe, Layout, Hintergrund und Rand. Mit einem Umschalter für Normal, Hover, Focus und Active gestalten Sie die interaktiven Zustände, sodass auch die Hover-Farbe eines Buttons Teil der Variante ist.

  • Suche über alle CSS-Eigenschaften, die der Browser kennt, mit Reset an jedem Feld
  • Links, responsive Bilder, Alt-Texte und Labels für Barrierefreiheit
  • Jede Bearbeitung eines Zustands ist eine gewöhnliche Änderung, mit Rückgängig und Speichern
Das Eigenschaftenfeld: Sein Zustandsumschalter wird von Normal auf Hover gestellt und ein dunklerer blauer Hintergrund gesetzt, während der Button Start free trial auf einer Preiskarte unter dem Mauszeiger diese Farbe annimmt und sich anhebt.

Text direkt auf der Seite

Schreiben Sie eine Überschrift dort um, wo sie steht

Doppelklicken Sie auf einen beliebigen Text auf der Seite und tippen Sie los. Fett, Kursiv und Unterstrichen funktionieren wie in einem Dokument, und wenn Sie wegklicken, wird die Bearbeitung zu einer gewöhnlichen Änderung, die sich exakt rückgängig machen lässt.

  • Fett, Kursiv und Unterstrichen per Tastatur, Shift+Enter für einen Zeilenumbruch, Escape zum Abbrechen
  • Funktioniert mit Text und dem Inline-Markup darin
  • In der Änderungsliste in klaren Worten aufgeführt, als Heading text
Eine Überschrift auf einer Landingpage, per Doppelklick an Ort und Stelle umgeschrieben, darüber die Symbolleiste für Fett, Kursiv und Unterstrichen, und die Bearbeitung erscheint in der Änderungsliste.

Jeder Treffer

Ändern Sie alle passenden Elemente auf einmal, auch solche, die erst später geladen werden

Wählen Sie per CSS-Selektor Elemente aus und fügen Sie allen Treffern Stile oder HTML hinzu. Elemente, die später durch endloses Scrollen, Karussells oder Navigation innerhalb der App hinzukommen, erhalten die Änderung ebenfalls, jedes genau einmal.

  • Am Ende anhängen, am Anfang einfügen, davor, danach oder ersetzen
  • Ein Live-Zähler der passenden Elemente
  • Select similar erledigt dasselbe per Zeigen, für alle Elemente, die dem gewählten gleichen
Das CSS-Selektor-Werkzeug erfasst die Artikelkarten einer Blog-Übersicht, zwölf Treffer: Auf jeder Karte erscheint nacheinander ein Badge New, und eine weitere Reihe, die durch endloses Scrollen nachgeladen wird, trägt es bereits, wenn sie erscheint.

Änderungen und Speichern

Jede Änderung aufgelistet, in verständlichen Worten

Jede Bearbeitung wird in klaren Worten aufgeführt, etwa Moved, Added button oder Heading text, und lässt sich zuverlässig rückgängig machen und wiederholen. Bearbeitungen während eines laufenden Speichervorgangs bleiben erhalten, ein fehlgeschlagener Speichervorgang lässt sich erneut starten, und vor dem Schließen wird erst nachgefragt.

  • Jede einzelne Änderung aus der Liste zurücknehmen
  • Globales CSS und JavaScript ganz oben, mit ihrer Zeilenanzahl
  • Eine Änderung, deren Element auf der Seite fehlt, wird markiert, nicht ausgeblendet
Die Änderungsliste einer Variante füllt sich mit vier Bearbeitungen in klaren Worten, die letzte wird rückgängig gemacht und wiederhergestellt, und der Status wechselt von ungespeicherten Änderungen über den Speichervorgang bis dahin, dass alle Änderungen gespeichert sind.

Vorschau überall

Sehen Sie die Variante auf einem echten Smartphone

Gerätevorschauen zeigen im Editor Desktop-, Tablet- und Smartphone-Größen. Für den echten Test liefert Preview on another device einen Link, der die gespeicherte Variante auf jedem Smartphone oder in jedem Browser öffnet, und einen zweiten Link, der diesen Browser wieder in den Normalzustand versetzt.

  • Anmelde-Tokens werden aus dem Link entfernt, er lässt sich also sicher teilen
  • Zeigt die gespeicherten Änderungen, während das Experiment auf dieser Seite läuft
  • Öffnet sich in jedem Browser, nicht nur in Chrome
Das Panel Preview on another device mit einem Link und einem Kopieren-Button, der das Kopieren bestätigt, neben einem Smartphone, das die Produktseite der Variante zeigt.

Code, wenn Sie möchten

HTML, CSS und JavaScript mit denselben Seitendaten

Alles, was die visuellen Werkzeuge nicht ausdrücken können, wird als Code in der Variante geschrieben. Bearbeiten oder ergänzen Sie HTML rund um ein Element, oder schreiben Sie das globale CSS und JavaScript der Variante, und lesen Sie die Daten der Seite mit pertento.data().

  • Insert page data fügt dem HTML ein Token hinzu
  • Read page data fügt dem JavaScript einen Aufruf von pertento.data() hinzu
  • Globales CSS und JavaScript lassen sich vollständig leeren
Der Code-Editor für das JavaScript einer Variante: Er liest die Kampagne des Besuchers mit pertento.data() und ändert die Überschrift der Seite für Besucher, die über eine bestimmte Kampagne gekommen sind.

Tastenkürzel

Tastenkürzel für Aktionen, die Sie immer wieder ausführen

Tastenkürzel funktionieren, sobald Sie auf ein Element auf der Seite klicken, und die vollständige Liste finden Sie hinter dem Tastatursymbol in der Symbolleiste des Editors.

Speichern
⌘SCtrl+S
Rückgängig
⌘ZCtrl+Z
Wiederholen
⇧⌘ZCtrl+Y
HTML bearbeiten
E
Duplizieren
D
Ausblenden, Platz bleibt erhalten
H
Element hinzufügen
A
Element entfernen
⌫
Elternelement auswählen
⇧↵
Nach oben oder unten verschieben
⌥↑⌥↓
Elementmenü öffnen
⇧F10
Text direkt bearbeiten

Mehr in diesem Bereich

Bessere Experimente, bessere Conversions

Test on all visitors with the world’s lightest script and make confident decisions powered by real-time reporting.

Kostenlos testenDemo buchen