Experimenten
No-code visuele editor
Selecteer een element op uw eigen live site en wijzig het in de inspector, of voeg een kant-en-klare sectie toe. De variant wordt opgeslagen; de pagina blijft ongemoeid.
AI-editor
Beschrijf de wijziging en zie hoe die ontstaat
Vertel de editor in gewone taal wat u wilt, of wijs een element aan en stel uw vraag. De AI leest de pagina, stelt wijzigingen voor en laat ze meteen zien op uw live site. Er wordt pas iets opgeslagen als u ze toepast.
- Eén woord of een hele sectieVerbeter één kop, of bouw met één prompt een complete hero, een menu of een prijstabel om. Elke wijziging staat apart in de lijst, zodat u zelf kiest welke u houdt.
- JavaScript alleen als het nodig isDe meeste tests gaan over tekst, opmaak en markup, en dat is precies wat de AI schrijft. Vraagt een test om gedrag, bijvoorbeeld iets dat op een klik of op scrollen reageert, dan schrijft de AI ook de code, en die code keurt u apart goed.
- De AI leest de pagina voor uDe AI werkt met een overzicht van de pagina waarop u bent: de opbouw en de teksten. U beschrijft het resultaat, en de AI vindt de elementen die moeten veranderen. Geen selectors, geen ontwikkelaar.
- Een voorvertoning voordat er iets wordt opgeslagenVoorgestelde wijzigingen verschijnen op uw live pagina, elk met een eigen selectievakje. Past u ze toe, dan worden het gewone wijzigingen in de variant, die u tot het opslaan ongedaan kunt maken.
- Sterke experimenten zonder codeWie een betere pagina kan beschrijven, kan er ook de variant voor bouwen. De AI antwoordt in de taal waarin u schrijft, maar de teksten op de pagina blijven in de taal van de pagina.
- U ziet eerst wat het kostElk verzoek verbruikt AI-credits, en het paneel toont een schatting voordat u het verzendt. Formulierinvoer en persoonsgegevens op de pagina worden afgeschermd voordat er iets wordt verstuurd.
De editor opent vanuit het zijpaneel van Chrome en laadt uw echte site in een frame, zodat u aanwijst wat u wilt veranderen in plaats van het in een ticket te beschrijven. Selecteert u een element, dan opent de inspector: typografie, witruimte via een boxmodel waarin u kunt slepen, grootte, layout, achtergrond en rand, en een zoekfunctie voor elke CSS-eigenschap die de browser kent. Elke wijziging wordt vastgelegd bij de variant die u bewerkt, nooit bij de pagina.
Een schakelaar met Normal, Hover, Focus en Active geeft de interactieve statussen van een element opmaak zonder CSS, zodat een knop in de variant van kleur kan veranderen bij hover, zoals dat in uw stylesheet zou gebeuren. Tekst bewerkt u met een dubbelklik waar die staat, en links, afbeeldingen (inclusief de responsieve afbeeldingen die de meeste Shopify-winkels gebruiken), alt-tekst en toegankelijkheidslabels hebben hun eigen velden.
Wijzigingen blijven niet beperkt tot wat al op de pagina staat. Het tabblad Add is een bibliotheek met blokken, layouts en media, van een hero of een FAQ tot een meescrollende koopbalk op mobiel, en elk blok neemt op de plek waar het terechtkomt de lettertypen en kleuren van de site over. Elke tekst in een wijziging kan data van de pagina zelf bevatten, zodat één wijziging bij elk product zijn eigen prijs kan tonen.
Een wijzigingenlijst toont in gewone taal alles wat de variant doet (Moved, Added button, Heading text), met betrouwbaar ongedaan maken en opnieuw uitvoeren, en bewerkingen die u maakt terwijl er wordt opgeslagen, blijven behouden. Die lijst is de variant. Dat is wat er op de pagina van een bezoeker wordt toegepast, en wat de implementatieoverdracht later leest om een ontwikkelaar te vertellen wat hij moet hardcoderen.
De editor in één oogopslag
Eén scherm voor alles wat een test wijzigt
Layers en componenten links, uw live pagina in het midden, de inspector rechts. Elke sectie hieronder laat één onderdeel ervan in actie zien.
Zijpaneel van Chrome
Open de editor vanaf de pagina die u bekijkt
De extensie staat in het zijpaneel van Chrome, naast de site, en volgt het tabblad waarop u bent. Ze vindt de website, toont de experimenten ervan en opent de editor op deze pagina, niet op de pagina waarop de test ooit begon.
- Over de volle hoogte, in grootte aan te passen, en blijft open wanneer u in de pagina klikt
- Filter op status, of zoek op naam of experimentnummer
- Vraagt één keer toegang tot een site, de eerste keer dat u daar de editor opent
Componentenbibliotheek
Voeg een hele sectie toe, niet alleen een nieuwe kleur
Sleep een blok vanuit het tabblad Add naar de pagina, en een blauwe lijn laat vooraf zien waar het terechtkomt. Het verschijnt in het lettertype en de kopgroottes van de site, met de accentkleur van de plek waar u het neerzette.
- Twaalf blokken, van een hero en een FAQ tot een meescrollende balk en een pop-up
- Secties, containers en kolommen die op telefoons onder elkaar komen te staan
- Video, een afbeeldingsslider en een galerij, met YouTube afgespeeld via de no-cookie-speler
Dynamische content
Bouw het één keer, en elke pagina vult haar eigen data in
Voeg data van de pagina in elke tekst, link of afbeelding in, gekozen uit een lijst met de echte waarden van de pagina. Een banner die u één keer bouwt, begroet elke bezoeker met de campagne waar hij vandaan kwam; in een webshop toont een meescrollende balk de naam en prijs van elk product.
- Campagne-, bezoekers- en datumdata op elke site, zonder configuratie
- Product-, prijs- en winkelwagendata in webshops, in de valuta van de pagina
- Ontbrekende data verbergt het element, of toont een terugvaloptie die u kiest
Datafeeds
Data uit uw eigen systemen, in de test
Koppel een feed die de site al publiceert, zoals reviews, evenementdatums, campagneteksten of een productfeed van Google Merchant, kies welk item elke bezoeker ziet, en vink de velden aan die een pagina mag tonen. De servers van Pertento halen hem volgens een schema op, zodat bezoekers nooit op uw server wachten.
- Koppel het item aan het pagina-adres, een URL-parameter, de campagne of het product
- Of toon het item dat nu gepland staat, voor tijdgebonden acties
- Een bezoeker krijgt nooit meer te zien dan de velden die u aanvinkt
Inspector en statussen
Geef hover, focus en active opmaak zonder CSS te schrijven
De inspector bewerkt wat u ook selecteert: typografie, witruimte via een boxmodel, grootte, layout, achtergrond en rand. Een schakelaar met Normal, Hover, Focus en Active geeft de interactieve statussen opmaak, zodat de hoverkleur van een knop ook deel uitmaakt van de variant.
- Zoek elke CSS-eigenschap die de browser kent, met Reset bij elk veld
- Links, responsieve afbeeldingen, alt-tekst en toegankelijkheidslabels
- Elke bewerking van een status is een gewone wijziging, met ongedaan maken en opslaan
Tekst ter plekke
Herschrijf een kop waar hij staat
Dubbelklik op een tekst op de pagina en typ. Vet, cursief en onderstrepen werken zoals in een document, en zodra u wegklikt, wordt de bewerking een gewone wijziging die u met ongedaan maken precies terugdraait.
- Vet, cursief en onderstrepen via het toetsenbord, Shift+Enter voor een regeleinde, Escape om te annuleren
- Werkt op tekst en de inline markup erin
- In gewone taal opgenomen in de wijzigingenlijst, als Heading text
Elk overeenkomend element
Wijzig elk overeenkomend element tegelijk, ook de elementen die later laden
Kies een CSS-selector en voeg opmaak of HTML toe aan alles wat hij treft. Elementen die later binnenkomen via oneindig scrollen, carrousels of navigatie binnen de app krijgen de wijziging ook, elk één keer.
- Toevoegen, invoegen, ervoor, erna of vervangen
- Een live telling van hoeveel elementen overeenkomen
- Select similar doet hetzelfde door aan te wijzen, voor elk element dat lijkt op het element dat u koos
Wijzigingen en opslaan
Elke wijziging op een rij, in begrijpelijke taal
Elke bewerking staat in gewone taal op de lijst, zoals Moved, Added button of Heading text, met betrouwbaar ongedaan maken en opnieuw uitvoeren. Bewerkingen die u maakt terwijl er wordt opgeslagen, blijven behouden, een mislukte opslag kunt u opnieuw proberen, en bij het sluiten vraagt de editor eerst om bevestiging.
- Draai vanuit de lijst elke wijziging afzonderlijk terug
- Globale CSS en JavaScript bovenaan, met hun aantal regels
- Een wijziging waarvan het element op de pagina ontbreekt, wordt gemarkeerd en niet verborgen
Overal voorvertonen
Bekijk de variant op een echte telefoon
Voorvertoningen per apparaat tonen desktop-, tablet- en telefoonformaten in de editor. Wilt u het op een echt toestel zien, dan geeft Preview on another device een link die de opgeslagen variant op elke telefoon of in elke browser opent, en een tweede link die die browser weer normaal maakt.
- Aanmeldtokens worden uit de link verwijderd, zodat u hem veilig kunt delen
- Toont de opgeslagen wijzigingen terwijl het experiment op die pagina draait
- Opent in elke browser, niet alleen in Chrome
Code als u dat wilt
HTML, CSS en JavaScript, met dezelfde paginadata
Wat de visuele tools niet kunnen uitdrukken, schrijft u als code op de variant. Bewerk HTML rond een element of voeg die toe, of schrijf de globale CSS en JavaScript van de variant, en lees de data van de pagina met pertento.data().
- Insert page data voegt een token toe aan HTML
- Read page data voegt een aanroep van pertento.data() toe aan JavaScript
- Globale CSS en JavaScript kunnen volledig worden gewist
Sneltoetsen
Sneltoetsen voor de acties die u herhaalt
Sneltoetsen werken zodra u op een element op de pagina klikt, en de volledige lijst zit achter het toetsenbordpictogram in de werkbalk van de editor.
- Opslaan
- ⌘SCtrl+S
- Ongedaan maken
- ⌘ZCtrl+Z
- Opnieuw uitvoeren
- ⇧⌘ZCtrl+Y
- HTML bewerken
- E
- Dupliceren
- D
- Verbergen met behoud van ruimte
- H
- Element toevoegen
- A
- Element verwijderen
- ⌫
- Bovenliggend element selecteren
- ⇧↵
- Omhoog of omlaag verplaatsen
- ⌥↑⌥↓
- Elementmenu openen
- ⇧F10
- Tekst ter plekke bewerken