Hur man gör restaurangwebbplatser med HTML5-mallar

Att skapa en webbplats för din restaurang är avgörande om du vill locka nya kunder. Lyckligtvis är det numera lättare än någonsin att få restaurangwebbplatser igång snabbt. Tack vare många HTML-mallar till restauranger behöver du inte spendera tid på att leta efter en designer eller lära sig att skapa restaurangwebbplatser från början.

En HTML-mall är lätt att ändra och ladda upp till en värdserver. En annan fördel med en HTML-mall är att det använder mindre komplex kod, vilket gör restaurangwebbplatser byggda med HTML-mallar snabbare att ladda än de som byggs på ett CMS som WordPress.

Om du har undrat hur man gör en hemsida för en restaurang, är det här inlägget för dig. Vi visar dig vad du behöver komma igång, hur man använder en HTML5-restaurangmall, anpassar den och slutligen hur du laddar upp den till din värdserver så att du kan visa upp vad din restaurang har att erbjuda.

Verktyg och resurser Du behöver starta en restaurangwebbplats

Det första steget i att skapa din restaurangwebbplats är att samla alla verktyg och resurser du behöver. Detta inkluderar ett domännamn, webbhotell, ett FTP-program, innehållet som kommer att gå på din webbplats och en restaurangmall. Låt oss titta närmare på var och en av dem nedan.

1. Domännamn

Ett domännamn är hur dina kunder hittar dig online. Det mest uppenbara valet är att använda din restaurang namn som domännamnet parat med en .COM-förlängning. Men de bästa domännamnen är ofta redan hävdade, så bli inte förvånad om ditt önskade domännamn tas.

Om så är fallet kan du försöka kontakta domänägaren och fråga om möjligheten att köpa domännamnet från dem. Ett annat alternativ är att experimentera med en annan förlängning eller lägga till orden restaurang eller din stads namn.

2. Hosting Company

Bortsett från domännamnet behöver du också en värdserver som ska hysa alla restaurangwebbplatsfiler för dig. Det är värt att nämna att du kan köpa ett domännamn samtidigt som du köper en värdplan. Faktum är att de flesta värdföretag kommer att erbjuda en fri domän som ett incitament att anmäla sig till deras webbhotell.

Innan du bosätter sig på ett värdföretag, se till att du gör din due diligence och läsa recensioner från tredje part på oberoende restaurangplatser. Detta ger dig en mer exakt bild av värdens kvalitet och kundnöjdhet.

3. En FTP-klient

Nästa uppgift på din lista laddar ner en FTP-klient så att du kan överföra mallens filer från din dator till din server. Beroende på ditt operativsystem hittar du massor av FTP-program för Windows, Mac och Linux. Du kan också överväga FileZilla eftersom det är en plattformsklient som du kan ladda ner och använda.

4. En kodredigerare

Du behöver en kodredigerare för att redigera filerna för din mall. En kodredigerare liknar en textredigerare som Anteckningsblock, men den använder syntaxmarkering för större klarhet.  

Jag föredrar Sublime Text, som kan användas på Mac, Windows och Linux. Det finns också en gratis testversion, men någon kodredigerare kommer att räcka till.

5. En HTML-mall och innehåll

Slutligen behöver du en restaurangwebbplatsmall och innehållet som kommer att gå på din webbplats. Även om du kanske hoppas få en HTML-mall för restaurang gratis, hittar du att en premiummall erbjuder fler funktioner. Du kan börja med att titta på vår samling av webbplatskartor för restauranger för att hitta den som passar din verksamhet. I den här handledningen använder jag Resta-mallen. Denna mall har en enkel och ren design med en attraktiv fullbreddsklämma. Det innehåller också ett arbetsbokningsformulär, så du kan ta online bokningar.

När det gäller innehållet, samla alla kopior som du vill ha med, till exempel när din restaurang öppnas för företag, vilken typ av mat du erbjuder, dina menylistor, personalbios, headshot och allt annat som är relevant för din restaurang.

Nu är det dags att bekanta dig med mallen och anpassa den till dina behov. Låt oss fortsätta!

Så här redigerar du restaurangmallens innehåll

När du har hittat en HTML5-restaurangmall som du vill ha, köp den och spara sedan den zippade mappen till din dator. Unzippa den till en plats som är lättillgänglig, till exempel skrivbordet eller mappen Downloads.

1. Förstå strukturen i restaurangmallen

Innan du kan börja ändra filerna är det en bra idé att ha åtminstone en kortfattad förståelse av mallens struktur. Tänk på att några av mapparna och filerna kan skilja sig från vad som visas nedan. Men i de flesta fall hittar du en mapp som innehåller mallens dokumentation och en med den aktuella mallen.

Inne i den aktuella mallens mapp hittar du vanligtvis följande undermappar och filer:

  • CSS.Den här mappen innehåller alla stylesheets som styr typsnitt, färger, kolumner, marginaler, paddningar och andra visuella stilar i din mall.
  • JS.JavaScript-mappen innehåller JavaScript-filer som används för att validera formulär, styrning av reglage, olika animeringar och andra effekter.
  • HTML-filer. Du hittar också flera HTML-filer som representerar sidorna på din restaurangwebbplatskarta, t.ex. hemsidan, om, tjänster och så vidare.
  • Bilder. I den här mappen hittar du alla bakgrundsbilder samt andra platshållare bilder som används i mallen.

Du kan också hitta följande filer och mappar som i Resta-mallen:

  • Audio. Den här mappen innehåller ljudfilen som spelas som bakgrundsmusik när någon landar på din restaurangwebbplats.
  • typsnitt.I mappen Fonts finns alla ikonens teckensnitt som används i mallen.
  • mail.php.Den här filen används för att ställa in kontakt- och bokningsformuläret.

Med struktur ur vägen, låt oss börja ändra mallen.

2. Byt ut standardinformationen

Vi börjar med att redigera index.html-filen. Högerklicka på filen och välj Öppna i webbläsaren. Detta öppnar filen i din standardwebbläsare och låter dig se vilka delar som behöver ändras.

Som du ser från skärmdumpen nedan finns det en hel del saker att redigera, inklusive:

  • rubriktexten i bildspelet
  • om informationen
  • populär disken sektion
  • menyn lista avsnittet

För att göra det enklare att hitta den informationen i din mall, högerklickar du på rubriktexten och klickar på Inspektera.

En ruta visas längst ner som visar HTML-koden som utgör vår mall.

I den panelen märker du den textlinje som vi valt att inspektera är markerad i blått på vänster sida av inspektionspanelen. Om du ser till höger kommer du märka att något annorlunda kod visas, vilket styr den visuella stilen på den här texten.

Som du kan se från skärmdumpen är den rubriktext vi har valt mellan

taggar, som representerar rubriker i HTML.

Om du vill redigera mallen ska du hitta taggarna som innehåller innehållet du vill ändra, hitta dem i kodredigeraren och byta ut det för din information.

Med den kunskapen, gå tillbaka till mallmappen, högerklicka på index.html och välj Öppna med Sublim Text eller kodredigeraren du hämtade tidigare.

Nu vill du hitta samma kod som du såg i inspektionspanelen i din webbläsare.

Bläddra tills du hittar den på rad 298. Klicka sedan på mellan

taggar och lägg till ditt eget välkomstmeddelande.

Sedan, på rad 301, klicka mellan

taggar och ersätt den meningen med din egen.

På liknande sätt kan du fortsätta att göra dessa steg om och om igen: inspektera den information du vill ändra, identifiera de taggar som innehåller den texten, hitta dem i kodredigeraren och ersätt den med din text.

För att ändra logotypen och andra bilder på webbplatsen, ta en stund att titta på bildnamnen som används i mappen img i din mall. Därefter byta namn på dina bilder med de namnen, välj alla platshållare bilder, radera dem och lägg sedan dina bilder i img-mappen.

Slutligen, för att ändra bokningsformuläret så kommer dina bokningar till rätt adress, högerklicka på mappens mapp mail.php fil och öppna den med din kodredigerare. På koden av den kodade e-postadressen klickar du mellan citattecken, markerar e-postadressen och ersätter den med din egen.

Hur man anpassar din malls utseende

När du har ersatt all information är det dags att ställa in mallen efter eget tycke. Tillbaka i mappens mapp, högerklicka på style.css fil och öppna den i din kodredigerare.

För att redigera CSS, följ samma steg som används för att redigera HTML. Högerklicka på det element du vill stila och klicka på inspektera, men den här gången letar du efter koden på höger sida av fliken Inspektör och hittar sedan samma kod i kodredigeraren. Fliken Inspektör visar vilken linje av CSS du behöver redigera.

Till exempel, låt oss ändra huvudet till en tealfärg genom att ange en HEX-kod som så:

färg: # 65b5c1;

Låt oss också ändra stycktexten till en mörkare färg som så:

color: # 222222;

Så här laddar du upp dina filer till servern

Nu när du har anpassat mallen är allt som finns kvar att ladda upp dina filer till värdservern. Inloggningsuppgifterna borde ha skickats till dig av din värd så leta efter det mailet och notera serverns namn, ditt användarnamn och lösenordet..

Starta ditt FTP-program. Ange informationen från din värd i lämpliga fält och klicka sedan på Ansluta.

På vänster sida av skärmen kan du hitta den mapp som innehåller mallfilerna på din dator. Klicka för att expandera den. Välj alla filer och mappar, dra dem över till höger på skärmen och släpp dem i public_html mapp.

Vänta på att filerna ska laddas upp och öppna din webbläsare och ange ditt domännamn. Grattis, din webbplats är nu live!

5 tips för att göra din restaurang webbplats fantastisk

När din webbplats är live finns det några extra tweaks som du kan göra för att göra ett bra första intryck på din publik.

  1. Lägg till din webbplats till dina sociala medieprofiler. Nu när du har en restaurangwebbplats, är det dags att uppdatera bio och hemsidan på alla dina sociala medier. Låt dina anhängare veta att de kan kolla in din meny online och göra en bokning. Dela restaurangens skärmdump och uppmuntra dem att boka genom att erbjuda dem en rabattkod eller en kampanjkupong.

  2. Inkludera recensioner från tidigare kunder.Dina tidigare kunder vet förmodligen hur bra dina måltider är och den goda atmosfären din restaurang erbjuder. Visa sina testimonialer och recensioner på din restaurangwebbplats. Detta hjälper till att uppmuntra nya besökare att komma och kolla in dig.

  3. Lista din restaurang med Google Business. Om du listar din restaurang med Google Business kommer din restaurangwebbsida mer sannolikt att visas i sökresultaten, och om du inkluderar din webbplats kommer det att göra det möjligt för sökare att ansluta dig direkt.

  4. Komprimera dina bilder. Stora bilder är ett måste för en restaurang, men se till att du komprimerar storleken på dina bilder. Detta kommer att göra din webbplats snabbare att ladda och förbättra besökarens användarupplevelse.

  5. Bädda in en Google Map. Lägga till en Google Map på din restaurangwebbplats gör det lättare för potentiella kunder att hitta dig och få vägbeskrivningar medan de är på farten.

Läs mer om restaurangwebbplatser

I denna handledning har vi undersökt hur man gör en webbplats för en restaurang. För att lära dig mer om restaurangwebbplatser, granska en av handledningarna nedan:

Starta din restaurangwebbplats med en HTML-mall

Tack vare olika HTML5-mallar för restaurangwebbplatser behöver du inte bryta banken för att skapa en vacker plats för din restaurang. Nu när vi har visat dig hur man gör en webbplats för en restaurang är du redo att gå. Bläddra i vår restaurangmallsamling och använd vår guide för att starta din restaurangwebbplats idag.