Share
Een website maken voor uw restaurant is cruciaal als u nieuwe klanten wilt aantrekken. Gelukkig is het nu gemakkelijker dan ooit om restaurantwebsites snel op te zetten. Dankzij de vele HTML-sjablonen voor restaurants hoeft u geen tijd te spenderen aan het zoeken naar een ontwerper en niet hoe u restaurantwebsites helemaal opnieuw kunt maken.
Een HTML-sjabloon is gemakkelijk te wijzigen en te uploaden naar een hostserver. Een ander voordeel van een HTML-sjabloon is het feit dat het minder complexe code gebruikt, waardoor restaurantwebsites die zijn gebouwd met HTML-sjablonen sneller kunnen worden geladen dan die zijn gebouwd op een CMS zoals WordPress.
Als je je hebt afgevraagd hoe je een website voor een restaurant kunt maken, is deze post iets voor jou. We laten u zien wat u nodig heeft om aan de slag te gaan, een HTML5-restaurantsjabloon te gebruiken, het aan te passen en tot slot hoe u het naar uw hostingserver kunt uploaden, zodat u kunt laten zien wat uw restaurant te bieden heeft.
De eerste stap bij het maken van uw restaurantwebsite is het verzamelen van alle tools en bronnen die u nodig hebt. Dit omvat een domeinnaam, een hostingbedrijf, een FTP-programma, de inhoud die op uw site wordt weergegeven en een restaurantsjabloon. Laten we elk van de onderstaande punten van naderbij bekijken.
Een domeinnaam is hoe uw klanten u online zullen vinden. De meest voor de hand liggende keuze is om de naam van uw restaurant te gebruiken als de domeinnaam gecombineerd met een .COM-extensie. De beste domeinnamen zijn echter vaak al geclaimd, dus wees niet verbaasd als uw gewenste domeinnaam wordt gebruikt.
Als dat het geval is, kunt u proberen contact op te nemen met de domeineigenaar en vragen te stellen over de mogelijkheid om de domeinnaam van hen te kopen. Een andere optie is om te experimenteren met een andere extensie of door de woorden restaurant of de naam van je stad toe te voegen.
Afgezien van de domeinnaam, hebt u ook een hostserver nodig die alle websitebestanden van het restaurant voor u kan bevatten. Vermeldenswaardig is dat u een domeinnaam kunt kopen op hetzelfde moment dat u een hostingplan koopt. In feite zullen de meeste hostingbedrijven een gratis domein aanbieden als een stimulans om in te schrijven voor hun hostingplan.
Voordat u zich bij een hostingbedrijf vestigt, moet u uw due diligence doen en beoordelingen van derden lezen op onafhankelijke restaurantsites. Dit geeft u een nauwkeuriger beeld van de kwaliteit en klanttevredenheid van de host.
De volgende taak in uw lijst is het downloaden van een FTP-client, zodat u de bestanden van uw sjabloon van uw computer naar uw server kunt overbrengen. Afhankelijk van uw besturingssysteem vindt u tal van FTP-programma's voor Windows, Mac en Linux. U kunt ook FileZilla overwegen, omdat het een platformonafhankelijke client is die gratis te downloaden en te gebruiken is.
U hebt een code-editor nodig om de bestanden voor uw sjabloon te bewerken. Een codebewerker lijkt op een teksteditor zoals Kladblok, maar gebruikt syntax highlighting voor meer duidelijkheid.
Ik geef de voorkeur aan Sublime Text, dat kan worden gebruikt op Mac, Windows en Linux - er is ook een gratis proefversie beschikbaar, maar elke code-editor is voldoende.
Ten slotte hebt u een restaurantwebsjabloon en de inhoud nodig die op uw website wordt weergegeven. Hoewel u wellicht een HTML-sjabloon voor een restaurant hoopt te krijgen, zult u merken dat een premiumsjabloon meer functies biedt. U kunt beginnen door te kijken naar onze verzameling websitesjablonen voor restaurants om de website te vinden die geschikt is voor uw bedrijf. Voor deze tutorial gebruik ik de Resta-sjabloon. Deze sjabloon heeft een eenvoudig en schoon ontwerp met een aantrekkelijke schuifregelaar over de volledige breedte. Het bevat ook een werkreserveringsformulier, zodat u online reserveringen kunt maken.
Als het gaat om de inhoud, verzamel dan alle kopieën die u wilt opnemen, zoals wanneer uw restaurant is geopend, welke soort gerechten u aanbiedt, uw menulijsten, personeelsbiografisch materiaal, headshots en al het andere dat relevant is voor uw restaurant.
Nu is het tijd om uzelf vertrouwd te maken met de sjabloon en deze aan uw behoeften aan te passen. Laten we doorgaan!
Zodra u een HTML5-restaurantsjabloon heeft gevonden die u bevalt, kunt u deze kopen en vervolgens de gezipte map op uw computer opslaan. Pak het uit op een locatie die eenvoudig toegankelijk is, zoals uw bureaublad of uw map Downloads.
Voordat u begint met het aanpassen van de bestanden, is het een goed idee om op zijn minst een vluchtig begrip te hebben van de structuur van de sjabloon. Houd er rekening mee dat sommige mappen en bestanden mogelijk verschillen van wat hieronder wordt weergegeven. In de meeste gevallen vindt u echter een map met de documentatie van de sjabloon en een map met de eigenlijke sjabloon.
In de map van de daadwerkelijke sjabloon vindt u meestal de volgende submappen en bestanden:
Je kunt ook de volgende bestanden en mappen vinden zoals in de Resta-sjabloon:
Laten we, met de structuur uit de weg, beginnen met het aanpassen van de sjabloon.
We beginnen met het bewerken van het bestand index.html. Klik met de rechtermuisknop op het bestand en selecteer Open in de browser. Hierdoor wordt het bestand geopend in uw standaardbrowser en kunt u zien welke onderdelen moeten worden gewijzigd.
Zoals je kunt zien in de onderstaande schermafbeelding, zijn er nogal wat dingen om te bewerken, waaronder:
Om het gemakkelijker te maken om die informatie in uw sjabloon te vinden, klikt u met de rechtermuisknop op de koptekst en klikt u op Inspecteren.
Onderaan wordt een venster weergegeven met de HTML-code waaruit onze sjabloon bestaat.
In dat deelvenster ziet u dat de regel tekst die we hebben geselecteerd om te inspecteren blauw is gemarkeerd aan de linkerkant van het deelvenster Inspecteur. Als u naar rechts kijkt, ziet u dat er iets andere code wordt weergegeven, die de visuele stijl van die tekstregel bepaalt.
Zoals u kunt zien op de schermafbeelding, bevindt de koptekst die we hebben geselecteerd zich tussen de
Om de sjabloon te bewerken, gaat u naar de tags die de inhoud bevatten die u wilt wijzigen, zoekt u naar de code-editor en ruilt u deze in voor uw info..
Ga met die kennis terug naar de sjabloonmap en klik met de rechtermuisknop op index.html en selecteer Open met Sublime-tekst of de code-editor die je eerder hebt gedownload.
U wilt nu dezelfde code vinden als in het infovenster van uw browser.
Blader naar beneden tot u het vindt op lijn 298. Klik vervolgens tussen de
Klik vervolgens op regel 301 tussenin
Op dezelfde manier kunt u deze stappen steeds weer opnieuw uitvoeren: inspecteer de informatie die u wilt wijzigen, identificeer de tags die die tekst bevatten, zoek ze op in uw code-editor en vervang deze door uw tekst.
Als u het logo en andere afbeeldingen op de site wilt wijzigen, neemt u even de tijd om naar de afbeeldingsnamen te kijken die in de img-map van uw sjabloon worden gebruikt. Hernoem dan uw afbeeldingen met die namen, selecteer alle tijdelijke afbeeldingen, verwijder ze en plaats uw afbeeldingen in de map img.
Tot slot, om het reserveringsformulier te wijzigen, zodat uw reserveringen op het juiste adres terechtkomen, gaat u naar de map van uw sjabloon en klikt u met de rechtermuisknop mail.php bestand en open het met uw code-editor. Op de coderegel met het dummy e-mailadres klikt u tussen aanhalingstekens, markeert u het e-mailadres en vervangt u het door uw eigen e-mailadres.
Nadat u alle informatie hebt vervangen, is het tijd om de sjabloon naar wens in te richten. Terug in de map van uw sjabloon, klik met de rechtermuisknop op de style.css bestand en open het in uw code-editor.
Om de CSS te bewerken, volgt u dezelfde stappen die worden gebruikt om de HTML te bewerken. Klik met de rechtermuisknop op het element dat u wilt opmaken en klik op inspecteren, maar kijk dit keer naar de code aan de rechterkant van het infovenster en zoek vervolgens dezelfde code op in de codebewerker. Op het tabblad Inspecteur ziet u welke regel CSS u moet bewerken.
Laten we bijvoorbeeld de kop wijzigen in een groenblauw kleur door een HEX-code in te voeren zoals:
kleur: # 65b5c1;
Laten we de alinea-tekst ook als volgt naar een donkerdere kleur wijzigen:
color: # 222222;
Nu u de sjabloon hebt aangepast, hoeft u alleen nog uw bestanden naar de hostserver te uploaden. De inloggegevens moeten door uw host naar u zijn gemaild, dus zoek naar die e-mail en noteer de servernaam, uw gebruikersnaam en wachtwoord.
Start uw FTP-programma. Voer de informatie in die door uw host wordt verstrekt in de daarvoor bestemde velden en klik vervolgens op Aansluiten.
Aan de linkerkant van het scherm kunt u de map vinden die de sjabloonbestanden op uw computer bevat. Klik om het uit te vouwen. Selecteer alle bestanden en mappen, sleep ze naar de rechterkant van het scherm en zet ze neer in de public_html map.
Wacht tot de bestanden zijn geüpload en open vervolgens je browser en voer je domeinnaam in. Gefeliciteerd, uw site is nu live!
Zodra uw site live is, zijn er enkele extra aanpassingen die u kunt doen om een geweldige eerste indruk op uw publiek te maken.
Voeg uw site toe aan uw sociale media-profielen. Nu je een restaurantwebsite hebt, is het tijd om de bio- en website-sectie bij te werken over al je sociale media-profielen. Laat uw volgers weten dat zij online uw menu kunnen bekijken en een reservering kunnen maken. Deel het screenshot van de restaurantwebsite en moedig hen aan om te boeken door hen een kortingscode of een kortingsbon aan te bieden.
Inclusief beoordelingen van eerdere klanten.Uw vroegere klanten weten waarschijnlijk hoe goed uw maaltijden zijn en hoe geweldig uw restaurant is. Breng hun testimonials en recensies onder de aandacht op de website van uw restaurant. Dit zal nieuwe bezoekers aanmoedigen om je te komen bekijken.
Geef uw restaurant een lijst met Google Business. Als u uw restaurant vermeldt bij Google Business, zal de website van uw restaurant waarschijnlijk vaker in de zoekresultaten worden weergegeven en als u uw website opneemt, kunnen zoekers rechtstreeks contact met u opnemen.
Comprimeer uw afbeeldingen. Geweldige foto's zijn een must voor een restaurant, maar zorg ervoor dat je de grootte van je afbeeldingen comprimeert. Hierdoor wordt uw site sneller geladen en verbetert de gebruikerservaring van de bezoeker.
Sluit een Google Map in. Als u een Google Map toevoegt aan uw restaurantwebsite, wordt het voor potentiële klanten gemakkelijker om u te vinden en een routebeschrijving te krijgen terwijl ze onderweg zijn.
In deze zelfstudie hebben we onderzocht hoe je een website kunt maken voor een restaurant. Lees een van de onderstaande tutorials voor meer informatie over restaurantwebsites:
Dankzij een verscheidenheid aan HTML5-sjablonen voor restaurantwebsites hoeft u de bank niet te verbreken om een prachtige site voor uw restaurant te maken. Nu we u hebben laten zien hoe u een website voor een restaurant kunt maken, bent u klaar om te gaan. Blader door onze restaurantsjablooncollectie en gebruik onze gids om vandaag uw restaurantwebsite te lanceren.
Accentsconagua