- Ouvre ton navigateur et rends-toi à https://domaine.ch/wp-admin.
- Identifie-toi avec ton nom d’utilisateur et mot de passe.
Tu arrives sur le Tableau de bord (Dashboard) : à gauche, le menu principal (Pages, Médias, Apparence, Extensions, Réglages, etc.) — c’est de là que tu vas tout piloter.
2. Créer les pages principales (Accueil, Contact, Histoire, Modèles, etc.)
Où : Pages > Ajouter
Comment :
- Clique Pages > Ajouter pour créer une nouvelle page (ex. Accueil).
- Donne un titre (ex. “Accueil”) et construis le contenu avec l’éditeur de blocs (Gutenberg) ou ton constructeur de pages (Elementor, Brizy, etc.).
- Publie la page quand elle est prête.
Conseil : crée une page distincte pour chaque section (Accueil, Histoire, Modèles, Contact) pour pouvoir les lier dans le menu.
3. Header (nom du site, menu, menu déroulant, sous-menu, bouton mobile)
Où : Apparence > Menus et Apparence > Personnaliser (Customizer)
Comment :
- Créer le menu : va dans Apparence > Menus, clique “Créer un nouveau menu”, donne-l un nom (ex. “Menu principal”).
- Ajouter les pages : coche les pages que tu as créées (Accueil, Modèles, Contact) puis “Ajouter au menu”.
- Créer un sous-menu / sous-élément : fais glisser un item légèrement vers la droite sous un autre — WordPress indente l’élément et en fait un sous-élément (menu déroulant).
- Définir l’emplacement : dans la même page, choisis “Emplacement du menu” -> Header / Menu principal (selon ton thème).
- Bouton mobile : la plupart des thèmes gèrent le menu mobile automatiquement ; teste en mode aperçu mobile dans Apparence > Personnaliser.
Astuce : si ton thème propose un “Header builder” (dans Personnaliser ou via le thème), tu peux personnaliser position logo/menus/CTA depuis cette interface.
4. Intro (hero) — image de fond, vidéo, titre et bouton d’action (CTA)
Où : Pages > Modifier (la page Accueil) ou Apparence > Personnaliser > Image d’en-tête (selon thème)
Comment :
- Édite la page “Accueil”. Dans l’éditeur de blocs, ajoute un bloc Cover (ou Section selon constructeur).
- Dans ce bloc tu peux : télécharger une image de fond ou choisir une vidéo (option “Vidéo” ou “Média” selon bloc), ajouter un titre, un petit texte, et un bouton.
- Paramètres du bloc : règle l’overlay (couleur/transparence) pour assurer la lisibilité du texte.
- Tester l’affichage sur mobile via l’aperçu (icône œil ou Customizer).
5. Qui sommes-nous / Histoire
Où : Pages > Modifier (page Histoire ou À propos)
Comment :
- Crée une page “Histoire” ou “Qui sommes-nous”.
- Ajoute des blocs : texte, image (portrait équipe), galerie ou timeline (si ton constructeur le propose).
- Pour les photos, utilise la Bibliothèque de médias (voir point 6).
Conseil : garde le texte court, utilise des titres et listes pour la lisibilité.
6. Vidéo & Photos (bibliothèque médias)
Où : Médias > Bibliothèque (ou depuis l’éditeur de page en ajoutant un bloc Image/ Galerie / Vidéo)
Comment :
- Téléverse tes images et vidéos via Médias > Ajouter.
- Pour chaque image, clique dessus pour renseigner le texte alternatif (alt) — important pour l’accessibilité et le SEO.
- Dans une page, ajoute un bloc Image, Galerie, ou Vidéo et sélectionne l’élément dans la bibliothèque.
Conseil : compresse tes images avant upload (ou installe un plugin d’optimisation). WP génère automatiquement des tailles différentes pour assurer le responsive.
7. Formulaire de contact
Où : Extensions > Ajouter (pour installer un plugin de formulaire) puis Pages > Modifier (page Contact)
Comment (sans entrer dans le code) :
- Installe une extension de formulaire (ex. WPForms, Contact Form 7, Ninja Forms — choisis celle qui te plaît).
- Après activation, va dans le menu de l’extension et clique Créer un formulaire. L’interface te permet de choisir les champs (nom, email, message, etc.).
- Configure : adresse email de réception, message de confirmation, anti-spam (honeypot, CAPTCHA si disponible).
- Intègre le formulaire sur la page Contact : la plupart des plugins ajoutent un bloc dédié (ex. bloc “WPForms”) que tu peux insérer directement dans la page.
- Teste l’envoi : remplis le formulaire en mode visiteur et vérifie la réception du mail.
8. Map (carte)
Où : Pages > Modifier (section Contact) ; option : Extensions > Ajouter si tu veux des fonctionnalités avancées
Comment :
- Méthode simple : ouvre Google Maps, cherche ton adresse, clique “Partager” > “Intégrer une carte” > copie le lien d’intégration. Dans WordPress, utilises le bloc Embed ou HTML pour coller le lien d’intégration (ou le bloc Google Maps si ton thème/le plugin le propose).
- Option plugin : installe un plugin de cartes (ex. WP Google Maps, Leaflet Map) qui fournit un bloc/shortcode pour placer facilement la carte et l’icône d’emplacement.
- Active le paramètre “chargement différé / lazy loading” pour la carte si possible afin d’améliorer la vitesse.
9. Modèles (galerie / pages produits / réalisations)
Où : Pages > Ajouter ou Apparence > Personnaliser (selon thème)
Comment :
- Crée une page “Modèles” et ajoute une grille via l’éditeur (bloc Galerie, bloc Colonnes, ou widget du constructeur).
- Pour chaque modèle : image, titre, courte description, bouton “Voir” ou “Télécharger”.
- Si tu veux des pages individuelles, crée une page par modèle et lies-les depuis la page liste (ou crée des articles/Custom Post Types si tu maîtrises WP plus avancé).
10. Sous-menu (menu déroulant)
Où : Apparence > Menus
Comment :
- Dans la structure du menu, glisse un élément sous un autre pour le transformer en sous-élément (indentation).
- Enregistre et vérifie dans le site (le thème affichera le menu déroulant automatiquement si supporté).
- Pour un contrôle plus fin (apparence du sous-menu, animation), utilise le Customizer du thème ou un constructeur de header.
11. Bouton d’action (CTA)
Où : Éditeur de page (Bloc Bouton) ou Widget / Customizer
Comment :
- Dans l’éditeur, insère un Bloc Bouton (Button). Renseigne le texte du CTA (ex. “Contactez-nous”), et l’URL de destination (page contact, ancre, formulaire).
- Dans le Header, tu peux souvent ajouter un CTA via Apparence > Personnaliser ou via le header builder du thème (ex. bouton “Demander un devis”).
- Place les CTA aux endroits stratégiques : hero, fin de page, près des descriptions modèles.
12. Mise en forme (typographie, couleurs, spacing)
Où : Apparence > Personnaliser (ou options du thème / constructeur de pages)
Comment :
- Ouvre Apparence > Personnaliser pour régler : couleurs du thème, polices (si le thème le permet), taille de base, espacements.
- Pour des modifications locales (sur une page) : utilise les réglages du bloc/constructeur (taille du texte, marges, alignement).
- Choisis une palette cohérente (2–3 couleurs) et une typographie lisible.
Conseil : teste l’aperçu/tablette/mobile dans le Customizer.
13. Image de fond (hero, sections)
Où : Éditeur de page (bloc Cover / section) ou Apparence > Personnaliser > Image d’arrière-plan
Comment :
- Dans la page, insère un bloc Cover pour définir une image ou une vidéo de fond. Régle l’alignement, la taille et l’overlay.
- Depuis Personnaliser, tu peux définir une image de fond globale du site selon le thème.
- Vérifie la lisibilité (overlay sombre si texte dessus). Fournis une version plus compacte pour mobile si nécessaire (certains thèmes autorisent une image distincte pour mobile).
14. Chiffres clés (statistiques, compteurs)
Où : Éditeur de page ou via plugin/widget
Comment :
- Dans une section dédiée, utilise des blocs colonnes : place un grand chiffre (blocs Titre/Paragraphe) et une courte légende (ex. “200 clients”).
- Si tu veux un effet animé (compteur qui s’incrémente), installe un plugin de “counter / animated number” ou utilise un module du constructeur (Elementor a ce type de widget).
- Garde les chiffres simples et vérifiables.
15. Footer (coordonnées, liens, mentions légales)
Où : Apparence > Widgets ou Apparence > Personnaliser > Footer (selon thème)
Comment :
- Dans Apparence > Widgets, choisis la zone Footer et ajoute des blocs : texte (adresse), menus (liens utiles), icônes sociales, formulaire d’inscription newsletter (plugin).
- Certains thèmes ont des options Footer dans le Customizer pour régler la disposition et le texte de copyright.
- Ajoute un lien vers les mentions légales et la politique de confidentialité (page distincte).
16. Responsive / Tester l’affichage mobile
Où : Apparence > Personnaliser (aperçu responsive) et dans l’éditeur de page (aperçu)
Comment :
- Dans Personnaliser, utilise les icônes d’aperçu (ordinateur / tablette / mobile) pour tester et ajuster.
- Dans l’éditeur, clique “Aperçu” puis “Aperçu sur un appareil mobile”.
- Si nécessaire, ajuste les réglages du bloc ou du constructeur pour masquer/afficher certains éléments sur mobile (option “Afficher sur mobile” / “Masquer sur mobile”).
17. Plugins utiles (installation & gestion)
Où : Extensions > Ajouter puis Extensions > Extensions installées
Comment :
- Va dans Extensions > Ajouter, cherche le nom du plugin, clique Installer maintenant, puis Activer.
- Gère les réglages du plugin via son entrée de menu spécifique dans l’administration.
- Quelques plugins couramment utiles (exemples) : formulaire, SEO, optimisation d’images, mise en cache, sécurité, constructeur de pages. Choisis selon tes besoins.
18. Réglages importants
Où : Réglages dans le menu principal
- Réglages > Permaliens : configure la structure des URL (ex. “Nom de l’article”) pour le SEO.
- Réglages > Lecture : si tu veux que la page d’accueil affiche une page statique, choisis la page Accueil et la page Blog.
- Réglages > Général : nom du site et slogan (affiché souvent dans le header/fav icon).
19. Sauvegarde et sécurité (à faire avant grosses modifications)
Où : via extensions (ex. UpdraftPlus) ou via ton hébergeur
Comment :
- Installe un plugin de sauvegarde et planifie des sauvegardes régulières.
- Active une extension de sécurité (pare-feu, limitation de tentatives de connexion).
- Avant gros changements (thème, personnalisations), fais une sauvegarde.
20. Astuces d’optimisation (vitesse & SEO)
Où : dans les plugins / Customizer / Bibliothèque médias
Comment :
- Images : compresse avant upload ou installe un plugin d’optimisation.
- Cache : installe un plugin de mise en cache (améliore temps de chargement).
- SEO : installe un plugin SEO (Yoast/RankMath) et remplis la meta description et titre pour chaque page.
- Chargement différé : active lazy loading pour images/iframes si possible.
21. Checklist finale avant mise en ligne
- Toutes les pages existantes et publiées (Accueil, Contact, Histoire, Modèles).
- Menu principal configuré et sous-menus testés.
- Hero avec image/vidéo et CTA présent.
- Formulaire testé (envoi reçu).
- Carte intégrée et affichée correctement.
- Images optimisées et alt renseignés.
- Site testé en version mobile/tablette.
- Footer avec mentions légales et coordonnées.
- Sauvegarde réalisée et plugin de sécurité activé.
22. Ergonomie & bonnes pratiques (rapide)
Accessibilité : contraste lisible, champs de formulaire correctement libellés, textes alternatifs pour images.
Rédige des phrases courtes et titres clairs ; l’utilisateur doit comprendre en 5 secondes.
Priorise le mobile (navigation, boutons assez grands).
Mesure : installe un outil d’analyse (Google Analytics ou équivalent) pour suivre le comportement.