Share
Das Erstellen einer Website für Ihr Restaurant ist entscheidend, wenn Sie neue Kunden gewinnen möchten. Glücklicherweise ist es heutzutage einfacher als je zuvor, die Websites von Restaurants schnell zum Laufen zu bringen. Dank zahlreicher HTML-Vorlagen für Restaurants müssen Sie sich weder mit einem Designer beschäftigen noch lernen, wie Sie eine Restaurant-Website von Grund auf erstellen.
Eine HTML-Vorlage lässt sich leicht ändern und auf einen Hosting-Server hochladen. Ein weiterer Vorteil einer HTML-Vorlage ist die Tatsache, dass weniger komplexer Code verwendet wird. Dadurch werden Websites mit HTML-Vorlagen schneller geladen als Websites, die mit einem CMS wie WordPress erstellt wurden.
Wenn Sie sich gefragt haben, wie Sie eine Website für ein Restaurant erstellen können, ist dieser Beitrag für Sie. Wir zeigen Ihnen, was Sie benötigen, um zu beginnen, wie Sie eine HTML5-Restaurantvorlage verwenden, anpassen und schließlich auf Ihren Hosting-Server hochladen, um zu zeigen, was Ihr Restaurant zu bieten hat.
Der erste Schritt beim Erstellen Ihrer Restaurant-Website ist das Sammeln aller Tools und Ressourcen, die Sie benötigen. Dazu gehören ein Domain-Name, ein Hosting-Unternehmen, ein FTP-Programm, der Inhalt Ihrer Website und eine Restaurantvorlage. Lassen Sie uns die unten aufgeführten näher betrachten.
Ein Domainname ist, wie Ihre Kunden Sie online finden. Die naheliegendste Wahl ist, den Namen Ihres Restaurants als Domain-Namen mit der Erweiterung .COM zu verwenden. Die besten Domain-Namen werden jedoch häufig bereits beansprucht, seien Sie also nicht überrascht, wenn Ihr gewünschter Domain-Name verwendet wird.
Wenn dies der Fall ist, können Sie versuchen, den Domaininhaber zu kontaktieren und nach der Möglichkeit zu fragen, den Domainnamen von ihm zu kaufen. Eine andere Möglichkeit besteht darin, mit einer anderen Erweiterung zu experimentieren oder die Wörter Restaurant oder den Namen Ihrer Stadt hinzuzufügen.
Neben dem Domänennamen benötigen Sie auch einen Hosting-Server, auf dem alle Dateien der Restaurant-Website gespeichert werden. Es ist erwähnenswert, dass Sie einen Domainnamen gleichzeitig mit dem Kauf eines Hostingplans erwerben können. In der Tat bieten die meisten Hosting-Unternehmen eine kostenlose Domain als Anreiz an, sich für ihren Hosting-Plan anzumelden.
Bevor Sie sich für ein Hosting-Unternehmen entscheiden, sollten Sie Ihre Due Diligence-Prüfung sorgfältig durchführen und die Bewertungen von Drittanbietern auf unabhängigen Restaurant-Websites lesen. Dadurch erhalten Sie ein genaueres Bild von der Qualität des Gastgebers und der Kundenzufriedenheit.
Die nächste Aufgabe in Ihrer Liste ist das Herunterladen eines FTP-Clients, damit Sie die Dateien Ihrer Vorlage von Ihrem Computer auf Ihren Server übertragen können. Abhängig von Ihrem Betriebssystem finden Sie zahlreiche FTP-Programme für Windows, Mac und Linux. Sie können FileZilla auch in Betracht ziehen, da es sich um einen plattformübergreifenden Client handelt, der kostenlos heruntergeladen und verwendet werden kann.
Sie benötigen einen Code-Editor, um die Dateien für Ihre Vorlage zu bearbeiten. Ein Code-Editor ähnelt einem Text-Editor wie Notepad, verwendet jedoch zur besseren Übersicht Syntax-Hervorhebung.
Ich bevorzuge Sublime Text, der auf Mac, Windows und Linux verwendet werden kann - eine kostenlose Testversion ist ebenfalls verfügbar - aber jeder Code-Editor reicht aus.
Schließlich benötigen Sie eine Restaurant-Website-Vorlage und den Inhalt, der auf Ihrer Website verfügbar sein wird. Obwohl Sie hoffen, eine HTML-Vorlage für Restaurants kostenlos zu erhalten, werden Sie feststellen, dass eine Premium-Vorlage mehr Funktionen bietet. Sie können durch einen Blick auf unsere Sammlung von Website-Vorlagen für Restaurants schauen, um die richtige für Ihr Unternehmen zu finden. In diesem Tutorial verwende ich die Vorlage "Resta". Diese Vorlage hat ein einfaches und klares Design mit einem attraktiven Schieberegler in voller Breite. Es enthält auch ein Reservierungsformular für die Arbeit, sodass Sie Online-Reservierungen vornehmen können.
Wenn es um den Inhalt geht, sammeln Sie alle gewünschten Kopien, z. B. wann Ihr Restaurant eröffnet wurde, welche Art von Küche Sie anbieten, Ihre Menülisten, das Personal-BIOS, Kopfschüsse und alles andere, was für Ihr Restaurant relevant ist.
Nun ist es an der Zeit, sich mit der Vorlage vertraut zu machen und sie an Ihre Bedürfnisse anzupassen. Lass uns weitermachen!
Wenn Sie eine HTML5-Restaurantvorlage gefunden haben, die Ihnen gefällt, kaufen Sie sie und speichern Sie den gezippten Ordner auf Ihrem Computer. Entpacken Sie es an einem leicht zugänglichen Ort wie Ihrem Desktop oder Ihrem Download-Ordner.
Bevor Sie mit dem Bearbeiten der Dateien beginnen können, ist es ratsam, die Struktur der Vorlage zumindest fließend zu verstehen. Beachten Sie, dass sich einige Ordner und Dateien von den unten gezeigten unterscheiden können. In den meisten Fällen finden Sie jedoch einen Ordner, der die Dokumentation der Vorlage und einen Ordner mit der eigentlichen Vorlage enthält.
Im eigentlichen Ordner der Vorlage finden Sie normalerweise die folgenden Unterordner und Dateien:
Möglicherweise finden Sie auch die folgenden Dateien und Ordner wie in der Resta-Vorlage:
Lassen Sie uns mit der Struktur aus dem Weg gehen, um die Vorlage zu ändern.
Wir beginnen mit der Bearbeitung der Datei index.html. Klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie Im Browser öffnen. Dadurch wird die Datei in Ihrem Standardbrowser geöffnet und Sie können sehen, welche Teile geändert werden müssen.
Wie Sie dem folgenden Screenshot entnehmen können, gibt es einige Dinge zu bearbeiten, darunter:
Um das Auffinden dieser Informationen in Ihrer Vorlage zu erleichtern, klicken Sie mit der rechten Maustaste auf den Kopfzeilentext und klicken Sie auf Prüfen.
Am unteren Rand wird ein Fenster mit dem HTML-Code angezeigt, aus dem unsere Vorlage besteht.
In diesem Fenster werden Sie bemerken, dass die Textzeile, die wir zur Prüfung ausgewählt haben, auf der linken Seite des Inspektorfelds blau markiert ist. Wenn Sie nach rechts schauen, werden Sie feststellen, dass etwas anderer Code angezeigt wird, der den visuellen Stil dieser Textzeile steuert.
Wie Sie dem Screenshot entnehmen können, befindet sich der von uns ausgewählte Kopfzeilentext zwischen
Suchen Sie zum Bearbeiten der Vorlage die Tags, die den zu ändernden Inhalt enthalten, suchen Sie sie im Code-Editor und tauschen Sie sie gegen Ihre Informationen aus.
Gehen Sie mit diesem Wissen zum Vorlagenordner zurück und klicken Sie mit der rechten Maustaste auf index.html und wählen Sie Mit überhöhtem Text öffnen oder den Code-Editor, den Sie zuvor heruntergeladen haben.
Nun möchten Sie den gleichen Code finden, den Sie im Inspektorfenster Ihres Browsers gesehen haben.
Scrollen Sie nach unten, bis Sie es in Zeile 298 finden. Klicken Sie dann zwischen das Symbol
Klicken Sie dann in Zeile 301 dazwischen
Auf ähnliche Weise können Sie diese Schritte immer wieder wiederholen: Überprüfen Sie die zu ändernden Informationen, identifizieren Sie die Tags, die diesen Text enthalten, suchen Sie sie in Ihrem Code-Editor und ersetzen Sie sie durch Ihren Text.
Um das Logo und andere Bilder auf der Website zu ändern, schauen Sie sich die Namen der Bilder an, die im Ordner img Ihrer Vorlage verwendet werden. Benennen Sie Ihre Bilder anschließend um, verwenden Sie diese Namen, wählen Sie alle Platzhalterbilder aus, löschen Sie sie und platzieren Sie die Bilder im Ordner img.
Um das Reservierungsformular so zu ändern, dass Ihre Reservierungen an die richtige Adresse gelangen, klicken Sie mit der rechten Maustaste in den Ordner Ihrer Vorlage mail.php Datei und öffnen Sie es mit Ihrem Code-Editor. Klicken Sie in der Codezeile mit der Dummy-E-Mail-Adresse zwischen Anführungszeichen, markieren Sie die E-Mail-Adresse und ersetzen Sie sie durch Ihre eigene.
Wenn Sie alle Informationen ausgetauscht haben, können Sie die Vorlage nach Ihren Wünschen gestalten. Zurück im Ordner Ihrer Vorlage klicken Sie mit der rechten Maustaste auf die style.css Datei und öffnen Sie es in Ihrem Code-Editor.
Führen Sie zum Bearbeiten des CSS die gleichen Schritte aus, die zum Bearbeiten des HTML-Codes verwendet wurden. Klicken Sie mit der rechten Maustaste auf das Element, das Sie formatieren möchten, und klicken Sie auf inspect. Diesmal suchen Sie den Code auf der rechten Seite der Registerkarte "Informationen" und suchen Sie dann denselben Code im Code-Editor. Auf der Registerkarte "Informationen" wird angezeigt, welche CSS-Zeile bearbeitet werden muss.
Lassen Sie uns zum Beispiel die Überschrift in eine Farbe ändern, indem Sie einen HEX-Code eingeben:
Farbe: # 65b5c1;
Lassen Sie uns auch den Absatztext dunkler machen:
Farbe: # 222222;
Nachdem Sie die Vorlage angepasst haben, müssen Sie nur noch Ihre Dateien auf den Hosting-Server hochladen. Die Anmeldedaten sollten von Ihrem Host per E-Mail an Sie gesendet worden sein. Suchen Sie dann nach dieser E-Mail und notieren Sie den Servernamen, Ihren Benutzernamen und das Kennwort.
Starten Sie Ihr FTP-Programm. Geben Sie die von Ihrem Host bereitgestellten Informationen in die entsprechenden Felder ein und klicken Sie auf Verbinden.
Auf der linken Seite des Bildschirms können Sie den Ordner finden, der die Vorlagendateien auf Ihrem Computer enthält. Klicken Sie, um es zu erweitern. Wählen Sie alle Dateien und Ordner aus, ziehen Sie sie auf die rechte Seite des Bildschirms und legen Sie sie in dem Ordner ab public_html Mappe.
Warten Sie, bis die Dateien hochgeladen sind. Öffnen Sie dann Ihren Browser und geben Sie Ihren Domainnamen ein. Herzlichen Glückwunsch, Ihre Website ist jetzt live!
Sobald Ihre Website live ist, können Sie einige weitere Verbesserungen vornehmen, um einen guten ersten Eindruck bei Ihrem Publikum zu erzielen.
Fügen Sie Ihre Site zu Ihren Social Media-Profilen hinzu. Jetzt, da Sie eine Restaurant-Website haben, ist es an der Zeit, den Bio- und Website-Bereich in allen Ihren Social-Media-Profilen zu aktualisieren. Teilen Sie Ihren Followern mit, dass sie Ihr Menü online abrufen und reservieren können. Teilen Sie den Screenshot der Restaurant-Website und fordern Sie sie zur Buchung auf, indem Sie ihnen einen Rabattcode oder einen Promo-Gutschein anbieten.
Fügen Sie Bewertungen von früheren Kunden ein.Ihre früheren Kunden wissen wahrscheinlich, wie gut Ihre Speisen sind und welche Atmosphäre Ihr Restaurant bietet. Präsentieren Sie ihre Erfahrungsberichte und Bewertungen auf Ihrer Restaurant-Website. Dies wird neue Besucher dazu anregen, Sie zu überprüfen.
Listen Sie Ihr Restaurant bei Google Business auf. Durch die Auflistung Ihres Restaurants bei Google Business wird Ihre Restaurant-Website mit größerer Wahrscheinlichkeit in den Suchergebnissen angezeigt. Wenn Sie Ihre Website einschließen, können Suchende direkt mit Ihnen Kontakt aufnehmen.
Komprimieren Sie Ihre Bilder. Tolle Fotos sind ein Muss für ein Restaurant, aber komprimieren Sie die Größe Ihrer Bilder. Dadurch wird das Laden Ihrer Website beschleunigt und die Benutzererfahrung des Besuchers verbessert.
Betten Sie eine Google Map ein. Durch das Hinzufügen einer Google Map zu Ihrer Restaurantwebsite können potenzielle Kunden Sie und Ihre Wegbeschreibung unterwegs leichter finden.
In diesem Tutorial haben wir untersucht, wie man eine Website für ein Restaurant erstellt. Um mehr über Restaurant-Websites zu erfahren, lesen Sie eines der folgenden Tutorials:
Dank einer Vielzahl von HTML5-Vorlagen für Restaurant-Websites müssen Sie die Bank nicht brechen, um eine schöne Website für Ihr Restaurant zu erstellen. Nun, da wir Ihnen gezeigt haben, wie Sie eine Website für ein Restaurant erstellen, können Sie loslegen. Stöbern Sie in unserer Restaurantvorlagensammlung und verwenden Sie unseren Leitfaden, um Ihre Restaurantwebsite heute zu starten.
Accentsconagua