Cum să faci site-uri de restaurant cu șabloane HTML5

Crearea unui site web pentru restaurantul dvs. este crucială dacă doriți să atrageți clienți noi. Din fericire, astăzi este mai ușor ca niciodată să obțineți rapid site-urile de restaurante. Datorită numeroaselor șabloane HTML pentru restaurante, nu este nevoie să vă petreceți timp în căutarea unui designer și să învățați cum să creați site-uri de restaurante de la zero.

Un șablon HTML este ușor de modificat și încărcat pe un server de găzduire. Un alt avantaj al unui șablon HTML este faptul că acesta folosește un cod mai puțin complex, ceea ce face ca site-urile restaurantului să fie construite cu șabloane HTML mai rapid decât cele construite pe un CMS cum ar fi WordPress.

Dacă v-ați întrebat cum să faceți un site web pentru un restaurant, această postare este pentru dvs. Vă vom arăta ce veți avea nevoie pentru a începe, cum să utilizați un șablon de restaurant HTML5, personalizați-l și, în sfârșit, cum să îl încărcați pe serverul dvs. de găzduire, astfel încât să puteți arăta ce poate oferi restaurantul dvs..

Instrumente și resurse de care aveți nevoie pentru a lansa un site web al restaurantului

Primul pas în crearea site-ului restaurantului dvs. este colectarea tuturor instrumentelor și resurselor de care aveți nevoie. Acesta include un nume de domeniu, o companie de găzduire, un program FTP, conținutul care va apărea pe site-ul dvs. și un șablon de restaurant. Să aruncăm o privire mai atentă la fiecare dintre cei de mai jos.

1. Numele de domeniu

Un nume de domeniu este modul în care clienții dvs. vă vor găsi online. Alegerea cea mai evidentă este să utilizați numele restaurantului dvs. ca nume de domeniu asociat cu o extensie .COM. Cu toate acestea, cele mai bune nume de domenii sunt adesea deja revendicate, așa că nu fi surprins dacă numele dvs. de domeniu dorit este luată.

În acest caz, puteți încerca să contactați proprietarul domeniului și să întrebați despre posibilitatea cumpărării numelui de domeniu de la acesta. O altă opțiune este să experimentați o extensie diferită sau să adăugați cuvintele restaurantului sau numele orașului.

2. Compania de gazduire

În afară de numele domeniului, veți avea nevoie, de asemenea, de un server de găzduire care va găzdui toate fișierele site-urilor web pentru dvs. Merită menționat faptul că puteți cumpăra un nume de domeniu în același timp cu achiziționarea unui plan de găzduire. De fapt, majoritatea companiilor de hosting vor oferi un domeniu gratuit ca un stimulent pentru a vă înscrie pentru planul de găzduire.

Înainte de a vă stabili pe o companie de găzduire, asigurați-vă că ați făcut diligența dvs. și citiți recenzii terțe părți pe site-uri independente restaurant. Acest lucru vă va oferi o imagine mai exactă a calității și satisfacției clienților.

3. Un client FTP

Următoarea activitate din listă este descărcarea unui client FTP, astfel încât să puteți transfera fișierele șablonului de pe computer pe serverul dvs. În funcție de sistemul de operare, veți găsi o mulțime de programe FTP pentru Windows, Mac și Linux. Puteți lua în considerare, de asemenea, FileZilla, deoarece este un client cross-platform, care este gratuit pentru descărcare și utilizare.

4. Un editor de cod

Veți avea nevoie de un editor de cod pentru a edita fișierele pentru șablonul dvs. Un editor de cod este similar cu un editor de text, cum ar fi Notepad, dar utilizează evidențierea sintaxei pentru o mai mare claritate.  

Prefer subtil text, care poate fi folosit pe Mac, Windows și Linux - este disponibilă și o încercare gratuită - dar orice editor de cod va fi suficient.

5. Un șablon și un conținut HTML

În cele din urmă, veți avea nevoie de un șablon de site pentru restaurant și conținutul care va apărea pe site-ul dvs. web. Deși este posibil să sperăm să obțineți gratuit un șablon HTML pentru restaurant, veți găsi că un șablon premium oferă mai multe caracteristici. Puteți începe prin a privi colecția noastră de șabloane de site-uri pentru restaurante pentru a găsi cea potrivită pentru afacerea dvs. În scopul acestui tutorial, voi folosi șablonul Resta. Acest șablon are un design simplu și curat, cu un cursor atractiv de lățime întreagă. Acesta include, de asemenea, un formular de rezervare, astfel încât veți putea să faceți rezervări online.

Când e vorba de conținut, adunați toate copiile pe care doriți să le includeți, cum ar fi când restaurantul dvs. a fost deschis pentru afaceri, ce fel de bucătărie vă oferă, listele de meniuri, bios de personal, șefi de cap și orice altceva care este relevant pentru restaurantul dvs..

Acum, este timpul să vă familiarizați cu șablonul și să îl personalizați în funcție de nevoile dvs. Hai sa continuăm!

Modul de editare a conținutului șablonului restaurantului

Odată ce ați găsit un șablon de restaurant HTML5 pe care îl doriți, achiziționați-l apoi salvați dosarul cu fermă pe computer. Dezarhivați-l într-o locație ușor accesibilă, cum ar fi desktopul sau dosarul Descărcări.

1. Înțelegeți structura șablonului restaurantului

Înainte de a începe modificarea fișierelor, este o idee bună să aveți cel puțin o înțelegere sumară a structurii șablonului. Rețineți că unele foldere și fișiere pot fi diferite de cele prezentate mai jos. Cu toate acestea, în majoritatea cazurilor, veți găsi un dosar care conține documentația șablonului și una cu șablonul real.

În interiorul dosarului propriu-zis al șablonului, veți găsi, de obicei, următoarele subfoldere și fișiere:

  • CSS.Acest dosar va conține toate foile de stil care controlează fonturile, culorile, coloanele, marginile, paddings și alte stiluri vizuale ale șablonului dvs..
  • JS.Dosarul JavaScript va conține fișiere JavaScript utilizate pentru validarea formularelor, controlarea glisoarelor, a diferitelor animații și a altor efecte.
  • Fișiere HTML. De asemenea, veți găsi mai multe fișiere HTML care reprezintă paginile șablonului site-ului dvs. de restaurant, cum ar fi pagina de pornire, despre servicii, și așa mai departe.
  • Imagini. În acest dosar, veți găsi toate imaginile de fundal, precum și alte imagini cu destinații de înlocuire utilizate în șablon.

De asemenea, puteți găsi următoarele fișiere și foldere, cum ar fi în șablonul Resta:

  • Audio. Acest dosar conține fișierul audio care este redat ca muzică de fundal atunci când cineva aterizează pe site-ul dvs. de restaurant.
  • Fonturi.Dosarul Fonturi conține toate fonturile de pictograme utilizate în cadrul șablonului.
  • Mail.php.Acest fișier este utilizat pentru configurarea formularului de contact și de rezervare.

Cu structură în afara, să începem să modificăm șablonul.

2. Înlocuiți informațiile prestabilite

Vom începe prin editarea fișierului index.html. Faceți clic dreapta pe fișier și selectați Deschis în browser. Acest lucru va deschide fișierul în browserul dvs. implicit și vă va permite să vedeți ce părți trebuie schimbate.

După cum vedeți din captura de ecran de mai jos, există câteva lucruri de editat, inclusiv:

  • textul antetului în prezentarea de diapozitive
  • despre informații
  • secțiunea de mâncăruri populare
  • lista de meniuri

Pentru a facilita găsirea acelor informații în șablonul dvs., faceți clic dreapta pe textul antetului și dați clic pe Inspecta.

Un panou va apărea în partea inferioară care arată codul HTML care formează șablonul nostru.

În acest panou, veți observa că linia de text pe care am selectat-o ​​pentru a inspecta este evidențiată cu albastru în partea stângă a panoului Inspector. Dacă priviți spre dreapta, veți observa că este afișat un cod ușor diferit, care controlează stilul vizual al acelui rând de text.

După cum puteți vedea din captura de ecran, textul antetului pe care l-am selectat se află între

tag-uri, care reprezintă titluri în HTML.

Pentru a edita șablonul, localizați etichetele care conțin conținutul pe care doriți să îl modificați, găsiți-le în editorul de cod și schimbați-l pentru informații.

Cu aceste cunoștințe, reveniți la dosarul șablonului, faceți clic dreapta pe index.html și selectați Deschideți cu Text Sublim sau editorul de cod pe care l-ați descărcat mai devreme.

Acum, doriți să găsiți același cod pe care l-ați văzut în panoul Inspector al browserului dvs..

Derulați în jos până când îl găsiți pe linia 298. Apoi faceți clic pe între

și adăugați propriul mesaj de întâmpinare.

Apoi, pe linia 301, faceți clic între ele

și înlocuiți propoziția cu propria dvs..

În mod similar, puteți continua să faceți acești pași de mai multe ori: inspectați informațiile pe care doriți să le modificați, identificați etichetele care conțin acest text, găsiți-le în editorul de cod și înlocuiți-le cu textul.

Pentru a schimba logo-ul și alte imagini de pe site, faceți puțin timp să priviți numele de imagini folosite în folderul img al șablonului. Apoi, redenumiți imaginile folosind acele nume, selectați toate imaginile cu substituent, ștergeți-le, apoi plasați imaginile în folderul img.

În cele din urmă, pentru a modifica formularul de rezervare, astfel încât rezervările dvs. să ajungă la adresa corectă, accesați folderul șablonului dvs., faceți clic dreapta mail.php fișier și deschideți-l cu editorul de cod. Pe linia de cod care are adresa de e-mail falsă, faceți clic între ghilimele, evidențiați adresa de e-mail și înlocuiți-o cu propria dvs..

Cum să personalizați aspectul șablonului

Odată ce ați înlocuit toate informațiile, este timpul să modelați șablonul după preferințele dvs. Înapoi în dosarul șablonului, dați clic dreapta pe style.css fișier și deschideți-l în editorul de cod.

Pentru a edita CSS, urmați aceiași pași folosiți pentru a edita codul HTML. Faceți clic dreapta pe elementul pe care doriți să îl faceți și faceți clic pe inspectați, dar de data aceasta căutați codul din partea dreaptă a filei Inspector și apoi găsiți același cod în editorul de cod. Fila Inspector vă va arăta ce linie de CSS trebuie să modificați.

De exemplu, hai să schimbăm antetul la o culoare teal prin introducerea unui cod HEX așa cum este:

culoare: # 65b5c1;

Să modificăm, de asemenea, textul paragrafului la o culoare mai închisă, cum ar fi:

culoare: # 222222;

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

Acum că ați personalizat șablonul, tot ce trebuie să faceți este să încărcați fișierele pe serverul de găzduire. Detaliile de conectare ar fi trebuit să vi se trimită prin e-mail către gazdă, așa că căutați e-mailul respectiv și notați numele serverului, numele dvs. de utilizator și parola.

Lansați programul FTP. Introduceți informațiile furnizate de gazda dvs. în câmpurile corespunzătoare, apoi faceți clic pe Conectați.

Partea stângă a ecranului vă va permite să găsiți folderul care conține fișierele șablon de pe computer. Faceți clic pentru ao extinde. Selectați toate fișierele și folderele, glisați-le în partea dreaptă a ecranului și plasați-le în public_html pliant.

Așteptați ca fișierele să fie încărcate, apoi deschideți browserul și introduceți numele domeniului. Felicitări, site-ul dvs. este acum live!

5 Sfaturi pentru a face site-ul dvs. de restaurant minunat

Odată ce site-ul dvs. este live, există câteva modificări suplimentare pe care le puteți face pentru a face o primă impresie bună pentru publicul dvs..

  1. Adăugați site-ul dvs. la profilurile dvs. de social media. Acum că aveți un site de restaurant, este timpul să actualizați secțiunea despre bio și site-ul Web pe toate profilurile dvs. de social media. Lăsați-i pe adepții dvs. să știe că pot să-ți verifice meniul online și să facă o rezervare. Distribuiți screenshot-ul site-ului restaurantului și încurajați-i să rezerve oferindu-le un cod de discount sau un cupon promoțional.

  2. Includeți recenziile clienților anteriori.Clienții dvs. din trecut știu probabil cât de bine sunt mesele dvs. și de atmosfera excelentă oferită de restaurant. Prezentați-le mărturiile și recenziile pe site-ul restaurantului dvs. Acest lucru va ajuta la încurajarea vizitatorilor noi să vă vadă.

  3. Listați restaurantul cu Google Business. Afișarea restaurantului dvs. cu Google Business va face probabil ca site-ul restaurantului dvs. să apară în rezultatele căutării, iar dacă includeți site-ul dvs. web, acesta va permite cercetătorilor să vă conecteze direct.

  4. Comprimați-vă imaginile. Fotografiile excelente sunt o necesitate pentru un restaurant, dar asigurați-vă că comprimați dimensiunea imaginilor. Acest lucru va face site-ul dvs. mai rapid pentru a încărca și îmbunătăți experiența vizitatorilor de utilizare.

  5. Încorporați o hartă Google. Adăugarea unei hărți Google pe site-ul restaurantului dvs. va ușura găsirea de către potențialii clienți și obținerea de indicații în timp ce se află în mișcare.

Aflați mai multe despre site-urile restaurantului

În acest tutorial am explorat cum să creați un site web pentru un restaurant. Pentru a afla mai multe despre site-urile restaurantului, consultați unul dintre următoarele tutoriale:

Porniți site-ul restaurantului cu un șablon HTML

Datorită unei varietăți de șabloane HTML5 pentru site-urile restaurantului, nu trebuie să spargeți banca pentru a crea un site minunat pentru restaurantul dvs. Acum că v-am arătat cum să faceți un site web pentru un restaurant, sunteți gata să plecați. Consultați colecția noastră de șabloane de restaurante și folosiți ghidul nostru pentru a lansa astăzi site-ul restaurantului.