Noțiuni de bază site-ul dvs. de funcționare și nu trebuie să fie complicate. De fapt, puteți crea un site de afaceri simplu și eficient, cu ajutorul unui șablon de pagină de o pagină. Utilizarea unui șablon de o pagină vă permite să oferiți afacerii dvs. o prezență online necesară și să prezentați toate informațiile despre serviciile sau produsele pe care le oferiți.

Un avantaj suplimentar este faptul că persoanele interesate de afacerea dvs. pot vedea imediat toate detaliile de care au nevoie fără a trebui să facă clic pe mai multe pagini. Și deoarece site-urile unei pagini conțin adesea multiple solicitări de acțiune, aveți șanse mult mai mari de a transforma vizitatorii în potențiali cumpărători.

În acest tutorial, vă vom îndruma prin pașii de configurare a site-ului dvs. cu un șablon HTML de o pagină. Vom acoperi instrumentele de care aveți nevoie, detaliile tehnice ale personalizării șablonului și cum să îl încărcați pe serverul dvs. De asemenea, vă vom oferi câteva sfaturi importante despre cum să faceți site-uri web care să fie eficiente. Sa incepem!

Înainte de a începe

Înainte de a vă crea un site web de o pagină, există câteva lucruri de care veți avea nevoie. Să trecem peste ele.

1. Numele de domeniu

Alegerea cea mai evidentă este să folosiți numele companiei pentru domeniul dvs. În cazul în care numele este luat, puteți încerca să adăugați cuvinte precum companie, agenție sau studio și să cumpărați apoi numele de domeniu.

De asemenea, se recomandă utilizarea unei extensii .com ca fiind una dintre cele mai vechi și mai credibile extensii. Cu toate acestea, dacă nu puteți obține un nume potrivit cu extensia .com, folosiți o extensie .net merită luată în considerare.

2. Compania de gazduire

Găsirea unei companii bune de găzduire poate părea la început o sarcină imposibilă. În general, doriți să căutați o gazdă care are recenzii bune pe site-uri web ale unor terțe părți, deoarece este mai probabil ca acestea să fie imparțiale. Fiți atenți la ceea ce spun oamenii despre timpul lor de întreținere, asistență pentru clienți și ușurința de utilizare.

3. Șablon HTML

Următorul pas este să găsiți un șablon pentru site-ul dvs. web. Un loc bun pentru a începe căutarea este piața ThemeForest. Aveți posibilitatea să alegeți dintre sute de șabloane de site-uri profesionale dintr-o pagină care să răspundă la o varietate de nise sau să căutați selecția noastră curativă a unora dintre cele mai bune: 

4. Editor de cod și client FTP

Deoarece va trebui să editați șablonul pentru a înlocui informațiile cu dvs., aveți nevoie de un editor de coduri. Acesta va evidenția sintaxa codului și va facilita găsirea părților codului care trebuie modificate.

Pentru acest tutorial, voi folosi Text Sublime care poate fi folosit pe Mac, Windows și Linux și vine cu o versiune de încercare gratuită.

Veți avea nevoie, de asemenea, de un client FTP, cum ar fi FileZilla, pentru a vă conecta la serverul dvs. și a încărca fișierele de pe site fără a trebui să le încărcați unul câte unul. FileZilla este gratuită și disponibilă pentru toate sistemele de operare.

Acum, să aruncăm o privire asupra detaliilor despre cum să realizăm un site web, începând cu descărcarea și configurarea șablonului de site.

Modul de editare a conținutului șablonului de site web

După ce ați adunat toate fișierele și instrumentele de care aveți nevoie, acum este momentul să modificați șablonul HTML. Pentru acest tutorial, voi folosi șablonul site-ului Wander. Începeți prin descărcarea fișierelor șablon din pagina Descărcări pe ThemeForest. Extrageți conținutul dosarului cu cifre și deschideți dosarul. Veți observa că conține un dosar de documentație, precum și toate fișierele șablonului site-ului.

Deoarece acesta este un șablon multifuncțional, acesta are câteva fișiere în interior. Șablonul dvs. poate veni doar cu un singur fișier HTML și cu dosare care conțin foile de stil, fișierele de script și imaginile.

Pentru a edita șablonul în funcție de preferințele dvs., va trebui să modificați fișierul HTML numit de obicei index.html. În cazul lui Wander, voi edita fișierul numit acasă one-pagină.html, pe măsură ce facem un site web de o pagină.

Lucrul cu HTML

Dacă nu ați mai lucrat niciodată cu un șablon HTML, fișierul va arăta probabil intimidant dacă încercați să îl deschideți în Text Sublim sau în orice alt editor. În timp ce un tutorial HTML complet nu se află în sfera de aplicare a acestui articol, să acoperim elementele de bază ale ceea ce este HTML și cum arată.

HTML este un limbaj de markup care constă în etichete precum

,

,

, si altii. Etichetele vin în perechi, fiecare având o deschidere și o închidere. Ele ajută browserul să înțeleagă cum ar trebui să afișeze ce se află între aceste etichete.

Un paragraf dintr-un document HTML va arăta astfel:

Acesta este paragraful meu.

. O poziție va fi înconjurată de un h etichetă însoțită de un număr de la 1-6 care semnifică nivelul titlurilor 1 prin nivelul titlurilor 6.  

Când editați un șablon HTML, nu este necesar să editați nici una dintre etichete, ci doar textul dintre ele. Cu toate acestea, dacă doriți să copiați o parte a codului sau să îl ștergeți, va trebui să selectați întreaga parte din eticheta de deschidere la eticheta de închidere și apoi să o copiați sau să o ștergeți.

Cea mai ușoară modalitate de a edita șablonul este să îl deschideți într-un browser și apoi să examinați codul. Mai întâi, faceți dublu clic pe fișierul HTML pentru ao deschide în browserul dvs. implicit. Chiar de pe liliac, veți vedea că trebuie să editați textul în secțiunea antet. Faceți clic dreapta pe propoziția care citește Noi facem BRANDS Shine și selectați Inspecta.

Inspectarea codului HTML într-un browser web.

În partea de jos va apărea un panou care vă va afișa codul HTML al șablonului nostru. Linia care are propoziția selectată va fi în partea stângă a panoului Inspector. Veți vedea că propoziția este înfășurată în a

eticheta cu clasa de mare mt20.

Acum, deschideți șablonul în editorul de coduri făcând clic dreapta pe numele șablonului și selectați Deschideți cu Text Sublim. Găsiți aceeași linie de cod pe care ați văzut-o în panoul Inspector, selectați textul dintre etichete și înlocuiți-l cu sloganul companiei dvs..

Editarea codului HTML.

Pentru a edita paragraful direct sub titlul pe care tocmai l-ați înlocuit, reveniți la browserul dvs., faceți clic dreapta pe paragraf și selectați Inspectați. De data aceasta, propoziția este împachetată între ele

etichete cu clasa de alb. Reveniți la editorul de cod, găsiți linia corespunzătoare de cod, faceți clic între etichete și adăugați informațiile.

Continuați cu acești pași până când ați înlocuit întregul conținut demo cu propriul dvs. Ștergeți secțiunile nedorite selectând totul de la deschidere până la eticheta de închidere a unei anumite secțiuni de cod.

În mod similar, dacă doriți să duplicați o parte din șablon, găsiți codul care conține respectiva secțiune și selectați totul, inclusiv etichetele de deschidere și de închidere, apoi copiați-l și inserați-l acolo unde doriți să apară conținutul.

În captura de ecran de mai jos, am vrut să adaug o altă mărturie, așa că am selectat codul celei de-a treia mărturii și l-am copiat imediat.

Observați că, în majoritatea cazurilor, vor fi împachetate secțiuni ale codului

înainte de a rula în orice tag-uri de titlu și de paragraf. Dacă doriți să duplicați sau să ștergeți acea secțiune, trebuie să selectați

și etichetele; altfel, conținutul dvs. nu va fi afișat corect.

După ce ați terminat de editat conținutul, trebuie să înlocuiți imaginile. Cea mai convenabilă modalitate de a le dezactiva este să țineți cont de numele imaginilor din dosarul șablonului și apoi să numiți imaginile în același mod. Odată ce imaginile sunt denumite corect, copiați-le în folderul cu imagini.

Cum să-ți modelezi un șablon de pagină web

Există încă un lucru de făcut înainte de a încărca fișierele pe serverul dvs., și asta e stilul șablonului pentru a se potrivi cu brandul existent. Stilurile se află în dosarul CSS. În cazul Wander, există mai multe foi de stil împreună cu dosarul numit colorate.

Pentru a începe editarea fișierului CSS, puteți urma aceleași pași folosiți pentru a edita fișierul HTML. Pentru a afla cum este desenat un anumit element, faceți clic dreapta pe el în browser și faceți clic pe Inspecta. De data aceasta, priviți spre partea dreaptă și veți observa stilul corespunzător acelui element. Același panou va avea și numele fișierului de stil pe care trebuie să îl editați împreună cu linia unde este localizat codul.

Inspectarea CSS într-un browser web. 

Deschideți fișierul din editorul de coduri. În acest caz este theme.css. Deoarece vreau să modific culoarea de fundal a secțiunii a doua, care are toate caracteristicile, trebuie să găsesc linia 5378 în fișierul theme.css. Să-l schimbăm în negru:

Reglați rapid culoarea de fundal în CSS.În cazul în care doriți să ajustați rapid culoarea, trebuie doar să înlocuiți foaia de stil în capul fișierului HTML cu numele fișierului CSS preferat.

Căutați linia de cod care spune:

Schimbarea numelui la green.css va schimba culorile butoanelor, legăturilor și icoanelor:

Modificarea culorilor butoanelor CSS ale fișierului.

Pentru a schimba fonturile, inspectați oricare dintre texte și priviți partea dreaptă a panoului Inspector. Veți vedea numele fontului pe care îl folosește textul, precum și linia de cod în care îl puteți modifica într-un font pe care îl preferați.  

Localizarea codului CSS pentru fonturi.

Cum să încărcați șablonul site-ului pe server

Acum, că ați modificat și ați stilizat șablonul site-ului dvs. de o pagină, îl puteți încărca pe serverul dvs. de găzduire. Gazda dvs. vă va furniza numele de utilizator și parola necesare pentru a utiliza conexiunea FTP.

Pentru a începe procesul de încărcare, deschideți FileZilla și introduceți numele serverului, numele de utilizator și parola în bara de sus, apoi faceți clic pe Conectare rapidă.

Găsiți folderul cu șablonul pe computerul dvs. din partea stângă a ecranului și dați clic pe acesta pentru al extinde. În partea din stânga jos, selectați toate fișierele și folderele și trageți-le în partea dreaptă a ecranului în directorul rădăcină al serverului dvs. de găzduire situat în public_html pliant.

Transferarea șablonului de pagină dintr-o pagină prin FTP.

5 sfaturi importante pentru site-uri mai bune pe o pagină

Acum, că site-ul dvs. Web este live, iată câteva sfaturi cheie pe care să le aveți în vedere.

1. Mențineți-vă mesajul succint

Spre deosebire de un site tradițional, un șablon de o pagină are un spațiu limitat, ceea ce înseamnă mai puțin spațiu pentru transmiterea mesajului. De aceea este esențial să eliminați toate jargonul și detaliile inutile, lăsând doar cele mai relevante informații. Explicați clar ce aveți de oferit și beneficiile pe care le oferă produsul sau serviciul dvs..

2. Folosiți apeluri puternice la acțiune

Având în vedere spațiul limitat, apelul dvs. la acțiune trebuie să fie puternic și convingător. De asemenea, trebuie să îl includeți de mai multe ori pentru efectul maxim. Implicit, cele mai multe șabloane de site-uri web au deja secțiuni multiple care includ un apel pentru acțiune, pentru a profita la maximum de acestea. Vizitați direct la o secțiune care are planurile de prețuri sau la un formular de contact unde pot lua legătura cu dvs..

3. Mențineți navigația accesibilă și simplă

Setați navigația pentru a trece la diferite secțiuni ale site-ului dvs. web. Veți fi cu un pas înaintea jocului dacă optați pentru un șablon care are deja o navigație lipicioasă care rămâne în poziția în care un vizitator revine în jos. Includeți numai linkurile către secțiunile site-ului dvs. web și evitați plasarea oricăror legături externe, deoarece acestea vor arunca pe cineva care vizitează pagina dvs..

4. Utilizați Visuals

Utilizarea imaginilor sau a videoclipurilor vă va ajuta să vă spuneți povestea și să vă împărtășiți mai mult despre ceea ce aveți de oferit, fără a ocupa prea mult spațiu. În cazul site-urilor cu o pagină, imaginile sunt cele mai bune prietene.

5. Mențineți ierarhia

Plasați cele mai importante informații în partea de sus a site-ului dvs. și apoi îndrumați încet utilizatorul de pe pagină la informații mai specifice care acceptă mesajul dvs. de bază. Acest lucru vă va ajuta să mențineți ierarhia și să prezentați informațiile în mod logic.

Începeți cu propriul dvs. site de pagină

Dacă ați urmat acest tutorial, acum aveți cunoștințele necesare pentru a crea rapid un site web dintr-o pagină utilizând un șablon receptiv. Începeți călătoria dvs. cu șablonul site-ului potrivit și consultați acest tutorial pentru a vă ajuta să îl configurați rapid.

Afaceri