Eksperymenty
Wizualny edytor bez kodu
Wybierzcie element na waszej działającej witrynie i zmieńcie go w panelu właściwości albo wstawcie gotową sekcję. Zapisuje się wariant, a strona pozostaje nietknięta.
Edytor AI
Opiszcie zmianę i patrzcie, jak powstaje
Powiedzcie edytorowi zwykłymi słowami, czego chcecie, albo wskażcie element i zapytajcie. AI czyta stronę, proponuje zmiany i pokazuje ich podgląd na waszej działającej witrynie. Nic się nie zapisze, dopóki ich nie zastosujecie.
- Jedno słowo albo cała sekcjaPoprawcie jeden nagłówek albo jednym poleceniem przebudujcie całą sekcję hero, menu lub tabelę cen. Każda zmiana jest na liście osobno, więc zostawiacie tylko te, które chcecie.
- JavaScript tylko wtedy, gdy jest potrzebnyWiększość testów to zmiany w tekstach, stylach i markupie. Właśnie je pisze AI. Gdy test ma na coś reagować, na przykład na kliknięcie albo przewijanie, AI pisze też kod, a ten czeka na osobne zatwierdzenie.
- Czyta stronę za wasAI pracuje na zarysie strony, na której jesteście: na jej strukturze i tekstach. Wy opisujecie efekt, a AI znajduje elementy do zmiany. Bez selektorów i bez programisty.
- Podgląd, zanim cokolwiek się zapiszeProponowane zmiany pojawiają się na waszej działającej stronie, każda z własnym polem wyboru. Po zastosowaniu stają się zwykłymi zmianami w wariancie, które aż do zapisania można cofnąć.
- Mocne testy bez koduKto potrafi opisać lepszą stronę, ten zbuduje dla niej wariant. AI odpowiada w języku, w którym piszecie, a teksty na stronie zostawia w jej języku.
- Najpierw widzicie kosztKażde zapytanie zużywa kredyty AI, a panel pokazuje szacowany koszt jeszcze przed wysłaniem. Wartości z formularzy i dane osobowe na stronie są maskowane, zanim cokolwiek zostanie wysłane.
Edytor otwiera się w panelu bocznym Chrome i wczytuje waszą prawdziwą witrynę w ramce, więc wskazujecie to, co chcecie zmienić, zamiast opisywać to w zgłoszeniu. Wybranie elementu otwiera panel właściwości: typografia, odstępy na modelu pudełkowym, który można przeciągać, rozmiar, układ, tło i obramowanie, a także wyszukiwanie dowolnej właściwości CSS, jaką zna przeglądarka. Każda zmiana trafia do wariantu, który edytujecie, nigdy do samej strony.
Przełącznik Normal, Hover, Focus i Active pozwala stylować stany interaktywne elementu bez CSS, więc przycisk w wariancie może zmieniać kolor po najechaniu kursorem tak, jak robiłby to w waszym arkuszu stylów. Tekst edytuje się podwójnym kliknięciem tam, gdzie się znajduje, a linki, obrazy (łącznie z obrazami responsywnymi, których używa większość sklepów Shopify), tekst alternatywny i etykiety dostępności mają własne pola.
Zmiany nie ograniczają się do tego, co już jest na stronie. Zakładka Add to biblioteka bloków, układów i mediów, od sekcji hero albo FAQ po przyklejony pasek zakupu na telefonie, a każdy z nich przejmuje czcionki i kolory witryny w miejscu, do którego trafia. Każdy tekst w zmianie może zawierać dane samej strony, więc jedna zmiana może pokazywać cenę każdego produktu z osobna.
Lista zmian pokazuje prostymi słowami wszystko, co robi wariant (Moved, Added button, Heading text), z niezawodnym cofaniem i ponawianiem, a edycje wprowadzone w trakcie zapisywania są zachowywane. Ta lista to wariant. To ona jest nakładana na stronę u odwiedzającego i to z niej przekazanie do wdrożenia odczytuje później, co programista ma zakodować na stałe.
Edytor w skrócie
Jeden ekran na wszystko, co zmienia test
Panel Layers i komponenty po lewej, wasza działająca strona pośrodku, panel właściwości po prawej. Każda sekcja poniżej to jedna jego część, pokazana w działaniu.
Panel boczny Chrome
Otwórzcie edytor ze strony, którą właśnie oglądacie
Rozszerzenie otwiera się w panelu bocznym Chrome, obok witryny, i podąża za kartą, na której jesteście. Rozpoznaje witrynę, wypisuje jej testy i otwiera edytor na tej stronie, a nie na tej, od której zaczynał się test.
- Na pełną wysokość, z regulowanym rozmiarem, i nie zamyka się, kiedy klikacie w stronę
- Filtrowanie według statusu albo wyszukiwanie po nazwie lub numerze testu
- Prosi o dostęp do witryny raz, kiedy po raz pierwszy otwieracie na niej edytor
Biblioteka komponentów
Dodajcie całą sekcję, a nie tylko nowy kolor
Przeciągnijcie blok z zakładki Add na stronę, a niebieska linia jeszcze przed upuszczeniem pokaże, gdzie trafi. Blok przejmuje czcionkę i rozmiary nagłówków witryny, a kolor akcentu bierze z miejsca, w którym go upuściliście.
- Dwanaście bloków, od sekcji hero i FAQ po przyklejony pasek i pop-up
- Sekcje, kontenery i kolumny, które na telefonach układają się jedna pod drugą
- Wideo, slider obrazów i galeria, a YouTube odtwarza się przez swój odtwarzacz no-cookie
Treści dynamiczne
Zbudujcie raz, a każda strona wypełni się własnymi danymi
Wstawcie dane ze strony do dowolnego tekstu, linku albo obrazu, wybierając z listy prawdziwych wartości strony. Baner zbudowany raz wita każdego odwiedzającego kampanią, z której przyszedł; w sklepie przyklejony pasek pokazuje nazwę i cenę danego produktu.
- Dane kampanii, odwiedzającego i daty na każdej witrynie, bez konfiguracji
- Dane produktu, ceny i koszyka w sklepach, w walucie strony
- Brak danych ukrywa element albo pokazuje wybraną przez was wartość awaryjną
Feedy danych
Dane z waszych systemów prosto w teście
Podłączcie feed, który witryna już publikuje, na przykład opinie, terminy wydarzeń, teksty kampanii albo feed produktowy Google Merchant, wybierzcie, którą pozycję widzi każdy odwiedzający, i zaznaczcie pola, które strona może pokazać. Serwery Pertento pobierają go według harmonogramu, więc odwiedzający nigdy nie czekają na wasz serwer.
- Dopasowanie pozycji do adresu strony, parametru URL, kampanii albo produktu
- Albo pozycja zaplanowana na teraz, do promocji czasowych
- Do odwiedzającego trafiają wyłącznie pola, które zaznaczycie
Panel właściwości i stany
Stylujcie stany hover, focus i active bez pisania CSS
Panel właściwości edytuje to, co zaznaczycie: typografię, odstępy na modelu pudełkowym, rozmiar, układ, tło i obramowanie. Przełącznik Normal, Hover, Focus i Active pozwala stylować stany interaktywne, więc kolor przycisku po najechaniu kursorem też jest częścią wariantu.
- Wyszukiwanie dowolnej właściwości CSS, jaką zna przeglądarka, z przyciskiem Reset przy każdym polu
- Linki, obrazy responsywne, tekst alternatywny i etykiety dostępności
- Każda edycja stanu to zwykła zmiana, z cofaniem i zapisem
Edycja tekstu w miejscu
Przepiszcie nagłówek tam, gdzie się znajduje
Kliknijcie dwukrotnie dowolny tekst na stronie i piszcie. Pogrubienie, kursywa i podkreślenie działają jak w dokumencie, a kiedy klikniecie gdzie indziej, edycja staje się zwykłą zmianą, którą cofnięcie odwraca co do znaku.
- Pogrubienie, kursywa i podkreślenie z klawiatury, Shift+Enter wstawia nowy wiersz, Escape anuluje
- Działa na tekście i na znacznikach inline wewnątrz niego
- Na liście zmian opisana prostymi słowami: Heading text
Każdy pasujący element
Zmieńcie naraz każdy pasujący element, także te, które wczytają się później
Podajcie selektor CSS i dodajcie styl albo HTML do wszystkiego, co do niego pasuje. Elementy, które pojawią się później przez nieskończone przewijanie, karuzele albo nawigację wewnątrz aplikacji, również otrzymują zmianę, każdy dokładnie raz.
- Wstawianie na końcu, na początku, przed, po albo zamiana
- Liczba pasujących elementów na żywo
- Zaznaczanie podobnych robi to samo przez wskazanie, dla każdego elementu podobnego do wybranego
Zmiany i zapisywanie
Każda zmiana na liście, opisana zrozumiałymi słowami
Każda edycja jest opisana na liście prostymi słowami, na przykład Moved, Added button albo Heading text, z niezawodnym cofaniem i ponawianiem. Edycje wprowadzone w trakcie zapisywania są zachowywane, nieudany zapis można powtórzyć, a przed zamknięciem edytor pyta o potwierdzenie.
- Wycofanie dowolnej pojedynczej zmiany z listy
- Globalny CSS i JavaScript na górze, z liczbą linii
- Zmiana, której elementu brakuje na stronie, jest oznaczona, a nie ukryta
Podgląd wszędzie
Zobaczcie wariant na prawdziwym telefonie
Podgląd na urządzeniach pokazuje w edytorze rozmiary komputera, tabletu i telefonu. Do sprawdzenia na prawdziwym urządzeniu Preview on another device daje link, który otwiera zapisany wariant na dowolnym telefonie albo w dowolnej przeglądarce, oraz drugi link, który przywraca tę przeglądarkę do normalnego działania.
- Tokeny logowania są usuwane z linku, więc można go bezpiecznie udostępnić
- Pokazuje zapisane zmiany, kiedy test działa na tej stronie
- Otwiera się w każdej przeglądarce, nie tylko w Chrome
Kod, kiedy go potrzebujecie
HTML, CSS i JavaScript, z tymi samymi danymi strony
Wszystko, czego narzędzia wizualne nie potrafią wyrazić, pisze się jako kod na wariancie. Edytujcie lub dodajcie HTML wokół elementu albo napiszcie globalny CSS i JavaScript wariantu, a dane strony odczytujcie przez pertento.data().
- Insert page data dodaje token do HTML
- Read page data dodaje wywołanie pertento.data() do JavaScriptu
- Globalny CSS i JavaScript można całkowicie wyczyścić
Skróty klawiszowe
Skróty klawiszowe do czynności, które powtarzacie
Skróty działają, gdy tylko klikniecie element na stronie, a pełna lista jest pod ikoną klawiatury na pasku narzędzi edytora.
- Zapisz
- ⌘SCtrl+S
- Cofnij
- ⌘ZCtrl+Z
- Ponów
- ⇧⌘ZCtrl+Y
- Edytuj HTML
- E
- Duplikuj
- D
- Ukryj, zachowując miejsce
- H
- Dodaj element
- A
- Usuń element
- ⌫
- Zaznacz element nadrzędny
- ⇧↵
- Przesuń w górę lub w dół
- ⌥↑⌥↓
- Otwórz menu elementu
- ⇧F10
- Edytuj tekst w miejscu