Share
Créer un site Web pour votre restaurant est essentiel si vous voulez attirer de nouveaux clients. Heureusement, de nos jours, il est plus facile que jamais de créer rapidement des sites Web de restaurants. Grâce aux nombreux modèles HTML pour les restaurants, vous n'avez pas besoin de passer du temps à la recherche d'un designer ni à apprendre à créer des sites Web de restaurants à partir de zéro..
Un modèle HTML est facile à modifier et à télécharger sur un serveur d'hébergement. Un autre avantage d'un modèle HTML est le fait qu'il utilise un code moins complexe, ce qui permet aux sites Web de restaurant construits avec des modèles HTML de charger plus rapidement que ceux créés sur un CMS tel que WordPress..
Si vous vous demandez comment créer un site Web pour un restaurant, cet article est pour vous. Nous vous montrerons ce dont vous avez besoin pour commencer, comment utiliser un modèle de restaurant HTML5, le personnaliser et enfin comment le télécharger sur votre serveur d'hébergement afin que vous puissiez présenter ce que votre restaurant a à vous offrir..
La première étape dans la création du site Web de votre restaurant consiste à rassembler tous les outils et ressources dont vous avez besoin. Cela inclut un nom de domaine, une société d’hébergement, un programme FTP, le contenu qui sera placé sur votre site et un modèle de restaurant. Regardons de plus près chacun de ceux ci-dessous.
Un nom de domaine est la façon dont vos clients vous trouveront en ligne. Le choix le plus évident consiste à utiliser le nom de votre restaurant en tant que nom de domaine associé à une extension .COM. Cependant, les meilleurs noms de domaine sont souvent déjà revendiqués, alors ne soyez pas surpris si votre nom de domaine souhaité est pris.
Si tel est le cas, vous pouvez essayer de contacter le propriétaire du domaine et vous renseigner sur la possibilité de lui acheter le nom de domaine. Une autre option consiste à expérimenter avec une extension différente ou à ajouter les mots restaurant ou le nom de votre ville..
Outre le nom de domaine, vous aurez également besoin d'un serveur d'hébergement hébergeant tous les fichiers du site Web du restaurant. Il est à noter que vous pouvez acheter un nom de domaine en même temps que vous achetez un plan d'hébergement. En fait, la plupart des sociétés d’hébergement proposent un domaine gratuit afin de les inciter à s’inscrire à leur plan d’hébergement..
Avant de vous installer chez un hébergeur, assurez-vous de faire preuve de diligence raisonnable et lisez les avis de tiers publiés sur des sites de restaurants indépendants. Cela vous donnera une image plus précise de la qualité de l'hôte et de la satisfaction du client..
La tâche suivante de votre liste consiste à télécharger un client FTP afin que vous puissiez transférer les fichiers de votre modèle de votre ordinateur sur votre serveur. Selon votre système d'exploitation, vous trouverez de nombreux programmes FTP pour Windows, Mac et Linux. Vous pouvez également envisager FileZilla car il s’agit d’un client multiplate-forme gratuit à télécharger et à utiliser..
Vous aurez besoin d'un éditeur de code pour éditer les fichiers de votre modèle. Un éditeur de code est similaire à un éditeur de texte tel que le Bloc-notes, mais il utilise la coloration syntaxique pour une plus grande clarté..
Je préfère Sublime Text, qui peut être utilisé sur Mac, Windows et Linux - un essai gratuit est également disponible - mais tout éditeur de code suffit.
Enfin, vous aurez besoin d'un modèle de site Web de restaurant et du contenu qui sera placé sur votre site Web. Bien que vous souhaitiez obtenir un modèle HTML de restaurant gratuit, vous constaterez qu’un modèle premium offre davantage de fonctionnalités. Vous pouvez commencer par consulter notre collection de modèles de sites Web pour les restaurants afin de trouver celui qui convient à votre entreprise. Pour les besoins de ce tutoriel, je vais utiliser le modèle Resta. Ce modèle a un design simple et propre avec un curseur attrayant de pleine largeur. Il comprend également un formulaire de réservation opérationnel, vous permettant ainsi de faire des réservations en ligne..
En ce qui concerne le contenu, rassemblez toute la copie que vous souhaitez inclure, telle que l'ouverture de votre restaurant, le type de cuisine que vous proposez, vos listes de menus, la biographie de votre personnel, vos photos et tout ce qui concerne votre restaurant..
Maintenant, il est temps de vous familiariser avec le modèle et de le personnaliser selon vos besoins. Nous allons continuer!
Une fois que vous avez trouvé un modèle de restaurant HTML5 que vous aimez, achetez-le puis enregistrez le dossier compressé sur votre ordinateur. Décompressez-le dans un emplacement facilement accessible, tel que votre bureau ou votre dossier Téléchargements..
Avant de pouvoir modifier les fichiers, il est conseillé d’avoir au moins une compréhension sommaire de la structure du modèle. Gardez à l'esprit que certains dossiers et fichiers peuvent être différents de ceux présentés ci-dessous. Cependant, dans la plupart des cas, vous trouverez un dossier contenant la documentation du modèle et un autre contenant le modèle actuel..
Dans le dossier du modèle actuel, vous trouverez généralement les sous-dossiers et fichiers suivants:
Vous pouvez également trouver les fichiers et dossiers suivants, comme dans le modèle Resta:
Avec la structure à l'écart, commençons par modifier le modèle.
Nous allons commencer par éditer le fichier index.html. Cliquez avec le bouton droit sur le fichier et sélectionnez Ouvrir dans le navigateur. Cela ouvrira le fichier dans votre navigateur par défaut et vous permettra de voir quelles parties doivent être changées.
Comme vous pouvez le voir sur la capture d'écran ci-dessous, il y a pas mal de choses à éditer, notamment:
Pour faciliter la recherche de ces informations dans votre modèle, cliquez avec le bouton droit sur le texte de l'en-tête, puis cliquez sur Inspecter.
Un volet apparaît en bas et affiche le code HTML qui compose notre modèle..
Dans ce panneau, vous remarquerez que la ligne de texte que nous avons choisi d'inspecter est surlignée en bleu à gauche du panneau Inspecteur. Si vous regardez à droite, vous remarquerez que du code légèrement différent s'affiche, qui contrôle le style visuel de cette ligne de texte..
Comme vous pouvez le voir sur la capture d'écran, le texte de l'en-tête que nous avons sélectionné se situe entre
Pour modifier le modèle, localisez les balises contenant le contenu que vous souhaitez modifier, recherchez-les dans l'éditeur de code et échangez-les contre vos informations..
Sachant cela, retournez dans le dossier des modèles, cliquez avec le bouton droit de la souris sur index.html et sélectionnez Ouvrir avec du texte sublime ou l'éditeur de code que vous avez téléchargé précédemment.
Maintenant, vous voulez trouver le même code que vous avez vu dans le panneau Inspecteur de votre navigateur.
Faites défiler la liste jusqu'à la ligne 298. Ensuite, cliquez entre les deux
Ensuite, à la ligne 301, cliquez entre
De la même manière, vous pouvez continuer à répéter les étapes suivantes: inspectez les informations que vous souhaitez modifier, identifiez les balises contenant ce texte, retrouvez-les dans votre éditeur de code et remplacez-les par votre texte..
Pour changer le logo et d'autres images sur le site, prenez un moment pour regarder les noms d'images utilisés dans le dossier img de votre modèle. Renommez ensuite vos images en utilisant ces noms, sélectionnez toutes les images d’espace réservé, supprimez-les, puis placez-les dans le dossier img..
Enfin, pour modifier le formulaire de réservation afin que vos réservations arrivent à la bonne adresse, accédez au dossier de votre modèle, cliquez dessus avec le bouton droit de la souris. mail.php fichier et ouvrez-le avec votre éditeur de code. Sur la ligne de code contenant l’adresse électronique factice, cliquez entre guillemets, mettez l’adresse électronique en surbrillance et remplacez-la par la vôtre..
Une fois que vous avez remplacé toutes les informations, il est temps de personnaliser le modèle à votre guise. De retour dans le dossier de votre modèle, faites un clic droit sur le style.css fichier et ouvrez-le dans votre éditeur de code.
Pour éditer le CSS, suivez les mêmes étapes que pour éditer le HTML. Cliquez avec le bouton droit de la souris sur l'élément que vous souhaitez styler et cliquez sur Inspecter. Cette fois, recherchez le code situé à droite de l'onglet Inspecteur, puis recherchez le même code dans l'éditeur de code. L'onglet Inspecteur vous montrera quelle ligne de CSS vous devez éditer.
Par exemple, changeons l'en-tête en une couleur bleu sarcelle en entrant un code HEX comme suit:
couleur: # 65b5c1;
Changeons également le texte du paragraphe en une couleur plus foncée comme ceci:
couleur: # 222222;
Maintenant que vous avez personnalisé le modèle, il ne vous reste plus qu'à télécharger vos fichiers sur le serveur d'hébergement. Les informations de connexion doivent vous avoir été envoyées par votre hôte. Recherchez donc cet e-mail et notez le nom du serveur, votre nom d'utilisateur et votre mot de passe..
Lancez votre programme FTP. Entrez les informations fournies par votre hôte dans les champs appropriés, puis cliquez sur Relier.
La partie gauche de l'écran vous permettra de trouver le dossier contenant les fichiers de modèle sur votre ordinateur. Cliquez pour le développer. Sélectionnez tous les fichiers et dossiers, faites-les glisser sur le côté droit de l'écran et déposez-les dans le dossier. public_html dossier.
Attendez que les fichiers soient téléchargés, ouvrez votre navigateur et entrez votre nom de domaine. Félicitations, votre site est maintenant en ligne!
Une fois que votre site est en ligne, vous pouvez effectuer quelques modifications supplémentaires pour faire bonne impression sur votre public..
Ajouter votre site à vos profils de médias sociaux. Maintenant que vous avez un site Web de restaurant, il est temps de mettre à jour la section bio et le site Web de tous vos profils de médias sociaux. Informez vos abonnés qu'ils peuvent consulter votre menu en ligne et effectuer une réservation. Partagez la capture d'écran du site Web du restaurant et encouragez-les à réserver en leur proposant un code de réduction ou un bon de réduction..
Inclure les avis de clients précédents.Vos anciens clients savent probablement à quel point vos repas sont bons et l’atmosphère agréable qui règne dans votre restaurant. Présentez leurs témoignages et leurs avis sur le site Web de votre restaurant. Cela encouragera les nouveaux visiteurs à venir vous voir.
Listez votre restaurant avec Google Business. En répertoriant votre restaurant dans Google Business, votre site Web sera plus susceptible d'apparaître dans les résultats de recherche. Si vous incluez votre site Web, les internautes en ligne pourront se connecter directement avec vous.
Compressez vos images. Les bonnes photos sont un must pour un restaurant, mais assurez-vous de compresser la taille de vos images. Cela accélérera le chargement de votre site et améliorera l'expérience utilisateur du visiteur..
Intégrer une carte Google. L'ajout d'une carte Google Map sur le site Web de votre restaurant permettra aux clients potentiels de vous trouver plus facilement et d'obtenir des itinéraires lorsqu'ils sont en déplacement..
Dans ce tutoriel, nous avons expliqué comment créer un site Web pour un restaurant. Pour en savoir plus sur les sites Web de restaurants, consultez l’un des didacticiels ci-dessous:
Grâce à une variété de modèles HTML5 pour les sites Web de restaurants, vous n'avez pas besoin de casser votre tirelire pour créer un site magnifique pour votre restaurant. Maintenant que nous vous avons montré comment créer un site Web pour un restaurant, vous êtes prêt. Parcourez notre collection de modèles de restaurant et utilisez notre guide pour lancer votre site Web de restaurant aujourd'hui.
Accentsconagua