Cum să faci site-uri de afaceri responsabile cu șabloane

Când vine vorba de crearea site-ului dvs. de afaceri, există mai multe moduri de a face acest lucru. Puteți opta pentru un constructor de site-uri, puteți avea un designer un design pentru dvs., sau puteți utiliza un CMS cum ar fi WordPress. În timp ce nu există nimic în neregulă cu aceste opțiuni, acestea pot fi prea multe dacă tot ce aveți nevoie este un simplu site web care să prezinte ceea ce afacerea dumneavoastră are la dispoziție și să ofere clienților și clienților potențiali o modalitate de a vă contacta.

Dacă nu aveți nevoie de caracteristici fanteziste și nu vă preconizați în mod regulat blogging-ul sau vânzarea online, atunci un șablon al site-ului web care răspunde la HTML este exact ceea ce aveți nevoie. Aici, vă vom trece prin pașii de configurare, astfel încât să puteți lansa în timp util plat. 

Cum să faci un site web responsabil în HTML

Frumusețea șabloanelor site-urilor web de afaceri responsabile cu HTML este că sunt ușor de folosit și nu necesită cunoștințe tehnice speciale pentru a le încărca pe serverul dvs. de găzduire. Ele sunt, de asemenea, mai ușor de modificat decât alți constructori de site și CMS-uri.

În acest tutorial, vă vom arăta cum să modificați și să încărcați un șablon de site responsibil cu HTML pe serverul dvs., astfel încât să puteți crea cu ușurință un site de afaceri receptiv.

Înainte de a începe

Înainte de a începe chiar cu modificarea șablonului site-ului receptiv, există câteva lucruri de care veți avea nevoie. Acestea includ un nume de domeniu și un plan de găzduire, un program FTP și un editor de coduri, un șablon de site web de afaceri care răspunde HTML și, în fine, conținutul și imaginile care vor apărea pe site-ul dvs. Să aruncăm o privire mai bună la fiecare dintre cei de mai jos.

1. Numele de domeniu și hosting

Primul lucru pe care trebuie să-l faceți este să cumpărați un nume de domeniu și un plan de găzduire, astfel încât site-ul dvs. să poată fi găsit online. În majoritatea cazurilor, veți putea obține un nume de domeniu gratuit atunci când vă înscrieți pentru un plan de găzduire cu majoritatea furnizorilor. Când vine vorba de numele dvs. de domeniu, o idee bună ar fi să utilizați propriul nume de firmă ca nume de domeniu.

Dacă este posibil, încercați să obțineți o extensie .COM, deoarece este cea mai populară, dar rețineți că găsirea unui nume de domeniu excelent cu un .COM nu este la fel de ușor astăzi ca atunci când a fost. În acest caz, vă recomandăm să consultați alte extensii, cum ar fi .CO sau un domeniu local, cum ar fi .US.

Când vine vorba de furnizorii de hosting, puteți găsi pachete de găzduire care încep de la $ 5 / month. Veți dori să citiți întrebările frecvente pentru a vedea cum se ocupă de serviciul clienți și de a obține un sentiment al termenilor și condițiilor acestora. De asemenea, luați în considerare citirea recenziilor unei anumite gazde de pe alte site-uri terțe pentru a vedea ce spun clienții lor despre ei.

2. Clientul și editorul de cod FTP

Următoarele elemente de pe lista noastră sunt un client FTP, cum ar fi FileZilla și un editor de cod ca textul sublim. Scopul unui client FTP este să vă conectați computerul la serverul de găzduire și să încărcați ușor toate fișierele de pe site-ul dvs. simultan, în loc să le încărcați unul câte unul prin panoul de control al gazdei. Un editor de cod, pe de altă parte, vă va ajuta să editați fișierele șablonului și să faceți mai ușor să găsiți diferite părți ale codului care au nevoie de editare.

Textul Sublime și FileZilla sunt gratuite și pot fi utilizate pe computere Mac, Windows și Linux.

3. Șabloanele web ale site-urilor HTML alese și conținutul site-ului

În cele din urmă, veți avea nevoie de un șablon HTML și de conținutul pe care doriți să-l adăugați pe site-ul dvs. web. Puteți găsi o mulțime de șabloane HTML receptive făcute special pentru site-urile de afaceri pe piețe ca Envato Elements. Odată ce găsiți unul care vă place, pur și simplu descărcați-l, dezarhivați dosarul și salvați-l undeva pe care îl puteți accesa cu ușurință.

În ceea ce privește conținutul, analizați copia care va apărea pe paginile site-ului dvs. și explicați ce face compania dvs., cine îi servește și cum îi ajută pe clienți cu produse și servicii. De asemenea, puteți adăuga informații despre persoanele cheie din compania dvs. Nu uitați elemente vizuale precum imaginile și logo-urile.

Modul de personalizare a conținutului șablonului

Acum, este timpul să editați conținutul din cadrul șablonului și să înlocuiți informațiile fictive cu dvs. În scopul acestui tutorial, voi folosi șablonul Moose. Acest șablon de site receptiv oferă un design plat și receptiv și include mai multe șabloane de pagini diferite potrivite pentru proprietarii de afaceri, agenții de creație, studiouri digitale și multe altele.

1. Înțelegeți modul în care este structurat site-ul șablon responsabil

Înainte de a începe editarea șablonului, este important să înțelegeți structura, astfel încât să știți ce fișiere trebuie să modificați. După cum puteți vedea din captura de ecran de mai jos, dosarul dezarhivat are trei subdosare.

Cel numit șablon este subfolderul care conține toate fișierele care formează șablonul nostru de site receptiv, precum și câteva subfoldere suplimentare. Dacă utilizați un șablon diferit, este posibil să nu vedeți toate aceste fișiere și subfoldere, dar, în general, vă puteți aștepta să găsiți:

  • Imagine care conține toate imaginile demo utilizate în șablon.
  • JS sau java cu toate codurile JavaScript necesare pentru ca șablonul să funcționeze corect. În general, nu va trebui să editați conținutul acestui dosar deoarece JavaScript este folosit pentru funcționalități suplimentare, cum ar fi animația sau validarea formularului.
  • Dosarul CSS sau Stiluri care conține fișierele CSS pe care va trebui să le editați pentru a particulariza fonturile, culorile și alte stiluri vizuale.
  • Diferite fișiere HTML pentru diferite pagini de pe site-ul dvs., cum ar fi index.html, about.html, contact.html și altele.

2. Înlocuiți conținutul Dummy

Faceți dublu clic pe fișierul index.html sau faceți clic dreapta pe el și selectați Deschideți în Chrome (sau orice browser pe care îl utilizați). Când te uiți la șablonul din browserul tău, poți vedea că există un glisor în care trebuie să înlocuii imaginile și legendele, o secțiune de servicii în care trebuie să adaugi propriile informații și mai mult.

Cea mai ușoară modalitate de a găsi unde să editați aceste informații este să faceți clic dreapta pe text și să faceți clic pe Inspecta legătură.

Fereastra Inspector va apărea și veți putea vedea codul HTML utilizat în șablonul site-ului Web răspunzător HTML din partea stângă a ferestrei și codul CSS responsabil pentru stilul vizual al șablonului din partea dreaptă a ferestrei, parte a ferestrei inspectorului.

Uită-te la codul HTML și vei vedea că linia de cod care conține textul selectat este evidențiată. În exemplul screenshot, antetul pe care îl inspectez și care este evidențiat în fereastra Inspector se află între

tag-uri, care sunt etichetele HTML. Etichetele din HTML constau dintr-o etichetă de deschidere și de închidere și alcătuiesc o pereche de etichete care conține elemente HTML corespunzătoare. De exemplu,

etichetele sunt numite etichete de titlu și sunt folosite pentru a păstra o rubrică de nivel 1. asemănător,

tag-urile conțin elementul HTML al paragrafului.

Pentru a modifica șablonul, trebuie să știți care etichete să mențină textul pe care doriți să-l editați și să-l găsiți din nou în editorul de coduri. Apoi, puteți înlocui textul cu propriul dvs..

Acum, când știm ce etichete trebuie să editați, este timpul să deschideți fișierul index.html într-un editor de cod ca textul sublim. Faceți clic dreapta pe fișier și faceți clic pe Deschideți cu Text Sublim (sau orice alt editor de cod).

Cu fișierul HTML deschis în editorul de coduri, derulați în jos până când găsiți același text pe care îl inspectați în browser. Apoi, faceți clic pe între

etichete, ștergeți textul fals și introduceți-vă propriul.

Apoi faceți clic pe între etichete, ștergeți textul și introduceți o scurtă descriere sau un text descriptiv. De asemenea, puteți șterge părți ale șablonului de site receptiv, de care nu veți avea nevoie. Dacă vă uitați la captura de ecran de mai jos, veți observa că am înlocuit textul antetului și am șters rândul de jos al serviciilor.

Pentru a edita restul paginii principale și a altor pagini din șablon, tot ce trebuie să faceți este să repetați acest proces din nou și din nou.

Acum, să explicăm cum să înlocuiți cu ușurință imaginile falsificate. În primul rând, va trebui să plasați toate imaginile în folderul de imagini din folderul șablonului site-ului dvs. HTML responsive. Apoi, reveniți la browser și inspectați o parte a paginii cu o imagine.

Inspectorul vă va spune numele imaginii, precum și etichetele care conțin imaginea respectivă. Acum, puteți să vă întoarceți la editorul de cod și să căutați acea bucată de cod. Apoi, înlocuiți numele imaginii cu numele imaginii dvs. și salvați modificările.

Modul de stil al site-ului web

Acum, că ați introdus propriul dvs. conținut, să discutăm despre modul de a modela șablonul. În cazul meu, șablonul Moose include câteva scheme de culori pre-făcute care sunt situate în stil> CSS> culoare subfolder. Aceasta înseamnă că pot schimba culorile pur și simplu schimbând foaia de stil în capul documentului pentru foaia de stil preferată.

Găsiți următoarea linie de cod în șablonul HTML:

Schimbarea numelui în blue.css va schimba culoarea roșie a șablonului într-o nuanță albastră:

De asemenea, puteți să editați foaia de stil principală numită style.css și să includeți fonturile și culorile preferate.

Pur și simplu urmați principiul de editare HTML: în primul rând, inspectați elementul pe care doriți să-l stylizați, apoi găsiți-l în fișierul style.css și experimentați cu diferite valori.

Cum să încărcați fișierele pe server

Ultimul pas în a face un site web receptiv este să vă încărcați fișierele pe serverul dvs. de găzduire. Furnizorul dvs. de gazduire ar fi trebuit să vă trimită prin e-mail imediat după ce v-ați înscris cu informațiile necesare pentru transferul de fișiere FTP.

Va trebui să lansați FileZilla (sau un alt program FTP) și apoi să introduceți informațiile necesare în bara de sus. Aceasta înseamnă că trebuie să introduceți numele serverului, numele de utilizator și parola dvs., apoi faceți clic pe Conectare rapidă:

Apoi, veți dori să găsiți folderul Șablon de site web răspunzător cu HTML din partea stângă a programului FTP și să îl extindeți făcând clic pe el. În fereastra de mai jos, selectați tot conținutul și trageți-l în partea dreaptă a ecranului FTP. Aruncați fișierele în dosarul rădăcină al serverului dvs. de găzduire, care este de obicei folderul public_html.

Așteptați finalizarea procesului de încărcare, apoi deschideți browserul și introduceți numele domeniului. Site-ul dvs. ar trebui să fie acum live.

4 Elemente-cheie Site-ul dvs. de afaceri responsabile ar trebui să includă

Acum, că site-ul dvs. este live, este esențial să includeți informații esențiale pe care fiecare site web de afaceri ar trebui să le aibă.

  1. Despre site și servicii. O pagină despre pagină îi spune vizitatorilor povestea din spatele mărcii dvs. și îi ajută să înțeleagă cum pot ajuta serviciile dvs. De acolo, puteți să vă conectați în mod natural la pagina dvs. de servicii, care ar trebui să ofere o scurtă descriere a tot ceea ce este inclus în serviciu, precum și prețul fiecărui pachet.
  2. Pagina de contact. Este de la sine înțeles că aveți nevoie de o pagină de contact pentru ca vizitatorii să poată lua legătura cu dvs. pentru a programa un apel sau pentru a afla mai multe despre dvs. Pagina de contact trebuie să includă un simplu formular de contact, dar puteți, de asemenea, să vă afișați profilurile mass-media sociale sau un număr de telefon.
  3. Dovada sociala. Bucăți de dovadă socială, cum ar fi marturii, recenzii sau trăsături în alte publicații, merg foarte departe spre stabilirea credibilității și expertizei. Luați în considerare includerea câtorva dintre ele pe pagina de pornire și crearea unei pagini dedicate care să găzduiască toate laudele actuale și viitoare pe care le veți primi.
  4. Apel la acțiune. În cele din urmă, nu uitați că trebuie să faceți clar pentru vizitatorii dvs. ce înseamnă să le faceți. Simpla afișare a serviciilor dvs. nu va face prea multe pentru a le încuraja să dețină un apel. Includeți mai multe solicitări de acțiune pe pagina dvs. de pornire și pe tot restul site-ului dvs., ceea ce ușurează acțiunile vizitatorilor.

Creați-vă site-ul dvs. de afaceri receptiv astăzi

Crearea unui site de afaceri receptiv este ușor de îndată ce înțelegeți părțile care alcătuiesc structura șablonului și cum puteți găsi informațiile pe care trebuie să le modificați. Utilizați tutorialul nostru pentru a configura site-ul dvs. de afaceri și nu uitați să consultați colecția noastră de șabloane HTML de afaceri receptive pentru a găsi cea potrivită pentru site-ul dvs..