Hvordan lage restaurantwebsteder med HTML5-maler

Å skape et nettsted for din restaurant er avgjørende hvis du ønsker å tiltrekke seg nye kunder. Heldigvis, det er lettere enn noensinne å få restaurantwebsteder oppe og kjører raskt. Takket være mange HTML-maler for restauranter, trenger du ikke å bruke tid på å lete etter en designer eller lære å lage restaurantwebsteder fra grunnen av.

En HTML-mal er enkel å endre og laste opp til en hosting server. En annen fordel med en HTML-mal er at det bruker mindre komplisert kode, noe som gjør restaurantwebsteder bygget med HTML-maler raskere å laste enn de som er bygd på et CMS som WordPress.

Hvis du har lurt på hvordan du lager et nettsted for en restaurant, er dette innlegget for deg. Vi viser deg hva du trenger for å komme i gang, hvordan du bruker en HTML5-restaurantmal, tilpasse den og til slutt hvordan du laster den opp på hosting-serveren din, slik at du kan vise frem hva din restaurant har å tilby.

Verktøy og ressurser du trenger for å starte et restaurantnettsted

Det første trinnet i å lage din restaurantwebside er å samle alle verktøyene og ressursene du trenger. Dette inkluderer et domenenavn, vertsfirma, et FTP-program, innholdet som vil gå på nettstedet ditt, og en restaurantmal. La oss ta en nærmere titt på hver av de nedenfor.

1. Domenenavn

Et domenenavn er hvordan kundene dine finner deg online. Det mest åpenbare valget er å bruke restaurantens navn som domenenavnet parret med en .COM-utvidelse. Imidlertid er de beste domenenavnene ofte allerede hevdet, så vær ikke overrasket om ditt ønskede domenenavn er tatt.

Hvis det er tilfelle, kan du prøve å kontakte domeneseier og spørre om muligheten for å kjøpe domenenavnet fra dem. Et annet alternativ er å eksperimentere med en annen utvidelse eller legge til ordene restaurant eller byens navn.

2. Hosting Company

Bortsett fra domenenavnet, trenger du også en hosting server som vil huse alle restaurantens nettsider for deg. Det er verdt å nevne at du kan kjøpe et domenenavn samtidig som du kjøper en hostingplan. Faktisk vil de fleste hosting-selskaper tilby et gratis domene som et incitament til å registrere seg for deres hosting plan.

Før du avgjør deg på et vertsfirma, må du sørge for å gjøre din due diligence og lese tredjeparts vurderinger på uavhengige restaurantsteder. Dette gir deg et mer nøyaktig bilde av vertens kvalitet og kundetilfredshet.

3. En FTP-klient

Den neste oppgaven på listen din, er å laste ned en FTP-klient, slik at du kan overføre malens filer fra datamaskinen til serveren din. Avhengig av operativsystemet, finner du mange FTP-programmer for Windows, Mac og Linux. Du kan også vurdere FileZilla siden det er en plattformsklient som er gratis å laste ned og bruke.

4. En kodeditor

Du trenger en kodeditor for å redigere filene til malen. En koderedigerer ligner på et tekstredigeringsprogram som Notisblokk, men det bruker tydeligere syntax for større klarhet.  

Jeg foretrekker Sublime Text, som kan brukes på Mac, Windows og Linux. En gratis prøveversjon er også tilgjengelig - men noen kode redaktør vil være tilstrekkelig.

5. En HTML-mal og innhold

Til slutt må du ha en nettsidemal på nettstedet og innholdet som skal gå på nettstedet ditt. Selv om du kanskje håper å få en HTML-matserver for restauranter, vil du oppdage at en premium-mal tilbyr flere funksjoner. Du kan starte med å se på vår samling av nettsider for restauranter for å finne den som passer for din virksomhet. I forbindelse med denne opplæringen bruker jeg Resta-malen. Denne malen har en enkel og ren design med en attraktiv glidebryter med full bredde. Det inkluderer også et arbeidsreservasjonsskjema, slik at du kan ta online reservasjoner.

Når det gjelder innhold, samler du alt du vil ha med kopien, for eksempel når restauranten åpnes for forretninger, hvilken type mat du tilbyr, menylister, ansatte bios, headshots og alt annet som er relevant for din restaurant.

Nå er det på tide å gjøre deg kjent med malen og tilpasse den til dine behov. La oss fortsette!

Slik redigerer du Restaurant-malens innhold

Når du har funnet en HTML5-restaurantmal du liker, kan du kjøpe den og deretter lagre den zippede mappen til datamaskinen. Unzip den til et sted som er lett tilgjengelig, for eksempel skrivebordet eller nedlastingsmappen din.

1. Forstå strukturen i Restaurant Template

Før du kan begynne å endre filene, er det en god ide å ha minst en oversiktlig forståelse av strukturen til malen. Husk at noen av mappene og filene kan være forskjellige fra det som vises nedenfor. I de fleste tilfeller finner du imidlertid en mappe som inneholder dokumentasjon for malene og en med den aktuelle malen.

I selve mappens mappe finner du vanligvis følgende undermapper og filer:

  • CSS.Denne mappen vil inneholde alle stilarkene som styrer skrifter, farger, kolonner, marginer, paddings og andre visuelle stiler i mal.
  • JS.JavaScript-mappen inneholder JavaScript-filer som brukes til å validere skjemaer, kontrollere skyveknapper, ulike animasjoner og andre effekter.
  • HTML-filer. Du finner også flere HTML-filer som representerer sidene på restaurantens nettsidemal, for eksempel hjemmesiden, om, tjenester og så videre.
  • Bilder. I denne mappen finner du alle bakgrunnsbilder, samt andre plassholderbilder som brukes i malen.

Du kan også finne følgende filer og mapper som i Resta-malen:

  • Audio. Denne mappen inneholder lydfilen som spilles som bakgrunnsmusikk når noen lander på restaurantens nettside.
  • fonter.Fonts-mappen inneholder alle ikonfonter som brukes i hele malen.
  • Mail.php.Denne filen brukes til å konfigurere kontakt- og reservasjonsskjemaet.

Med struktur ute av veien, la oss begynne å endre malen.

2. Erstatt standardinformasjonen

Vi begynner med å redigere index.html-filen. Høyreklikk filen og velg Åpne i nettleseren. Dette åpner filen i standard nettleseren din og lar deg se hvilke deler som må endres.

Som du ser fra skjermbildet nedenfor, er det ganske mange ting å redigere, inkludert:

  • headerteksten i lysbildeserien
  • den om informasjonen
  • populære retterseksjonen
  • menylisteseksjon

For å gjøre det enklere å finne den informasjonen i malen, høyreklikker du på toppteksten og klikker Undersøke.

En rute vises nederst som viser HTML-koden som utgjør vår mal.

I det panelet vil du legge merke til at teksten vi valgte for å inspisere, er markert i blått på venstre side av inspeksjonspanelet. Hvis du ser til høyre, vil du legge merke til at litt annerledes kode vises, som styrer den visuelle stilen til teksten.

Som du ser fra skjermbildet, er overskriftsteksten vi valgte, mellom

koder, som representerer overskrifter i HTML.

Hvis du vil redigere malen, finner du kodene som inneholder innholdet du vil endre, finner dem i kodeditoren, og bytter det ut for informasjonen din..

Med den kunnskapen, gå tilbake til malmappen, høyreklikk på index.html og velg Åpne med Sublime Text eller kodeditoren du lastet ned tidligere.

Nå vil du finne den samme koden du så i inspeksjonspanelet i nettleseren din.

Rull ned til du finner den på linje 298. Deretter klikker du mellom

merker og legg til din egen velkomstmelding.

Deretter klikker du på linje 301 mellom

merker og erstatt den setningen med din egen.

På samme måte kan du fortsette å gjøre disse trinnene om og om igjen: Kontroller informasjonen du vil endre, identifiser merkene som inneholder den teksten, finn dem i kodeditoren din, og erstatt den med teksten.

For å endre logoen og andre bilder på nettstedet, ta et øyeblikk å se på bildene som brukes i img-mappen til malen. Endre navn på bildene dine ved å bruke disse navnene, velg alle plassholderbilder, slette dem og legg bildene dine i img-mappen.

Endelig, for å endre reservasjonsskjemaet, så kommer dine bestillinger til riktig adresse, gå til mappens mappe, høyreklikk mail.php fil og åpne den med kodeditoren din. På linjen med kode som har dummy-e-postadressen, klikker du mellom anførselstegn, markerer e-postadressen og erstatter den med din egen.

Slik tilpasser du utseende på malen

Når du har erstattet all informasjon, er det på tide å style malen til din smak. Tilbake i mappens mappe, høyreklikk på style.css fil og åpne den i kodeditoren din.

For å redigere CSS, følg de samme trinnene som brukes til å redigere HTML-koden. Høyreklikk elementet du vil stil og klikk inspisere, men denne gangen ser du koden på høyre side av fanen Inspector og finner deretter den samme koden i kodeditoren. Fanen Inspektør viser deg hvilken linje av CSS du må redigere.

For eksempel, la oss endre toppteksten til en kronefarge ved å skrive inn en HEX-kode slik:

farge: # 65b5c1;

La oss også endre avsnittet til en mørkere farge slik:

color: # 222222;

Slik laster du opp filer til serveren

Nå som du har tilpasset malen, er alt som er igjen å gjøre, å laste opp filene dine til hosting-serveren. Innloggingsdetaljene skal ha blitt sendt til deg av verten, så se etter den e-posten og noter ned servernavnet, brukernavnet ditt og passordet.

Start ditt FTP-program. Skriv inn informasjonen fra verten din i de aktuelle feltene, og klikk deretter på Koble.

På venstre side av skjermen kan du finne mappen som inneholder malfiler på datamaskinen. Klikk for å utvide den. Velg alle filene og mappene, dra dem over til høyre side av skjermen, og slipp dem inn i public_html mappe.

Vent til filene skal lastes opp, åpne deretter nettleseren din og skriv inn domenenavnet ditt. Gratulerer, nettstedet ditt er nå live!

5 tips for å gjøre restauranten din nettside fantastisk

Når nettstedet ditt er live, er det noen få ekstra tweaks som du kan gjøre for å gjøre et godt førsteinntrykk på publikum.

  1. Legg til nettstedet ditt til dine sosiale medier. Nå som du har en restaurantwebside, er det på tide å oppdatere bio- og nettsidenavsnittet på alle dine sosiale medier. La dine følgere få vite at de kan sjekke ut din meny online, samt foreta en reservasjon. Del restaurantens skjermbilde og oppmuntre dem til å bestille ved å tilby dem en rabattkode eller en kampanjekupong.

  2. Inkluder vurderinger fra tidligere kunder.Dine tidligere kunder vet sikkert hvor god måltidene dine er og den gode atmosfæren din restaurant gir. Vis frem sine anbefalinger og vurderinger på restaurantens nettside. Dette vil bidra til å oppmuntre nye besøkende til å komme og sjekke ut.

  3. Liste din restaurant med Google Business. Hvis du viser din restaurant med Google Business, blir nettstedet ditt mer sannsynlig å vises i søkeresultatene, og hvis du inkluderer nettstedet ditt, vil det tillate søkere å koble deg direkte.

  4. Komprim dine bilder. Gode ​​bilder er et must for en restaurant, men sørg for at du komprimerer størrelsen på bildene dine. Dette vil gjøre nettstedet ditt raskere å laste og forbedre den besøkende brukeropplevelse.

  5. Legg inn et Google Map. Hvis du legger til et Google-kart på restaurantens nettside, blir det lettere for potensielle kunder å finne deg og få veibeskrivelser mens de er på farten.

Lær mer om Restaurant Nettsteder

I denne opplæringen har vi undersøkt hvordan man lager et nettsted for en restaurant. For å lære mer om restaurantwebsteder, gå gjennom en av veiledningene nedenfor:

Start Restaurantens nettsted med en HTML-mal

Takket være en rekke HTML5-maler for restaurantwebsteder trenger du ikke å bryte banken for å skape et vakkert sted for din restaurant. Nå som vi har vist deg hvordan du lager et nettsted for en restaurant, er du klar til å gå. Se gjennom vår restaurantmalsamling og bruk vår guide for å lansere restaurantens nettside i dag.