Share
Când vă pregătiți să lansați un nou site web, un produs sau un serviciu, aveți nevoie de un loc dedicat pentru a trimite potențiali clienți și clienți. Dar, este posibil ca site-ul dvs. să nu fie gata să primească încă vizitatori noi. În aceste cazuri, un șablon de pagină de destinație HTML5 este alegerea perfectă.
Un șablon HTML5 este rapid și ușor de instalat. Spre deosebire de un CMS care poate folosi un limbaj de programare complex, un șablon HTML este ușor de editat chiar și pentru începători.
În acest tutorial, vă voi explica beneficiile utilizării șabloanelor de pagini de destinație HTML și vă vom arăta cum să le setați. Nu vă faceți griji: este rapid și nedureros.
După cum am menționat deja, aveți posibilitatea să instalați și să configurați paginile de destinație destul de repede. Dar, există și alte câteva avantaje pentru a le utiliza:
Acum că am acoperit avantajele șabloanelor HTML, hai să ne aruncăm în tutorial.
În scopul acestui tutorial, voi folosi șablonul Pure. Este un șablon curat și minimal care poate fi folosit într-o varietate de scopuri și vine cu o formă de contact de lucru și cu formularul de înscriere MailChimp.
În plus față de șablon, există și alte câteva instrumente de care veți avea nevoie pentru a vă putea modifica șablonul și pentru a vă oferi live:
Înainte de a selecta un șablon pentru pagina dvs. de destinație, va trebui să achiziționați un nume de domeniu și să vă înscrieți pentru un plan de găzduire. În zilele noastre, puteți achiziționa un pachet de găzduire pornind de la 5 dolari / lună și majoritatea companiilor de găzduire vă vor oferi numele de domeniu gratuit atunci când vă înscrieți pentru planul lor. Unele companii de hosting vor oferi spațiu nelimitat și lățime de bandă, iar altele vor limita resursele disponibile.
Asigurați-vă că pentru a face dvs. de cercetare și citiți câteva comentarii independente despre companii de găzduire care pique interesul dumneavoastră. Văzând cât de mulțumiți de clienții lor anteriori poate fi un indicator important în ceea ce privește serviciile oferite și calitatea asistenței pentru clienți.
Următorul articol de pe lista dvs. ar trebui să fie un client FTP. Acesta vă va permite să vă conectați la serverul dvs. de găzduire și să încărcați fișierele șablonului.
Există o mulțime de clienți FTP care sunt disponibili pentru diferite sisteme de operare. O platformă populară FTP care poate fi utilizată pe toate platformele este FileZilla. De asemenea, este gratuit pentru descărcare și utilizare.
Veți avea nevoie de un editor de cod pentru a modifica șablonul. Utilizarea unui editor de cod vă va ușura găsirea codului pe care trebuie să-l editați, deoarece utilizează evidențierea sintaxei speciale. Puteți utiliza Notepad ++ dacă sunteți utilizator Windows sau TextWrangler dacă sunteți utilizator Mac. O altă opțiune este utilizarea sublimului Text 3 care poate fi folosit atât pe calculatoarele Windows și Mac, cât și pe Linux și oferă o încercare gratuită.
În cele din urmă, va trebui să achiziționați și să descărcați un șablon de pagină de destinație și să pregătiți conținutul care va apărea pe pagina dvs. de destinație. Puteți găsi multe șabloane de pagini de destinație html pe Envato Elements care au fost proiectate special pentru paginile de destinație. Odată ce găsiți un șablon pe care îl doriți, achiziționați-l și descărcați-l pe computer. Asigurați-vă că dezarhivați dosarul și salvați-l undeva unde îl puteți accesa cu ușurință.
Strângeți toate imaginile și textul pe care doriți să le adăugați la pagina dvs. de destinație. Menținerea totul într-un singur loc va face mai ușor să-l adăugați la șablon, precum și să transferați imaginile pe serverul dvs..
Cu totul în loc, este timpul să personalizați șablonul și să adăugați informațiile acestuia. Să începem prin familiarizarea cu structura șablonului.
După cum am menționat anterior, utilizez șablonul de pagină de destinație Pure HTML.
După dezarhivarea dosarului, puteți vedea că șablonul de pagină de destinație pentru bootstrap conține mai multe subdosare și un număr de fișiere HTML. Iata cum arata structura:
De asemenea, veți observa mai multe fișiere HTML, care reprezintă diferite versiuni demo ale șabloanelor de pagini de destinație HTML. Puteți să dați clic dreapta sau să faceți dublu clic pe fiecare dintre fișierele HTML pentru a le deschide în browserul preferat și pentru a vedea cum arată acestea. Când ați găsit versiunea demo care vă place, închideți toate celelalte file.
Voi lucra cu șablonul index-normal-scroll-countdown.html în restul tutorialului.
Acum că șablonul de pagină de destinație HTML ales este deschis în browserul dvs., este timpul să înlocuiți informațiile cu dvs. Cea mai ușoară modalitate de a face acest lucru este de a înțelege care parte a codului din șablon trebuie modificată. Să începem făcând clic dreapta pe primul rând de text de sub contor și făcând clic pe Inspectați.
Un nou panou va apărea în partea de jos a ferestrei browserului. Veți observa că acesta afișează codul HTML care formează șablonul nostru din partea stângă, precum și codul CSS care oferă stiluri pentru șablonul din partea dreaptă.
După cum puteți vedea din screenshot, propoziția selectată se află între etichete care reprezintă paragrafe. Majoritatea etichetelor din HTML constau din perechi de etichete care au o etichetă de deschidere și de închidere. Conținutul trebuie plasat între aceste etichete pentru a apărea pe o pagină web:
opacitate-0 "> Înainte de lansare, bucurați-vă de a Oportunitate foarte limitată prin înscrierea la newsletter-ul nostru.
Faceți clic pe butonul următor pentru a obține mai multe informații despre proiectul nostru.
Pentru a înlocui informațiile fictive din șablon, tot ce trebuie să știți care etichete conțin informațiile pe care doriți să le editați. Apoi, puteți găsi aceste etichete în editorul de cod și introduceți propriul text.
Acum că știți cum să găsiți codul care necesită editare, reveniți la dosarul șablonului, faceți clic dreapta pe fișierul HTML ales și selectați Deschis cu,și alegeți editorul de cod pe care l-ați descărcat mai devreme. Ar trebui să vedeți codul HTML complet care constituie șablonul dvs..
Derulați în jos editorul de coduri până când găsiți aceeași linie de cod pe care am evidențiat-o în browser. Ar trebui să fie în jurul liniei 75-76. Apoi, faceți clic în interiorul
etichetați, evidențiați textul și înlocuiți-l cu propriul dvs..
Pentru a edita restul șablonului, puteți repeta pașii de mai sus, până când sunt incluse toate informațiile pe care le doriți.
De asemenea, puteți șterge secțiunile din șablon dacă nu doriți ca acestea să apară. În mod similar, puteți să copiați și secțiunile dacă doriți să includeți mai multe informații. Pur și simplu selectați partea din șablon începând cu eticheta de deschidere și evidențiind totul până la și inclusiv eticheta de închidere pentru acea parte și fie ștergeți, fie copiați și lipiți acea secțiune de mai jos.
Când ați terminat de înlocuit conținutul, este timpul să înlocuiți exemplele de imagini cu propriile dvs. Pentru a face acest proces mai ușor, aruncați o privire asupra numelor de imagini din folderul IMG al șablonului și apoi denumiți-vă imaginile folosind aceleași nume. Apoi, selectați toate imaginile substituente, ștergeți-le și plasați-le în folderul img.
Acum este momentul să modificați aspectul șablonului și să editați stilurile în CSS. În mod prestabilit, șablonul Pure vine cu diferite foi de stil pentru versiunea întunecată și ușoară a șablonului:
Pentru a afla ce foaie de stil trebuie să editați, uita-te la fișierul HTML în editorul de cod și căutați linia care este similară cu aceasta:
Accesați dosarul șablonului și deschideți foaia de stil corespunzătoare în editorul de coduri.
Pentru a vedea care linie de cod și stil trebuie să editați, puteți repeta același proces pe care l-am folosit pentru a edita codul HTML.
În browser-ul dvs., faceți clic dreapta pe orice element pe care doriți să-l alegeți și selectați Inspectați. Uită-te în partea dreaptă și vei vedea stilurile folosite pentru acea parte a șablonului:
După cum puteți vedea din captura de ecran, Inspector ne arată stilurile utilizate pentru textul paragrafului. Treceți la editorul de cod și la fișierul stilistic. Derulați în jos până când găsiți o linie de cod care începe cu p.
Aici puteți schimba fonturile utilizate, mărimea fontului, precum și culoarea textului.
Dacă doriți să schimbați culoarea de fundal a șablonului, căutați linia de cod care spune corp urmată de paranteze curbate și apoi introduceți codul de culoare HEX după
partea care citește culoarea de fundal.
Nu uitați să salvați toate modificările făcute făcând clic pe Salvați în editorul de cod.
După ce ați modificat șablonul după preferințele dvs., va trebui să îl încărcați pe serverul dvs. de găzduire. Furnizorul de servicii de găzduire vă va trimite prin e-mail toate informațiile de care aveți nevoie pentru a transfera fișierele cu FTP.
Lansați programul FTP, cum ar fi FileZilla. Veți observa bara de sus unde puteți introduce numele serverului, numele de utilizator și parola. Folosind informațiile furnizate de gazda dvs., conectați-vă la serverul dvs. făcând clic pe Conectare rapidă.
În partea stângă a ferestrei FileZilla, localizați folderul cu șablonul pe computer și dați clic pe el pentru al extinde. Selectați toate fișierele și folderele și glisați-le în partea dreaptă a ecranului în folderul public_html.
După ce toate fișierele au fost încărcate, deschideți browserul și introduceți numele domeniului. Felicitări, site-ul dvs. este acum live!
O pagină de destinație poate face minuni pentru afacerea sau produsul dvs. pe măsură ce vă pregătiți pentru lansare. Iată câteva sfaturi care vă vor ajuta să profitați la maximum de șabloanele de pagini de destinație HTML și să vă ajutați să creați reclame:
Pentru a afla mai multe despre șabloanele de pagini de destinație HTML sau șabloanele de pagini de destinație pentru bootstrap, examinați aceste tutoriale:
Cu ajutorul unui șablon HTML, puteți obține rapid pagina de destinație pentru bootstrap. Începeți prin a selecta una dintre șabloanele noastre de pagini de destinație HTML din Envato Elements sau una din șabloanele de pagini de destinație pentru bootstrap din ThemeForest. Apoi, folosiți tutorialul nostru pentru a vă ghida în procesul de configurare.
Accentsconagua