Cum să creezi și să editezi Landing Pages

Landing Pages sunt esențiale pentru a genera lead-uri, a crește numărul de abonați și de conversii. Indiferent dacă colectezi adrese de e-mail, promovezi o campanie sezonieră sau trimiți un mesaj de mulțumire în urma unei recenzii, un landing page bine construit poate face toată diferența.

Această funcționalitate este puțin mai avansată decât instrumentele user-friendly cu care te-ai familiarizat până acum. Totul este posibil datorită constructorului modular și flexibil, care îți deschide un întreg univers de personalizare, în special dacă ai puțină experiență cu CSS.

Dar nu-ți face griji: cu instrucțiunile corecte și câteva exemple practice pe care le vom parcurge împreună, vei vedea că să-ți creezi propriul landing page poate fi un proces intuitiv.

⚠️ Înainte de a începe: Pentru a folosi modulul Landing Pages, domeniul tău trebuie să fie validat. Dacă nu ai făcut acest lucru încă, mergi la „Setări“ > „Configurare e-mail“ și finalizează procesul.

Să parcurgem fiecare pas pentru a putea crea cu încredere primul tău landing page de la zero sau a o rafina unul deja existent.

1. În aplicația theMarketer, mergi la „Audiență“ > „Landing Pages“

Aici vei vedea o listă de pagini implicite gata de utilizare, cum ar fi Mulțumire Feedback, Sondaj sau Dezabonare. Acestea sunt marcate ca „sistem“ în coloana Tip.

Pentru a edita conținutul unei pagini de sistem, apasă pictograma creion corespunzătoare sau apasă cele trei puncte din dreapta pentru a o activa și publica.

Pentru a crea un landing page personalizat, apasă butonul „+Crează landing page“ din dreapta.

2. Selectează un template sau începe de la zero

Acest pas funcționează similar cu crearea unui newsletter; poți naviga prin template-urile disponibile și le poți previzualiza complet înainte de a lua o decizie.

Odată ce găsești unul care se potrivește nevoilor și obiectivelor tale, apasă „Selectează“ pentru a începe personalizarea.

Dacă ai experiență cu constructorii de Landing Pages sau cu limbajul CSS, poți sări peste Template-uri și începe de la zero.

3. Setează URL-ul și titlul landing page-ului

Ai grijă când tastezi URL-ul landing page-ului, deoarece odată setat, nu mai poate fi schimbat. Poți edita titlul paginii oricând în editor, dar URL-ul este permanent, deci asigură-te că este corect înainte de a trece la pasul următor.

Menține-l scurt, relevant și clar, și folosește litere mici, cifre și liniuțe (în loc de spații).

4. Editează conținutul și designul landing page-ului

La prima vedere, editorul de Landing Pages poate părea similar cu editorul de e-mail, dar vine cu o flexibilitate suplimentară și setări de design mai avansate.

În stânga sus a ecranului, vei vedea titlul paginii, pe care îl poți redenumi apăsând pictograma creion, URL-ul, pe care îl poți copia apăsând pictograma corespunzătoare, și marca de timp a ultimei salvări, care arată când a fost actualizată ultima dată pagina.

În mijlocul barei de sus, vei găsi trei pictograme de previzualizare care îți permit să treci între vizualizările pe desktop, tabletă și mobil, astfel încât să poți verifica cum va arăta pagina pe dispozitive diferite. Apasă pictograma în formă de ochi pentru a previzualiza pagina de destinație fără ghidurile vizuale ale componentelor sau marcatorilor de aspect.

Mai spre stânga, vei vedea pictogramele anulare, refacere și salvare, împreună cu butonul „Salvează și publică“ și butonul de ieșire pentru închiderea editorului.

La fel ca în constructorul de e-mail, partea stângă a ecranului arată previzualizarea canvas-ului, iar dreapta conține trei file importante: Conținut, Structură și Setări.

a. Conținut

Majoritatea blocurilor de aici sunt identice cu cele din editorul de e-mail, dar există câteva diferențe cheie și componente specializate concepute pentru Landing Pages.

Link — Adaugă un bloc de text de bază care include un hyperlink.
Bloc Link — Spre deosebire de editorul de e-mail, link-urile nu sunt aplicate direct elementelor, ci containerelor lor principale. Acest bloc îți permite să plasezi orice conținut (cum ar fi un buton sau o imagine) în interiorul unei celule care acționează ca un link apăsabil.

Imagine — Adaugă o imagine de sine stătătoare.
Imagine cu link — Adaugă o imagine într-un bloc de link, pentru a putea redirecționa utilizatorii către un URL specific când apasă pe imagine.
Citat — O variație a blocului de text, stilizată vizual pentru a evidenția testimoniale sau recenzii.
Câmpuri formular — Similar cu pop-up-urile, acestea îți permit să tragi și să plasezi câmpuri de formular (cum ar fi nume, e-mail, telefon) pentru generarea de lead-uri sau abonamente.
Hartă — Adaugă un widget Google Maps personalizabil. Poți ajusta adresa și stilul vizual odată plasat.

File — Introduce file cu zone de conținut comutabile (la fel ca filele Conținut, Structură și Setări pe care le explorezi în prezent). Poți plasa diferite blocuri în interiorul fiecărei file pentru a afișa informații variate.

Tooltip — Activează mesaje interactive la trecerea cursorului. Trage și plasează elementul tooltip, personalizează textul în dreapta, apoi plasează conținutul peste care utilizatorii ar trebui să treacă cu mouse-ul în interiorul lui.

Dactilografiat — Adaugă efecte de text animate (gândește-te la efectul de mașină de scris). Poți personaliza viteza, frazele și stilizarea din fila de setări.

b. Structură

Această secțiune funcționează similar cu editorul de e-mail; trage și plasează pur și simplu componentele de aspect pe canvas, apoi plasează blocurile de conținut în interiorul celulelor. Aceasta menține aspectul curat și asigură că pagina se afișează corect pe diferite dispozitive.

c. Setări

Fila Setări îți oferă control suplimentar asupra modului în care elementele apar și se comportă pe pagina de destinație. Dacă nu ești familiarizat cu terminologia de web design, nu îți face griji; vom explica simplu cu exemple practice.

General > Display — Această setare definește cum apare un element în raport cu altele:

Block: Ocupă lățimea completă a containerului. Ideal pentru titluri sau bannere.
Inline: Menține elementele aliniate cu altele (cum ar fi un hyperlink în interiorul unei propoziții).
Inline-block: Menține elementele aliniate cu altele, oferind în același timp posibilitatea de a seta lățimea și înălțimea.
Flex: Activează controlul avansat al alinierii și aspectului (vezi setările Flex mai jos).
None: Ascunde elementul. Util dacă dorești să păstrezi un element în editor, dar să nu îl afișezi pe pagină.

General > Float — Această setare îți permite să muți un element la stânga sau dreapta containerului său. Este folosită în principal pentru imagini sau pictograme mici:

None: Implicit, fără float.
Left: Textul sau conținutul se va înfășura în jurul lui pe dreapta.
Right: Textul sau conținutul se va înfășura în jurul lui pe stânga.

General > Poziție — Te ajută să plasezi elementele exact unde dorești:

Static: Poziția implicită, fără plasare specială.
Relative: Îți permite să deplasezi elementul din locul său normal.
Absolute: Poziționează elementul relativ la containerul cel mai apropiat.
Fixed: Menține elementul pe loc în timp ce utilizatorul derulează. Ideal pentru anteturi sau butoane fixe.

Pentru orice altă poziție înafară de cea statică, vei vedea și câmpurile Sus, Dreapta, Stânga și Jos. Acestea îți permit să ajustezi exact unde ar trebui să apară elementul. De exemplu, dacă selectezi relativ și tastezi 20px în câmpul Sus, elementul se va deplasa cu 20 de pixeli în jos față de locul original.

Setările Flex se vor aplica doar când Afișare este setată pe flex.

Direcție Flex — Controlează direcția elementelor din interiorul unui container. Este util când dorești să stivuiești elementele vertical sau să le inversezi ordinea:

Row: Elementele se aliniază de la stânga la dreapta (implicit).
Row-reverse: Elementele se aliniază de la dreapta la stânga.
Column: Elementele se aliniază de sus în jos.
Column-reverse: Elementele se aliniază de jos în sus.

Flex wrap — Indică elementelor dacă să rămână pe un singur rând sau să treacă pe următorul:

Nowrap: Menține totul pe un singur rând.
Wrap: Mută elementele pe rândul următor când spațiul se termină (ideal pentru grile).
Wrap-reverse: Înfășoară elementele în ordine inversă.

Justify content — Aliniază elementele orizontal:

Flex-start: Aliniază totul la stânga.
Flex-end: Împinge totul la dreapta.
Center: Centrează conținutul.
Space-between: Spațiază elementele uniform, fără spațiu la margini.
Space-around: Spațiază elementele cu spații egale peste tot.
Space-evenly: Setează spațierea egală între toate elementele.

Align items — Aliniază conținutul vertical în cadrul unui singur rând:

Flex-start: Aliniază la vârf.
Flex-end: Aliniază la bază.
Center: Centrare verticală.
Baseline: Aliniază textul cu baza textului din apropiere.
Stretch: Umple spațiul vertical.

Align content — Similar cu Align items, dar funcționează pe mai multe rânduri. Este cel mai util când elementele se înfășoară și dorești să controlezi spațierea verticală între rânduri.

Extra — Aceste setări suplimentare îți permit să adaugi efecte vizuale sau îmbunătățiri de stilizare elementelor de pe pagină. Te pot ajuta să atragi atenția asupra zonelor cheie sau să creezi o experiență mai dinamică.

Poți controla transparența în secțiunea „Opacitate“. Setează-o la 1 pentru vizibilitate completă sau mai mic pentru un aspect estompat. În plus, folosind setarea „Transform“, poți roti, scala sau muta elemente.

5. Salvează și publică pagina de destinație

Odată ce pagina de destinație este gata, apasă butonul „Salvează și publică“ din partea de sus a editorului.

Vei fi dus înapoi la lista de Landing Pages, unde vei vedea titlul, URL-ul și statusul de publicare al paginii. Pentru a face modificări ulterior, apasă pur și simplu pictograma creion pentru a redeschide editorul. Dacă trebuie să retragi o pagină, apasă cele trei puncte și selectează „Pauză“. Odată ce faci asta, pagina nu va mai fi accesibilă prin URL-ul său.

Și… gata!

Știm că acesta a fost un modul mai tehnic, dar acum că ai ajuns la final, ar trebui să te simți încrezător navigând editorul și construind Landing Pages care te ajută să ieși în evidență, să implici mai eficient și să convertești fără efort.