Testaus
Visuaalinen editori ilman koodia
Valitse elementti omalta livesivustoltasi ja muokkaa sitä ominaisuuspaneelissa tai lisää valmis osio. Variantti tallentuu, itse sivuun ei kosketa.
Tekoälyeditori
Kuvaile muutos ja katso, miten se syntyy
Kertokaa editorille omin sanoin, mitä haluatte, tai osoittakaa elementtiä ja kysykää. Tekoäly lukee sivun, ehdottaa muutoksia ja näyttää ne esikatseluna suoraan livesivustollanne. Mitään ei tallenneta ennen kuin otatte muutokset käyttöön.
- Yksi sana tai kokonainen osioKorjatkaa yksi otsikko tai rakentakaa yhdellä kehotteella uudelleen kokonainen hero-osio, valikko tai hintataulukko. Jokainen muutos listataan erikseen, joten voitte pitää vain haluamanne.
- JavaScriptiä vain, kun sitä tarvitaanUseimmissa testeissä on kyse teksteistä, tyyleistä ja merkkauksesta, ja juuri niitä tekoäly kirjoittaa. Kun testi tarvitsee toiminnallisuutta, esimerkiksi jotain, joka reagoi klikkaukseen tai vieritykseen, tekoäly kirjoittaa myös koodin, ja koodi pitää hyväksyä erikseen.
- Tekoäly lukee sivun puolestanneTekoäly käyttää pohjana tiivistelmää sivusta, jolla olette: sen rakennetta ja tekstejä. Kuvailette lopputuloksen, ja tekoäly löytää muutettavat elementit. Ei valitsimia, ei kehittäjää.
- Esikatselu ennen kuin mitään tallennetaanEhdotetut muutokset näkyvät livesivullanne, kukin omalla valintaruudullaan. Kun otatte ne käyttöön, niistä tulee variantin tavallisia muutoksia, jotka voi kumota tallentamiseen asti.
- Laadukkaat testit ilman koodiaKuka tahansa, joka osaa kuvailla paremman sivun, voi rakentaa sille variantin. Tekoäly vastaa samalla kielellä, jolla kirjoitatte, mutta sivun tekstit pysyvät sivun kielellä.
- Hinta näkyy etukäteenJokainen pyyntö kuluttaa tekoälykrediittejä, ja paneeli näyttää arvion ennen lähettämistä. Lomakkeisiin syötetyt tiedot ja sivun henkilötiedot peitetään ennen kuin mitään lähetetään.
Editori avautuu Chromen sivupaneelista ja lataa oikean sivustonne kehykseen, joten osoitatte sitä, mitä haluatte muuttaa, sen sijaan että kuvailisitte sen tiketissä. Elementin valitseminen avaa ominaisuuspaneelin: typografia, välit vedettävässä laatikkomallissa, koko, asettelu, tausta ja reuna sekä haku kaikista selaimen tuntemista CSS-ominaisuuksista. Jokainen muutos tallentuu muokkaamaanne varianttiin, ei koskaan sivuun.
Normal-, Hover-, Focus- ja Active-kytkimellä muotoilette elementin vuorovaikutustilat ilman CSS:ää, joten painikkeen väri voi vaihtua hover-tilassa variantissa samalla tavalla kuin tyylitiedostossanne. Tekstiä muokataan kaksoisklikkaamalla suoraan paikallaan, ja linkeillä, kuvilla (myös responsiivisilla kuvilla, joita useimmat Shopify-kaupat käyttävät), alt-teksteillä ja saavutettavuusnimikkeillä on omat kenttänsä.
Muutokset eivät rajoitu siihen, mitä sivulla jo on. Add-välilehti on lohkojen, asettelujen ja median kirjasto hero-osiosta tai UKK-osiosta mobiilin kiinnitettyyn ostopalkkiin, ja jokainen niistä omaksuu sivuston omat fontit ja värit siinä kohdassa, johon se sijoittuu. Mikä tahansa muutoksen teksti voi sisältää sivun omaa dataa, joten yksi muutos voi näyttää kunkin tuotteen oman hinnan.
Muutoslista näyttää selkokielellä kaiken, mitä variantti tekee (Moved, Added button, Heading text), kumoaminen ja uudelleen tekeminen toimivat luotettavasti, ja tallennuksen aikana tehdyt muokkaukset säilyvät. Tuo lista on variantti. Sitä sovelletaan kävijän sivulla, ja siitä toteutuksen luovutus myöhemmin poimii kehittäjälle sen, mitä pitää kovakoodata.
Editori yhdellä silmäyksellä
Yksi näkymä kaikelle, mitä testi muuttaa
Layers-näkymä ja komponentit vasemmalla, livesivunne keskellä, ominaisuuspaneeli oikealla. Jokainen alla oleva osio esittelee yhden sen osan toiminnassa.
Chromen sivupaneeli
Avaa editori sivulta, jota katsot
Laajennus telakoituu Chromen sivupaneeliin sivuston viereen ja seuraa välilehteä, jolla olette. Se tunnistaa sivuston, listaa sen testit ja avaa editorin tälle sivulle eikä sille sivulle, jolta testi sattui alkamaan.
- Täyskorkea ja kooltaan säädettävä, ja pysyy auki, kun klikkaatte sivua
- Suodattakaa tilan mukaan tai hakekaa nimellä tai testin numerolla
- Pyytää pääsyä sivustolle kerran, kun avaatte editorin siellä ensimmäistä kertaa
Komponenttikirjasto
Lisää kokonainen osio, ei vain uutta väriä
Vetäkää lohko Add-välilehdeltä sivulle, ja sininen viiva näyttää etukäteen, mihin se päätyy. Se tulee sivulle sivuston omalla fontilla ja otsikkokoilla, ja sen korostusväri otetaan siitä kohdasta, johon pudotitte sen.
- Kaksitoista lohkoa hero-osiosta ja UKK-osiosta kiinnitettyyn palkkiin ja ponnahdusikkunaan
- Osiot, säiliöt ja sarakkeet, jotka pinoutuvat puhelimissa
- Video, kuvakaruselli ja galleria, ja YouTube toistetaan sen evästeettömällä soittimella
Dynaaminen sisältö
Rakenna kerran, ja jokainen sivu näyttää oman datansa
Lisätkää sivun dataa mihin tahansa tekstiin, linkkiin tai kuvaan, valittuna listasta, joka näyttää sivun todelliset arvot. Kerran rakennettu banneri tervehtii jokaista kävijää sen kampanjan mukaan, josta hän saapui; verkkokaupassa kiinnitetty palkki näyttää kunkin tuotteen oman nimen ja hinnan.
- Kampanja-, kävijä- ja päivämäärädata jokaisella sivustolla ilman asetuksia
- Tuote-, hinta- ja ostoskoridata verkkokaupoissa, sivun omalla valuutalla
- Puuttuva data piilottaa elementin tai näyttää valitsemanne vara-arvon
Datasyötteet
Data omista järjestelmistänne testin sisällä
Yhdistäkää syöte, jonka sivusto jo julkaisee, kuten arvostelut, tapahtumapäivät, kampanjatekstit tai Google Merchant -tuotesyöte, valitkaa, minkä kohteen kukin kävijä näkee, ja rastittakaa kentät, joita sivu saa näyttää. Pertenton palvelimet hakevat sen ajastetusti, joten kävijät eivät koskaan odota teidän palvelintanne.
- Täsmäyttäkää kohde sivun osoitteeseen, URL-parametriin, kampanjaan tai tuotteeseen
- Tai näyttäkää juuri nyt ajastettu kohde ajoitettuja kampanjoita varten
- Kävijälle päätyvät vain rastittamanne kentät
Ominaisuuspaneeli ja tilat
Muotoile hover-, focus- ja active-tilat kirjoittamatta CSS:ää
Ominaisuuspaneeli muokkaa sitä, minkä valitsette: typografiaa, välejä laatikkomallissa, kokoa, asettelua, taustaa ja reunaa. Normal-, Hover-, Focus- ja Active-kytkin muotoilee vuorovaikutustilat, joten myös painikkeen hover-väri on osa varianttia.
- Hakekaa mitä tahansa selaimen tuntemaa CSS-ominaisuutta, ja jokaisessa kentässä on Reset
- Linkit, responsiiviset kuvat, alt-tekstit ja saavutettavuusnimikkeet
- Jokainen tilan muokkaus on tavallinen muutos, jonka voi kumota ja tallentaa
Tekstin muokkaus paikallaan
Kirjoita otsikko uudelleen suoraan paikallaan
Kaksoisklikatkaa mitä tahansa sivun tekstiä ja kirjoittakaa. Lihavointi, kursiivi ja alleviivaus toimivat kuten asiakirjassa, ja kun klikkaatte muualle, muokkauksesta tulee tavallinen muutos, jonka voi kumota täsmälleen ennalleen.
- Lihavointi, kursiivi ja alleviivaus näppäimistöltä, Shift+Enter rivinvaihtoon ja Escape peruutukseen
- Toimii tekstissä ja sen sisällä olevassa rivinsisäisessä merkkauksessa
- Näkyy selkokielisessä muutoslistassa nimellä Heading text
Jokainen osuma
Muuta kaikki täsmäävät elementit kerralla, myös ne, jotka latautuvat myöhemmin
Kohdistakaa muutos CSS-valitsimella ja lisätkää tyylejä tai HTML:ää kaikkeen, mihin se osuu. Myöhemmin loputtoman vierityksen, karusellien tai sovelluksen sisäisen navigoinnin kautta saapuvat elementit saavat myös muutoksen, kukin kerran.
- Liitä, lisää, ennen, jälkeen tai korvaa
- Reaaliaikainen laskuri siitä, moneenko elementtiin valitsin osuu
- Select similar tekee saman osoittamalla: se valitsee jokaisen elementin, joka on valitsemanne kaltainen
Muutokset ja tallennus
Jokainen muutos listattuna ymmärrettävin sanoin
Jokainen muokkaus listataan selkokielellä, kuten Moved, Added button tai Heading text, ja kumoaminen ja uudelleen tekeminen toimivat luotettavasti. Tallennuksen aikana tehdyt muokkaukset säilyvät, epäonnistunut tallennus voidaan yrittää uudelleen, ja sulkeminen kysyy ensin.
- Perukaa mikä tahansa yksittäinen muutos listasta
- Globaali CSS ja JavaScript ylimpänä, rivimäärineen
- Muutos, jonka elementti puuttuu sivulta, merkitään eikä piiloteta
Esikatselu missä tahansa
Näe variantti oikeassa puhelimessa
Laite-esikatselut näyttävät työpöydän, tabletin ja puhelimen koot editorin sisällä. Oikeaa laitetta varten Preview on another device antaa linkin, joka avaa tallennetun variantin millä tahansa puhelimella tai selaimella, sekä toisen linkin, joka palauttaa selaimen tavalliseen tilaan.
- Kirjautumistunnisteet poistetaan linkistä, joten se on turvallista jakaa
- Näyttää tallennetut muutokset testin ollessa käynnissä kyseisellä sivulla
- Avautuu missä tahansa selaimessa, ei vain Chromessa
Koodia, kun haluatte
HTML, CSS ja JavaScript samalla sivun datalla
Kaikki, mitä visuaaliset työkalut eivät osaa ilmaista, kirjoitetaan koodina varianttiin. Muokatkaa tai lisätkää HTML:ää elementin ympärille, tai kirjoittakaa variantin globaali CSS ja JavaScript, ja lukekaa sivun dataa funktiolla pertento.data().
- Insert page data -toiminto lisää HTML:ään paikkamerkin
- Read page data -toiminto lisää JavaScriptiin kutsun pertento.data()
- Globaalin CSS:n ja JavaScriptin voi tyhjentää kokonaan
Pikanäppäimet
Pikanäppäimet toistuviin toimintoihin
Pikanäppäimet toimivat heti, kun klikkaatte sivulla olevaa elementtiä, ja koko lista löytyy editorin työkalurivin näppäimistökuvakkeen takaa.
- Tallenna
- ⌘SCtrl+S
- Kumoa
- ⌘ZCtrl+Z
- Tee uudelleen
- ⇧⌘ZCtrl+Y
- Muokkaa HTML:ää
- E
- Monista
- D
- Piilota, tila säilyy
- H
- Lisää elementti
- A
- Poista elementti
- ⌫
- Valitse yläelementti
- ⇧↵
- Siirrä ylös tai alas
- ⌥↑⌥↓
- Avaa elementtivalikko
- ⇧F10
- Muokkaa tekstiä paikallaan