Choisir un bon thème WordPress pour son restaurant

Choisir un bon thème WordPress pour son restaurant

Vous venez ou vous allez ouvrir votre restaurant ? Avez-vous penser à créer un site web pour mettre en avant vos menus, des images d’intérieur de votre restaurant pour le valoriser ?

Alors pour vous j’ai passé en revu quelques thèmes WordPress gratuits afin que vous puissiez valoriser et mettre en valeur votre établisssement sur internet. Il est indispensable aujourd’hui d’avoir votre propre site afin de gagner en visibilité. Grâce à un site internet qui vous ressemble vous pourrez mettre en avant l’intérieur de votre établissement avec de belles images, mettre en avant l’aspect chaleureux de votre restaurant. Proposer directement en ligne vos menus et ainsi pouvoir les mettre à jour régulièrement. Vous pourrez même proposer un service de réservation en ligne.

Voici donc une liste non exhaustive de plusieurs thèmes gratuits que j’ai passé en revu pour vous afin de vous aider dans votre choix.

 Notre premier thème : « Restaurant Recipe »

 

Nous allons commencer notre liste par le thème gratuit « Restaurant Recipe » d’Acme Themes.

Ce thème est idéal pour tous les établissements de types : restaurant, caféteria, cafés, boulangerie etc… mais également pour toutes entreprises d’hôtellerie.

Quels sont les avantages de ce thème ?

Tout d’abord c’est un thème polyvalent, comme je vous le disais dans l’introduction ce thème peut être adapté pour plusieurs sortes d’établissements comme la restauration, c’est ce qui nous intéresse ici, mais aussi pour tout établissement lié à l’hôtellerie. Vous pourrez également utiliser un constructeur de page comme par exemple « Page Builder, par SiteOrigin » puisque c’est celui qui est installé avec l’import de la démo. Le thème est compatible mobile et tablette ce qui est plutôt classique aujourd’hui.

Vous aurez également la possibilité d’avoir un slider ou carrousel pour mettre en avant vos services sur la page d’accueil. Ce thème également compatible avec WpLang pour la traduction.

Ce thème est plutôt complet dans l’ensemble et très facile d’installation puiqu’après avoir installé le thème pour aurez la possibilité d’installer une démo via l’extension : « Acme Demo Setup« . Cette démo vous mettra en place la plupart des différentes options et pages qui vous seront nécessaire pour votre site.

 

Pour télécharger "Restaurant Recipe"

Notre thème suivant s’appelle « LZ Restaurant » de Luzuk

 

Ce thème est également parfait pour des établissements comme la restauration et l’hôtellerie et est compatible mobile et tablette.

Quels sont ces avantages ?

Comme le premier thème que je vous ai présenté « LZ Restaurant » est un thème polyvalent puisqu’il peut s’adapter à toutes sortes d’entreprises de la restauration et de l’hôtellerie. Vous pourrez mettre en place un slider ou carrousel et avoir plusieurs sections pour mettre en avant vos differents services et ou atouts de votre entreprise. Il y a une section pour mettre en avant vos produits, une section testimonial c’est à dire pouvoir faire remonter les avis de vos clients, une section pour votre adresse, une section pour votre newsletter, une section « à propos », etc… Vous aurez également une page contact et vous pourrez aussi paramétrer vos différents réseaux sociaux.

Par rapport au thème précédent ce thème est un peu plus limité car de nombreuses options ne sont accessibles qu’avec la version payante du thème comme la personnalisation des couleurs et des images et la compatibilité avec un module pour la traduction.

Pour conclure ce thème est plus limité en terme d’options et de personnalisation mais il peut très bien faire l’affaire pour mettre en avant votre établissement. Le système de section en page d’accueil est très intéréssant.

 

Pour télécharger "LZ Restaurant"

Pour notre troisième thème gratuit je vais vous présenter un thème qui se nomme « Brasserie » de Template Express.

 

C’est un thème plutôt élégant dans son design et qui ira très bien pour des établissements rafinés, voir comme son nom l’indique pour des brasseries.

Quels sont ces avantages ?

Comme beaucoup de thèmes aujourd’hui ce thème est compatible mobile et tablette. Vous pourrez mettre en avant votre numéro de téléphone, adresse mail et vos différents réseaux sociaux directement tout en haut de la page d’accueil. Vous pourrez mettre un slider ainsi que différentes sections sur votre page d’accueil. Ce qui m’a plu avec ce thème c’est qu’il est fourni avec des extensions qui vous permettrons d’avoir une page pour vos menus et ainsi pouvoir les personnaliser, d’une extension pour les réservations qui se présentera sous forme d’onglet et qui est ajouté à WordPress.  Vous pourrez donc y consulter les dernières réservations qui ont été faites sur votre site. C’est un plus, et c’est plutôt pratique.

Ce thème est donc très design avec une belle police d’écriture ce qui est important aussi. Ses gros avantages sont les deux extensions qui sont fournies avec le thème. Une extensions pour la personnalisation de vos menus et une autre extension parfaite pour la gestion de vos reservations en ligne.

Pour télécharger "Brasserie"

Archives

Catégories

Choisir le bon thème WordPress pour son Constructeur de page.

Choisir le bon thème WordPress pour son Constructeur de page.

Il existe bon nombre de thèmes qui s’adaptent très bien avec les différents  constructeurs de page ou Page Builder qui existent sur le marché. Aujourd’hui je vais m’intéresser au constructeur de page Elementor. Parmi les thèmes plus connus on peut citer Astra, Hestia, OceanWP. Ils sont tous léger, fonctionnent à merveille avec Elementor, ils sont modernes et compatibles mobiles et tablettes. Vous avez le choix, c’est selon votre projet, à vous de choisir le bon thème.

Pour vous aider à faire ce choix je vais vous présenter différents thèmes,ils ont été choisi car ce sont les plus connus et les plus téléchargés et sont des très bon choix pour débuter avec WordPress.

Astra :

L’un des thèmes le plus téléchargé du moment : Astra, avec plus de 200 000 téléchargements à son compteur. Ce thème gratuit est très puissant, une fois installé  il va vous permettre de faire votre choix parmi une multitude de thèmes enfants. Des thèmes au choix dans des domaines divers et variés comme par exemple la restauration ou encore l’architecture, le paysagisme et la photographie.

Pour l’installer c’est simple il vous suffit d’aller dans l’administration de WordPress : Apparence/Thèmes/Ajouter, dans le moteur de recherche vous taper : Astra. Puis vous l’installez et vous l’activez. Deux nouveaux sous-menus apparaissent dans l’onglet Apparence : Options Astra et Astra Sites, c’est l’importateur de calques Astra Sites qui nous intéresse ici, il se peut que le plugin vous a déjà ouvert cette page.

Dès le début Astra vous demande de choisir parmi plusieurs constructeur de page, c’est Elementor qui nous allons choisir aujourd’hui. Vous allez ensuite pouvoir choisir différents modèles de sites classés par catégories (Blog, Business, eCommerce, gratuit,…). Vous n’avez plus qu’a choisir selon votre projet.

Une fois votre modèle choisi, Astra va installer les plugins nécéssaires et installer le modèle choisi. Pour le modèle « Restaurant Italien » que j’ai utilisé pour l’exemple Astra a installé 3 plugins dont Elementor, Ultimate Addons for Gutenberg et WPForms Lite.

Et en quelques minutes nous voilà avec un site complet sur le thème de la restauration italienne qui vient d’être installé sur notre WordPress. Astra c’est occupé de l’installation de toutes les page nécessaires selon votre modèle. Une page d’accueil, un Blog, une page contact et une page « A propos », il y a même un formulaire de contact de pré-installé sur la page « contact » avec le plugin « WPForms Lite« .

Hestia :

Nous allons maintenant parler d’un autre thème gratuit Hestia qui lui aussi est très simple d’utilisation puisqu’il vous suffira d’installer le thème Hestia dans WordPress et de suivre les premières recommandations comme l’ajout d’un plugin obligatoire.

Après son installation il faudra vous rendre dans la partie « Personnalisez » de WordPress pour commencer à créer votre page d’accueil.

D’autres plugins vous sont recommandés par Astra et qui vous seront surement nécessaire pour améliorer votre site. WPForms Lite pour la création d’un formulaire de contact ou WooCommerce si vous vous lancer dans la création d’une boutique en ligne.

Hestia vous propose dans la partie « Sections de page d’accueil » de pouvoir modifer les différentes sections qui vous sont proposées comme le titre de la page, les mises à l’avant de vos produits, une section présentation de l’équipe, recomandations et une section formulaire de contact.

Hestia est un simple thème qui sera suffisant pour la création de votre site vitrine ou e-commerce après l’ajout de WooCommerce. La différence avec Astra c’est qu’ici vous n’avez pas de modèles de site classés par thème pour vous aider surtout si vous n’avez pas trop d’imgination pour commencer.

 

OceanWP :

Un autre thème compatible avec Elementor. Très connu aujourd’hui avec ces 300 000 téléchargements Après son instalation OceanWP vous demandera d’installer deux plugins (Ocean Extra et Wp Forms) pour son bon focntionnement.

Vous pouvez commencer par cliquer sur le message de OceanWP qui se trouve sur le tableau de bord de WordPress qui vous insite à « lancer l’assistant de configuration », ce que je vous recommande. Passé l’intro vous pourrez alors choisir également parmi une sélection de modèles de sites classés par catégories. Attention cependant il vous sera également demandé d’installer d’autres plugins qui pourront être payant. Ou vous pouvez aussi passer à l’étape suivante si vous voulez créer par vous même vorte propre site vitrine.

OceanWP est un thème léger moderne et entièrement comaptible avec les mobiles et les tablettes accouplé avec Elementor vous allez pouvoir faire appelle à votre imagination pour la création de votre site web.

Archives

Catégories

Comment installer simplement WordPress

Comment installer simplement WordPress

Avant toute chose il faut savoir que pour installer WordPress vous devez vous poser la question à savoir si je veux l’installer en local ou directement en ligne sur un serveur que vous aurez préalablement acheté. Dans ce tuto nous allons voir directement l’installation en ligne depuis un serveur avec l’idée que vous avez déja acheté et choisi un nom de domaine. Pour une installation en local je vous conseille cet excenlent tuto : installer WordPress en local.

 

En 2019 créer un site internet est de plus en plus facile, il existe bon nombre de CMS (Content Management System) sur le marché pour vous iader dans cette démarche. WordPress est l’un d’entre eux avec plus de 60 % du marché. Même si cela reste assez simple à l’utilisation, il vaut mieux avoir un peut de connaissance avant de se lancer, c’est pour cela que le tuto qui va suivre va vous aider dans les différentes étapes à suivre pour une bonne installation de WordPress.

C’est parti.

Installer manuellement WordPress sur un serveur.

 

Nous partons donc dans l’idée que vous avez déja un nom de domaine et que vous avez également fait l’achat d’un hébergement avec base de données pour votre site.

L’installation de WordPress est plutôt rapide. La première étape consiste à télécharger la toute dernière version de WordPress : Télécharger WordPress.

Une fois téléchargé dézipper le dossier sur votre disque dur.

 

L’étape suivante consiste à déposer le dossier WordPress dézipper, à l’aide de la solution FTP FileZilla, à la racine du serveur souvent dans le dossier « www » ou « web », moi chez mon hébergeur c’est dans le dossier « public_html ».

Lancer ensuite votre navigatuer web préféré et ajouter cette url : /monsite.com/wp-admin/install.php (remplacer monsite.com par votre nom de domaine wink ), ou directement à l’adresse url de votre de nom de domaine (monsite.com).

Cliquer ensuite sur : « Installer WordPress ».

Ensuite ce message doit apparaître :

Cliquer ensuite sur le bouton « C’est parti ! ».

Vous arrivez ensuite sur une nouvelle page où le but va être de renseigner les différents champs comme ci-dessous :

Nom de la base de donnée : renseigner ici le nom que vous avez choisi pour votre base de données.

Identifiant : Indiquer ici le nom d’utilisateur de votre base de données que vous avez également choisi chez votre hébergeur.

Mot de passe : mot de passe de votre base de données.

Adresse de la base de données : comme indiquer laisser locahost sinon consulter la documentation de votre hébergeur.

Préfixe des tables : Comme indiquer modifier ce préfixe si vous avez l’intention d’installer plusieurs sites avec WordPress afin de les différencier. Mais par mesure de sécurité il vaut mieux le modifier même si il n’y a qu’un seul site WordPress d’installer, peu importe le préfixe que vous choisissez.

Une fois tous ces informations renseignées vous pouvez valider. Une nouvelle page s’ouvre, WordPress vous confirme que tout c’est bien passé.

Vous pouvez ensuite cliquer sur : « Lancer l’installation ».

Encore quelques étapes

Sur la page qui suit veuillez renseigner les différents champs comme indiqué ci-dessous :

Titre du site : renseigner ici le nom de votre site.

Identifiant : ici l’identifiant vous servira à vous connecter à votre gestionnaire de contenu.

Mot de passe : pour vous identifier à votre compte, je vous conseille d’utiliser le mot de passe qui vous est proposé tout simplement pour une question de sécurité plus votre mot de passe est compliqué mieux c’est !

Votre adresse de méssagerie : renseigner ici un mail, après cette étape WordPress vous envoie un email automatique contenant l’adresse du site, l’identifiant et l’adresse de connexion.

Visibilité pour les moteurs de recherche : coher cette case dans un premier temps car votre site n’est pas encore terminé. Une fois votre site terminé vous pourrez la décocher dans les réglages de WordPress.

Y’a plus qu’à cliquer sur « Se connecter », vous allez ensuite tomber sur la page de connexion à votre WordPress, renseigner votre identifiant et votre mot de passe que vous avez indiqué dans le formulaire d’installation.

Voilà vous avez accès maintenant à votre administration WordPress, comme je vous en ai parlé au début de ce tuto WordPress s’installe rapidement, en 5 minute comme le stipule WordPress lui même lors de l’installation.

Je vous donne rendez-vous pour un prochain tuto qui sera consacré à la mise en place de votre premier site web.

Archives

Catégories

Photopea un photoshop like en ligne.

Photopea un photoshop like en ligne.

Vous cherchez une alternative à Photoshop et tout aussi puissante, ne cherchez plus ! Photopea qui est un logiciel de retouche photo est ce qu’il vous faut, gratuit et en ligne.

 

Photoshop est un très bon logiciel mais il est coûteux et n’est donc pas accessible pour tous le monde. Photopea est une alternative à Photoshop, de plus il lui ressemble énormément. Ces avantages : il est gratuit et est directement disponible en ligne dans votre navigateur, pas besoin d’installation sur votre ordinateur. Vous pouvez l’utiliser n’importe où et depuis n’importe quel ordinateur, c’est son gros avantage. De plus il est fourni avec des templates prédéfinis dans des formats pour Facebook, Instragram, Youtube et Twitter, d’autres formats prédéfinis sont disponibles pour le print et le mobile.

 

Cet outil à tout pour vous plaire, il n’est pas aussi puissant que Photoshop mais il vous aidera à démarrer dans le monde de la retouche photo sans débourser un centime. Idéal pour le PME et les auto entrepreneurs qui n’ont pas forcément les moyens d’acheter une ou plusieurs licences Adobe.

 

Pour l’utiliser c’est très simple il vous suffit d’accéder à cette adresse : Photopea.com . Il vous est également possible de vous créer un compte via vos identifiants Facebook, Google ou Github.

Alors n’hésitez pas à l’utiliser pour toutes vos créations et dite moi ce que vous en pensez dans les commentaires.

Archives

Catégories

Comment créer une galerie avec le module Divi Gallery

Comment créer une galerie avec le module Divi Gallery

Les galeries d’images en pleine largeur semblent toujours être parfaite sur les sites web. Une galerie pleine largeur doit s’étendre sur toute la largeur de la fenêtre du navigateur. Utiliser tout l’espace d’une fenêtre de navigateur permet aux images de conserver une taille plus grande, ce qui est excellent pour l’expérience utilisateur. Et le disposition de la grille offre un design esthétique qui organise les images en colonnes qui s’ajusteront parfaitement à toutes les largeurs de navigateur.

Dans ce tutoriel, je vais vous montrer comment créer une galerie d’images pleine largeur avec le module Divi Gallery. Vous serez peut-être surpris de la facilité qu’on peut avoir avec Divi. Je vais également mentionner quelques façons d’utiliser l’espacement personnalisé pour vous donner plus de contrôle sur votre galerie pleine largeur sur mobile.

Commençons.

L’avant et l’après.

Voici le module Divi Gallery par défaut avec 12 images.

Voici un exemple de galerie d’images pleine largeur que vous pouvez facilement créer.

Préparer vos éléments de conception.

Pour ce tutoriel, vous aurez besoin du thème Divi installé et actif. Vous aurez également besoin de 12 images ajoutées à votre médiathèque pour pouvoir construire la galerie d’images. Pour un module de galerie Divi utilisant une disposition en grille, la taille de vos images doit être d’environ 1500 pixels sur 800 pixels si vous envisagez de l’ouvrir en mode lightbox, de manière à ce qu’il remplisse bien l’écran de la plupart des ordinateurs de bureau.

Pour ce tutoriel, j’utiliserai des images de la mise en page prédéfinie de la page Restaurant Gallery, disponible gratuitement à partir de Divi Builder.

 

Implémentation du module Fullwidth Divi Gallery.

Mise en place d’une nouvelle page.

Pour commencer, créez une nouvelle page, donnez un titre à votre page et déployez Divi Builder. Sélectionnez l’option “Build from Scratch”, puis publiez votre page. Puis cliquez pour construire sur le front-end.

 

Création de la galerie d’images

Une fois Divi Builder déployé, créez une nouvelle section avec une ligne à une colonne et ajoutez un module Galerie Divi.

Divi remplira le module de la galerie avec des images de votre médiathèque dans une grille comme celle-ci :

Dans les paramètres du module de la galerie Divi, cliquez sur l’icône grise plus pour ajouter 12 images à la galerie.

Puis mettez à jour les paramètres du module Divi Gallery comme suit :


Nombre d’images : 12
Afficher le titre et la légende : NON
Montrer la pagination : NON

Création d’une mise en page pleine largeur pour la galerie d’images

Pour créer la mise en page pleine largeur de la galerie d’images, sauvegardons nos paramètres de galerie pour le moment et ouvrons les paramètres de ligne. Sous l’onglet Conception, mettez à jour les éléments suivants :

Rendre cette ligne pleine largeur : OUI
Largeur de gouttière : 1

C’est le moyen le plus simple d’obtenir une galerie d’images pleine largeur opérationnelle. Si vous choisissez «Rendre cette ligne pleine largeur» et que vous définissez la largeur de gouttière sur «1», la galerie couvrira toute la largeur de la section (sur toutes les tailles de navigateur) et réduira l’espacement entre les images.

Et la galerie continuera également à couvrir toute la largeur de la page sur mobile.

Personnalisation des options de superposition de survol d’image.

Pour compléter la conception de votre galerie d’images pleine largeur, nous vous conseillons de personnaliser les options de superposition de survol d’images intégrées aux paramètres du module Divi Gallery.

Vous pouvez modifier l’icône de zoom, la couleur de l’icône et la couleur de superposition. Pour ce faire, ouvrez les paramètres de la Galerie et mettez à jour les éléments suivants :

Couleur de l’icône de zoom : #ffffff
Survol de la couleur de recouvrement : # 333d48
Survolez l’icône : voir la capture d’écran

Voyons maintenant la conception finale.

Plus d’options d’espacement de la galerie d’images pleine largeur.

Création d’une disposition en largeur totale avec un espacement de largeur de gouttière.

Le moyen le plus simple de personnaliser l’espacement entre vos images dans le module Divi Gallery consiste à régler la largeur de la gouttière de la rangée parent. La largeur de gouttière fait référence à l’espacement entre les colonnes.

Avec tout élément Divi Row, les valeurs optionnelles pour la largeur de gouttière vont de 1 à 4.

1 représente une marge nulle entre les colonnes.
2 représente une marge droite de 3% entre les colonnes.
3 représente une marge droite de 5,5% entre les colonnes.
4 représente une marge droite de 8% entre les colonnes.

Puisque nous utilisons le module de galerie Divi, la largeur de gouttière fait également référence à l’espacement entre les éléments de la galerie.

Ainsi, l’ajout de largeur de gouttière à la rangée ajustera l’espacement des éléments / images de la galerie dans le module Galerie.

Utilisation de la largeur personnalisée pour un meilleur contrôle de l’espacement sur le mobile.

 

Si l’option «Rendre cette ligne pleine largeur» est définie sur OUI et que la largeur de la gouttière est égale ou supérieure à 2 (tout sauf 1), Divi ajustera automatiquement la largeur de la ligne pour fournir un espacement extérieur supplémentaire.

Cela est nécessaire car la largeur de la gouttière s’applique uniquement à l’espacement entre les colonnes / éléments de la galerie et non à la ligne elle-même. Toutefois, cela peut ajouter un espacement de marge supérieur à celui souhaité sur mobile. Par exemple, si vous avez l’option «Rendre cette ligne pleine largeur» active avec une largeur de 2 gouttières, la largeur réelle de votre ligne sera de 89% sur mobile (et non de 100%).

Par conséquent, si vous souhaitez que la ligne couvre 100% sur mobile, vous pouvez utiliser l’option Largeur personnalisée. En donnant à la ligne une largeur personnalisée de 100%, la largeur de la ligne restera 100% quelle que soit la valeur de la largeur de la gouttière.

Maintenant, vous pouvez simplement ajouter l’espacement extérieur de la ligne en utilisant un remplissage de ligne. Cela vous donnera plus de contrôle sur l’espacement extérieur sur le bureau, la tablette et le smartphone.

 

Voici un exemple de la façon dont cela fonctionnerait. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur personnalisée : 100%
Largeur de gouttière : 2

Notez qu’il n’y a pas de marge à droite ou à gauche de la galerie.

Ajoutez maintenant le remplissage personnalisé suivant à la ligne :

Rembourrage personnalisé (bureau): 5% en haut, 5% en bas, 5% à gauche, 5% à droite.
Rembourrage personnalisé (smartphone) 5% en haut, 5% en bas, 0% à gauche, 0% à droite.

Les 5% de remplissage sur le bureau (et la tablette) fourniront l’espacement extérieur nécessaire pour faire correspondre l’espace entre les éléments de la galerie.

Et en supprimant les rembourrages personnalisés à droite et à gauche du smartphone, les images couvrent toute la largeur du navigateur, ce qui leur donne plus de visibilité.

Ajout d’espacement personnalisé aux éléments de la galerie sans largeur de gouttière.

 

Si vous souhaitez maîtriser davantage l’espacement de votre module Divi Gallery, vous pouvez en fait ajouter votre propre espacement personnalisé entre les éléments de la galerie au lieu d’utiliser Largeur de gouttière.

Pour ce faire, vous devez définir la largeur de gouttière sur 1, puis ajouter un espacement entre les éléments de votre galerie dans les paramètres du module Galerie de Divi.

Pour plus d’informations, consultez le didacticiel complet sur l’utilisation du module Divi Gallery pour créer une galerie d’images avec un espacement personnalisé.

Dernières pensées

 

Espérons que ce tutoriel vous aidera à comprendre comment utiliser le module Divi Gallery pour créer de superbes galeries d’images en pleine largeur sur votre prochain projet. Et n’oubliez pas d’explorer toutes les options de conception intégrées de Divi et les effets de survol pour que vos galeries d’images se démarquent encore plus.

À bientôt.

Traduit du tuto d’Elegant Theme (voir le tuto d’origine)

Archives

Catégories