convertixDocumentație
Intră în cont

Editorul vizual

Editorul vizual îți permite să modifici o variantă direct pe pagina site-ului, cu mouse-ul: schimbi texte, culori, spațieri, muți secțiuni sau adaugi butoane. Nu ai nevoie de cod. Editorul funcționează la experimentele de tip Test A/B.

Ce îți trebuie#

  • Un desktop sau un laptop. Editorul are nevoie de o fereastră lată de cel puțin 1024 de pixeli și de mouse sau trackpad. Pe telefon sau tabletă, butonul este dezactivat și vezi mesajul „Editorul vizual funcționează pe desktop sau laptop”. Pe aceste dispozitive poți folosi în schimb secțiunea Avansat · CSS și JS a variantei.
  • Codul de urmărire instalat pe pagina pe care o editezi. Editorul se încarcă prin el. Vezi Instalează codul de urmărire.
  • Un experiment ciornă sau în pauză. Cât timp experimentul este activ, vezi „Pune experimentul în pauză ca să folosești editorul vizual”.
  • O adresă permisă. Pagina trebuie să fie pe domeniul site-ului sau pe una dintre Adrese suplimentare. Vezi Adaugă un site.

Deschide editorul#

  1. În fila Prezentare generală a experimentului, verifică pagina de pe rândul Previzualizare pe. Editorul deschide această pagină; apasă Schimbă ca să alegi alta.
  2. Pe cardul variantei, apasă Deschide editorul vizual. Dacă ai modificări nesalvate în variante, salvează-le mai întâi.
  3. Site-ul se deschide într-o filă nouă, cu editorul peste el.

Bara de sus a editorului îți arată varianta pe care o editezi. Din meniul Variantă poți trece la altă variantă fără să ieși din editor.

Selectează un element#

  • Clic pe un element din pagină îl selectează. Panoul din dreapta arată numele lui (de exemplu „Buton” sau „Titlu 2”) și proprietățile lui.
  • Sub pagină vezi calea de elemente, adică elementele părinte ale selecției. Dă click pe oricare ca să îl selectezi.
  • ↑ selectează elementul părinte, iar Esc anulează selecția.

Editează textul#

Dă dublu clic pe un text ca să îl editezi direct în pagină. Apasă Enter sau dă clic în afară ca să păstrezi textul, sau Esc ca să renunți. Cu Shift + Enter treci pe rândul următor.

Editarea directă funcționează pe elementele care conțin doar text. Pentru un element cu structură mai complexă, folosește Conținut HTML din fila Setări a panoului și apasă Aplică.

Schimbă stilurile#

Fila Stil a panoului grupează proprietățile: Clase CSS, Aranjare, Spațiere (spațiul exterior și interior, adică margin și padding), Dimensiuni, Text, Fundal, Contur și efecte și Poziție. Valorile se scriu ca în CSS, de exemplu 24px sau flex.

La Aplică stilurile pe alegi unde se salvează stilurile:

  • Acest element: „Stilurile de mai jos se aplică doar acestui element.”
  • Toate .nume-clasă: stilurile se salvează în clasă și modifică toate elementele din pagină care folosesc clasa.

Butonul Resetează de lângă o proprietate o readuce la valoarea originală.

Dimensiuni de ecran#

Din bara de sus, la Dimensiune ecran, alegi Desktop, Tabletă sau Mobil. Pagina se afișează la lățimea aleasă, iar stilurile pe care le setezi se salvează pentru acea dimensiune:

  • Stilurile setate pe Desktop se aplică și pe tabletă și pe mobil.
  • Stilurile setate pe Tabletă înlocuiesc setarea Desktop pe ecranele de cel mult 991 de pixeli.
  • Stilurile setate pe Mobil înlocuiesc setările de mai sus pe ecranele de cel mult 767 de pixeli.

Mută, duplică, șterge, adaugă#

Când selectezi un element, lângă el apare o bară de acțiuni:

  • Mută mai sus și Mută mai jos schimbă ordinea între elementele vecine. Poți și să tragi elementul cu mânerul Trage pentru a muta.
  • Duplică face o copie a elementului (⌘ + D sau Ctrl + D).
  • Șterge elimină elementul (Delete sau Backspace).
  • Inserează adaugă un element nou: Text, Titlu, Buton, Imagine sau HTML personalizat. La Poziție alegi unde: Înainte, După, La începutul elementului sau La sfârșitul elementului.

Linkuri, imagini și atribute#

Fila Setări a panoului arată ce se poate schimba la elementul selectat:

  • Link: adresa (URL) și Deschide într-o filă nouă.
  • Imagine: Adresa imaginii și Text alternativ.
  • Vizibilitate: Ascunde pe toate dimensiunile de ecran.
  • Atribute HTML: adaugă, schimbă sau elimină atribute.

Anulează și verifică modificările#

  • Anulează și Refă din bara de sus, sau ⌘ + Z și ⇧ + ⌘ + Z (pe Windows, cu Ctrl).
  • Modificări deschide lista tuturor modificărilor variantei. O modificare marcată Negăsit nu își găsește elementul pe pagina curentă. O poți șterge din listă.
  • Previzualizare ascunde uneltele editorului, ca să vezi pagina așa cum o vor vedea vizitatorii.

Salvează și ieși#

Apasă Salvează din bara de sus. Lângă buton vezi „Se salvează…”, apoi „Salvat”. Cât timp ai modificări nesalvate, vezi „Modificări nesalvate”.

Când ai terminat, apasă Ieși. Dacă ai modificări nesalvate, editorul te întreabă dacă vrei să ieși fără să le salvezi. Același lucru se întâmplă când treci la altă variantă.

Înapoi în aplicație, cardul variantei arată câte modificări vizuale are, de exemplu „3 modificări vizuale”. Verifică rezultatul cu Previzualizare: Variante.

Pagini înrudite#