TD : Créer un Site de Restaurant avec WordPress et Elementor
TD – Créer un site vitrine de restaurant 🍝
Objectif : Installer un thème, personnaliser avec Elementor, enrichir avec des plugins
🧱 1. Préparer votre site
Étapes :
- Lancez votre site WordPress local (
http://localhost/nom-du-site). - Connectez-vous à l’administration (
/wp-admin). - Supprimez les contenus inutiles par défaut (article, page exemple).
- Dans Réglages > Permaliens, choisissez Nom de l’article.
🎨 2. Choisir et installer un thème
Recommandation : thème léger et compatible Elementor
Exemples :
- Hello Elementor (officiel, minimal)
- Astra
- OceanWP
Installation :
- Allez dans Apparence > Thèmes > Ajouter.
- Recherchez un thème compatible.
- Cliquez sur Installer, puis Activer.
🔌 3. Installer et activer Elementor
- Allez dans Extensions > Ajouter.
- Cherchez Elementor Website Builder.
- Cliquez sur Installer, puis Activer.
- Un nouveau bouton “Modifier avec Elementor” apparaîtra dans vos pages.
🏗️ 4. Créer la page d’accueil
- Allez dans Pages > Ajouter.
- Nommez-la Accueil.
- Cliquez sur Publier, puis Modifier avec Elementor.
- Dans l’éditeur Elementor :
- Ajoutez une bannière avec le nom du restaurant.
- Créez une section “À propos” avec texte + image.
- Intégrez une galerie (via widget image ou plugin).
- Ajoutez une section contact ou un bouton Réserver.
- Enregistrez votre travail (bouton Mettre à jour).
Définir cette page comme page d’accueil :
- Allez dans Réglages > Lecture.
- Sélectionnez “Une page statique” > Choisissez “Accueil”.
➕ 5. Ajouter 2 plugins utiles au choix
Voici quelques idées :
| Besoin | Plugin |
|---|---|
| Formulaire de contact | WPForms ou Contact Form 7 |
| Horaires d’ouverture | Opening Hours |
| Carte de localisation | WP Google Maps |
| Menu du restaurant | Restaurant Menu by MotoPress |
| Galerie améliorée | Envira Gallery |
| SEO de base | Yoast SEO |
| Cookies RGPD | Complianz |
Installation :
- Allez dans Extensions > Ajouter.
- Recherchez un plugin par son nom.
- Cliquez sur Installer, puis Activer.
- Intégrez-le dans une page via un shortcode ou widget Elementor.
✅ Objectif à atteindre en fin de TD
- Un site fonctionnel avec une page d’accueil moderne faite avec Elementor.
- Un thème installé et activé.
- Deux plugins utiles ajoutés et visibles sur le site.
- Structure claire et responsive (ajustable sur mobile/tablette).
🧘♂️ Bonus pour les rapides
- Testez d’autres widgets Elementor.
- Ajoutez une page “Contact” ou “Galerie”.
- Essayez Elementor avec un template préconstruit.
Quand vous avez fini, vous pouvez chiller ou expérimenter davantage ✨