Construirea paginii dvs. de destinație pentru instalare

În prima parte a acestei serii scurte am acoperit fundamentele paginilor de destinație. În această parte, vom trece prin procesul de construcție al unei pagini de destinație Instapage.

Cum să vă construiți pagina

Design-urile create pentru prima dată în Photoshop ar trebui transformate pe o pagină de destinație perfectă a pixelilor de pe platforma Instapage. Toate paginile sunt structurate urmând sistemul de grilă 960 și utilizând secțiunile orizontale ale paginii explicate mai jos.

Începeți cu o pagină neagră

Instapage oferă utilizatorilor o varietate de șabloane de a alege. În timp ce ne concentrăm asupra șabloanelor specifice industriei pentru utilizatorii noștri generali, veți începe cu o pânză necompletată. 

Nu aveți nevoie să utilizați alt program pentru a finaliza pe deplin șablonul dvs. Instapage, cu toate acestea puteți să convertiți sau să importați celelalte teme create anterior, dacă doriți. CSS și JavaScript personalizat sunt, de asemenea, acceptate.

Adăugarea elementelor paginii de destinație

Cu Instapage puteți începe să adăugați elementele paginii de destinație făcând clic pe ADĂUGA NOU opțiune din bara principală de instrumente și apoi selectarea elementului pe care doriți să îl adăugați la pagina dvs..

De obicei, adăugarea unui element pe o secțiune de pagină definită este ideală. Cu toate acestea, aveți capacitatea deplină de a structura pagina dvs. așa cum doriți. De asemenea, puteți ajusta înălțimea secțiunilor de pagină în funcție de elementele pe care le-ați adăugat.

În cadrul aplicației există o sugestie X / Y care va apărea de fiecare dată când mutați un element. Acest lucru vă va ajuta dacă sunteți obișnuiți să proiectați prin această metodă sau dacă faceți conversia dintr-o altă temă. Coordonatele sunt determinate de mijlocul elementului care se mișcă în raport cu cât este de departe din stânga sus a coloanei paginii principale.

Coloana din pagina principală are o lățime standard a paginii definită de 960 de pixeli.

Puteți adăuga următoarele elemente la șablonul de pagină de destinație personalizat: 

  • Secțiuni de pagină
  • Titlu
  • Text (paragraf)
  • Imagine
  • Video
  • Butonul CTA
  • Formulare
  • Hărți
  • Butoane de distribuire socială
  • Linkuri HTML
  • forme

Toate acestea sunt adăugate făcând clic pe elementul pe care doriți să-l adăugați și plasând / editat pe pagina dvs. Vom discuta despre adăugarea elementelor în detaliu mai jos.

Secțiuni și casete de pagină

Secțiunile de pagină sunt utilizate pentru a separa diferite zone de conținut de pe pagina dvs. de destinație. Secțiunea întinde întotdeauna întreaga lățime a paginii și nu poate fi redimensionată orizontal. Secțiunile de pagină pot fi repoziționate vertical oriunde pe pagină (demonstrat în videoclip)

Puteți grupa conținutul cu ambele secțiuni și casete în două moduri. Dacă aveți deja conținut pe pagina dvs., puteți adăuga o casetă (selectând-o din elementul de forme) și apoi glisați conținutul în caseta respectivă. Sau, puteți crea mai întâi caseta și apoi trageți și plasați obiectele direct în cutia care le va cuibui.

Odată ce obiectele sunt imbricate, le puteți muta acum despre pagina dvs. ca un singur obiect. Selectați caseta și continuați de acolo.

Forma casetei este utilizată în mod obișnuit pentru a crea un pătrat sau dreptunghi standard pe care îl puteți utiliza pentru a evidenția formulare, imagini, text și multe altele. Nu trebuie să se întindă întreaga lățime a paginii.

Atunci când editați secțiuni de pagină sau forme de cutii veți primi următoarele atribute:

  • Culoare de fundal: Dând clic pe aceasta, puteți alege o culoare primară pentru fundalul formei.
  • Border Color: Făcând clic pe aceasta vă permite să alegeți o culoare pentru marginea din jurul casetei.
  • Lățimea graniței: Introduceți un număr aici pentru a determina grosimea marginii.
  • Stilul de frontieră: Solid, spart, punctat, dublu.
  • Imagine de fundal: Ați setat o imagine ca un model ca fundal al formei.
  • Round Corners: Faceți clic pe săgețile mici în sus / în jos din orice colț pentru a ajusta modul în care doriți să faceți acest lucru.
  • Transparenţă: Puteți folosi acest lucru pentru a îmbunătăți aspectul paginilor dvs., făcând lucruri precum dezvăluirea fundalului paginii de mai jos.

Adăugarea textului pe pagina dvs. de destinație

Puteți adăuga un titlu de titlu și un paragraf făcând clic pe opțiunile respective din bara de instrumente. Când faceți clic pe butonul paragraf sau titlu veți vedea că un paragraf prestabilit apare pe pagina dvs., puteți modifica acest paragraf în consecință.

Editorul de text vă permite să modificați culoarea, dimensiunea fontului, alinierea și puteți adăuga, de asemenea, liste numerotate sau creați un link.

Adăugarea de imagini și video

După ce faceți clic pentru a adăuga un element de imagine nou, vi se va oferi opțiunea de a alege unul existent dintr-un dosar sau de a încărca unul nou. Toate imaginile pe care le încărcați vor fi salvate pe serverele noastre și le puteți utiliza ulterior fără să le încărcați din nou.

Puteți înlocui imaginile în orice moment selectând imaginea> făcând clic pe Editare> selectând înlocuirea.

Utilizați imaginile pentru a vă mări produsul sau serviciul (imaginile sunt în valoare de o mie de cuvinte), dar din nou nu vă lăsați prea departe. Prea multă viziune va distrage utilizatorii de obiectivul de conversie.

Pentru a afla mai multe despre modul în care utilizarea imaginilor pe o pagină de destinație poate îmbunătăți conversia, consultați Utilizarea imaginilor de pe pagina dvs. de destinație pentru a mări conversiile.

Puteți să încărcați un videoclip pe pagina de destinație selectând opțiunea video și conectând la videoclipul YouTube sau Vimeo ales. Puteți redimensiona și poziționa videoclipul în funcție de nevoile dvs. Apoi, alegeți dacă doriți ca videoclipul să se afișeze automat sau să ascundă bara de progres.

Adăugarea formularelor

Selectați ADĂUGA NOU din bara principală de instrumente, apoi faceți clic pe FORME. Acest lucru va umple un formular pe pagina dvs. de destinație. Puteți glisa și fixa și redimensiona formularul dvs. pentru a se potrivi nevoilor dvs. specifice de proiectare și puteți personaliza stilul butonului, stilul de stil, culoarea, fontul făcând clic pe EDITAȚI | × după ce faceți clic pe formular.

De asemenea, puteți seta câmpuri pre-făcute sau puteți crea propriile dropdown-uri personalizate. Formularele pot fi legate de serviciile noastre integrate de e-mail, cum ar fi Mailchimp sau Aweber, sau pot lucra singure. De asemenea, oferim o opțiune de redirecționare (atât integrarea, cât și redirecționarea formularelor nu ar trebui să fie utilizate pe pagina dvs.).

Adăugarea butoanelor

Pentru a adăuga un buton la pagina dvs., faceți clic pe ADĂUGA NOU din bara principală de instrumente. Acesta va afișa un buton pe pagina dvs. de destinație. Dacă faceți clic pe butonul, veți putea redimensiona, schimba culoarea sau fontul și puteți trage și fixa caracteristica acolo unde vreți.

După ce faceți clic pe butonul, deasupra, veți vedea o pictogramă de legătură. Acesta este un link event caracteristică. Acest lucru va deschide un manager de link-uri care vă va permite să adăugați o legătură de ieșire la buton, o fereastră pop-up (Lightbox) la butonul dvs., o descărcare de fișier sau o legătură către o altă pagină de destinație Instapage.

Adăugarea unui pop-up

Multe pagini de destinație utilizează un proces de înscriere în doi pași, în care un vizitator dă clic pe un buton care deschide un pop-up. În interiorul ferestrei pop-up se află formatul generației de plumb. Din această cauză și deoarece ferestrele pop-up pot fi utile pentru dezvăluirea mai multor informații, am făcut foarte ușor să adăugați ferestre pop-up către butoane, imagini și legături text.

Doar faceți clic pe unul dintre aceste trei tipuri de elemente> faceți clic pe butonul de legătură> și apoi selectați opțiunea de tip pop-up.

Aveți posibilitatea să redimensionați caseta de tip pop-up așa cum ați face orice alt element. Orice tip de conținut poate fi adăugat în interiorul pop-up-ului.

Implementarea versiunii mobile (necesar)

Deoarece Instapage oferă personalizarea drag & drop completă, în prezent nu acceptăm designul cu reacție automată. Din această cauză, trebuie să reconstruiți pagina desktopului în vizualizarea mobilă pe baza dimensiunii ecranului mai mic și a sensului în contextul mobil.

Puteți muta elemente între versiunea desktop și versiunea mobilă prin copiere și lipire.

Utilizatorii Mac:

  • ⌘Command-C = Copiați
  • ⌘Command-V = Lipiți

Utilizatori PC:

  • Ctrl-C = Copiați
  • Ctrl-P = Lipiți

Previzualizați-vă pagina

Pentru a vedea aspectul final al propriului dvs. șablon de instalare, faceți clic pe previzualizare și examinați șablonul înainte de a face clic Publica.

Lista dvs. de verificare

  • Examinați imaginile și aspectul
  • Examinați copiile și fonturile
  • Link-uri de testare
  • Formular de testare și buton
  • Publicați pagina
  • Când creați documentul de asistență pentru șablon, includeți acest link la instrucțiunile de utilizare. Dacă ați inclus Javascript / CSS personalizat în șablonul dvs., trebuie să includeți instrucțiuni detaliate despre cum să utilizați sau să actualizați scripturile și funcționalitatea.

Notă: Publicarea paginii vă permite să furnizați un link de previzualizare live pe piețele de șabloane.

Cerințele pentru aprobarea cerințelor

Toate șabloanele de pagini de destinație trebuie să fie personalizabile. Utilizatorii Instapage ar trebui să poată schimba cu ușurință orice element pe care îl doresc.

Pentru a vă asigura că șabloanele nu își pierd calitatea atunci când utilizatorul final face modificări, este important ca pagina dvs. să treacă prin aprobarea ThemeForest. Țineți cont de următoarele recomandări:

  • Imaginile ar trebui să fie ușor de schimbat
  • Secțiunile de pagină ar trebui să fie utilizate pentru segmentarea corectă a paginii
  • Codul Javascript trebuie să înceapă cu un comentariu care conține informațiile de contact ale autorului și instrucțiunile de asistență
  • Nu ar trebui să existe elemente rupte
  • Butoanele formularilor trebuie atașate ferm la formularele lor
  • Pagina dvs. ar trebui să aibă o versiune mobilă activată

Descărcarea șablonului

Pentru a utiliza, a distribui sau a vinde șablonul finalizat, va trebui să îl descărcați. Pentru a descărca, faceți clic pe mai multe opțiuni butonul de pe tabloul de bord și selectați Descărcați pagina.

Fișierul va avea o extensie ".instapage". După ce ați descărcat fișierul, nu ezitați să îl redenumiți după cum este necesar, dar lăsați extensia ".instapage" intactă.

Ambalaj Multiple Layouts împreună

Doriți să împachetați mai multe machete ale aceluiași șablon? Vă rugăm să evitați utilizarea variantelor de pagină pentru a împacheta mai multe planuri împreună.

În schimb, creați fiecare aspect ca pagină separată și descărcați fiecare aspect separat. Acest lucru vă va asigura că aveți un link funcțional de previzualizare pentru fiecare aspect și va reduce confuzia de la descărcător, deoarece variantele sunt folosite în mod specific pentru testarea A / B.

Concluzie

Sperăm că acest lucru v-a oferit o introducere detaliată a șabloanelor Instapage și Instapage pentru vânzare pe piețe, cum ar fi ThemeForest. Mai sunt multe de învățat, însă dacă aveți întrebări, nu ezitați să întrebați comentariile.

De asemenea, verificați concursul Instapage de la cel mai dorit Envato care se întâmplă chiar acum!