38. Projet complet : le site de la Menuiserie Roche, séance par séance

Trente-sept chapitres ont présenté les outils un par un. Celui-ci les remet dans l’ordre d’un vrai projet : le site vitrine de la Menuiserie Roche, construit en huit séances de deux heures, du cahier des charges à la mise en ligne. Chaque séance renvoie aux chapitres qui expliquent le détail ; ici, on déroule le plan et l’on vérifie le résultat.

38.1 — Le cahier des charges en une page

Avant d’ouvrir l’éditeur, on écrit ce que le site doit faire. Un cahier des charges n’est pas un document d’ingénieur : c’est une page qui fixe l’objectif, le public, les pages, les contenus disponibles et ce qui permettra de dire « c’est réussi ». Pour la Menuiserie Roche, il tient dans l’encadré ci-dessous. C’est aussi le canevas que nous utilisons en atelier Num Compagny pour tout projet de site vitrine (chapitre 37).

38.2 — L’arborescence du site

L’arborescence est la carte des pages et de leurs liens. Pour un site vitrine, elle reste plate : toutes les pages sont accessibles depuis le menu, en un clic. Deux ensembles s’y ajoutent sans apparaître dans le menu : les fiches « Réalisation », créées comme un type de contenu personnalisé et affichées par une boucle (chapitres 26 et 27), et les deux pages légales, reliées depuis le pied de page. La page Prestations est découpée en trois sections ancrées, vers lesquelles pointent les cartes de l’accueil (chapitre 15).

38.3 — Le système de design

Le chapitre 18 l’a expliqué : on crée les variables et les classes avant les pages, pour que chaque bouton, chaque carte et chaque titre obéissent au même réglage. Le tableau ci-dessous résume le système de la Menuiserie Roche ; la fiche F7 en donne les valeurs détaillées. La couleur « bois foncé » ne figure pas dans la palette de Camille : c’est une nuance dérivée, ajoutée pour les boutons et les liens, parce que le bois clair n’offre pas un contraste suffisant sous un texte (chapitre 34).

38.4 — Le plan en huit séances

Deux heures par séance, huit séances : c’est le format que nous avons retenu parce qu’il correspond à une demi-journée d’attention réelle et qu’il oblige à finir quelque chose à chaque fois. Le tableau donne la vue d’ensemble ; les sections suivantes détaillent chaque séance avec ses objectifs, ses étapes clés, son livrable et ses critères de réussite. L’ordre n’est pas négociable : l’en-tête avant l’accueil, les réalisations avant le carrousel qui les affiche, le formulaire avant la popup qui le contient.

38.5 — Séance 1 : installation, réglages et système de design

Objectifs

Partir d’un WordPress propre et finir avec un site encore vide mais entièrement réglé : Elementor et Elementor Pro installés, thème Hello actif, réglages faits, identité et système de design en place, pages créées, site protégé par le mode maintenance.

Étapes clés

1. Vérifiez l’hébergement et sauvegardez. WordPress 6.8 au minimum, PHP 8.3 recommandé, sauvegarde de l’hébergeur activée (chapitre 04).
2. Installez Elementor puis le thème Hello Elementor. Extensions › Ajouter › Elementor › Installer › Activer, puis Apparence › Thèmes. Passez l’assistant de démarrage. Ne choisissez pas Hello Biz, annoncé en maintenance (chapitre 04).
3. Installez Elementor Pro. Fichier zip téléchargé depuis votre compte Elementor, Extensions › Téléverser, puis activation de la licence Advanced Solo (chapitre 02).
4. Réglez WordPress. Réglages › Permaliens = Titre de la publication ; créez les sept pages vides (Accueil, Prestations, Réalisations, À propos, Contact, Mentions légales, Politique de confidentialité).
5. Réglez Elementor. Dans Elementor › Éditeur › Réglages : onglet Général, Types de contenu = Pages ; onglet Éditeur Atomic, vérifiez qu’il est actif ; onglet Performance, Méthode d’impression CSS = fichier externe ; onglet Avancé, polices Google chargées localement (chapitres 13 et 33). Dans Elementor › Éditeur › Outils, activez le mode maintenance avec une page « En construction » en Canevas Elementor.
6. Remplissez les Réglages du site. Ctrl+K (Cmd sur Mac) : Identité du site (nom, description = slogan, logo, favicon), Mise en page (largeur de contenu 1140), Couleurs et Polices globales alignées sur la palette, Styles du thème › Boutons et Typographie (chapitre 19).
7. Créez le système de design. Dans le Système de conception : les dix variables et les six classes du tableau 38.3, avec l’état Au survol sur btn-primaire, btn-secondaire et carte (chapitre 18).

Livrable et critères de réussite

Un site vide, invisible pour les visiteurs, dont tous les réglages de fond sont faits. C’est la séance la moins spectaculaire et la plus rentable : chaque minute passée ici en économise dix dans les suivantes.

• Elementor 4.2 et Elementor Pro 4.2 sont actifs et la licence Pro est activée.
• Le thème Hello Elementor est actif ; les permaliens sont en « Titre de la publication ».
• Les sept pages existent, vides, en brouillon ou publiées derrière le mode maintenance.
• La méthode d’impression CSS est « fichier externe » et les polices Google se chargent localement.
• Les dix variables et les six classes apparaissent dans le Système de conception, avec leurs états de survol.
• En navigation privée, un visiteur voit la page « En construction » et rien d’autre.

38.6 — Séance 2 : en-tête et pied de page

Objectifs

Donner au site son cadre, présent sur toutes les pages : un en-tête avec logo, menu et bouton de devis, un pied de page avec coordonnées, horaires, menu et liens légaux. On les construit avant l’accueil parce qu’ils s’affichent ensuite sur la toile de chaque page et qu’ils fixent la largeur de contenu de tout le site.

Étapes clés

1. Composez le menu. Apparence › Menus : Accueil, Prestations, Réalisations, À propos, Contact. Enregistrez.
2. Créez l’en-tête. Elementor › Constructeur de thème (Ctrl+Shift+E) › Entête › Ajouter. Un Flexbox avec la balise Header, direction Ligne, Justifier le contenu = Space between, Aligner les éléments = Center, contenu limité à 1140 px, fond blanc-casse (chapitre 24).
3. Déposez les trois éléments. Le Logo du site (widget Pro) ou un SVG lié à l’accueil ; le widget Menu WordPress avec le menu créé, point de rupture Tablette et icône hamburger ; un Bouton atomique « Demander un devis » avec la classe btn-primaire, lié à la page Contact (chapitre 15).
4. Rendez l’en-tête collant. Style › Position › Collante, haut 0, z-index élevé (chapitre 10). Ajoutez une icône téléphone avec un lien tel:, affichée seulement sur mobile.
5. Publiez avec la condition Inclure › Tout le site.
6. Créez le pied de page. Flexbox balise Footer, fond anthracite, contenant une Grille de quatre colonnes : coordonnées (Liste d’icône avec adresse, tel: et mailto:), menu, horaires, liens Mentions légales et Politique de confidentialité avec les Icônes réseaux sociaux. Une ligne de copyright utilise la balise dynamique Date actuelle (chapitre 26). Même condition « Tout le site ».
7. Testez le menu mobile en mode responsive, puis sur un vrai téléphone.

Livrable et critères de réussite

Deux parties du site publiées dans le Constructeur de thème, marquées d’un point vert, visibles sur toutes les pages.

• Entête et Pied de page portent un point vert et la condition « Tout le site ».
• Le logo renvoie à l’accueil ; le menu compte cinq entrées et la page active se distingue.
• Le menu hamburger s’ouvre et se ferme sur téléphone ; les cinq liens fonctionnent.
• L’en-tête collant ne recouvre aucun titre et reste bas sur mobile.
• Le bouton de devis est le seul bouton principal de l’en-tête.
• Dans le pied de page, tel: et mailto: ouvrent bien le téléphone et la messagerie.

38.7 — Séance 3 : la page d’accueil

Objectifs

Construire la page qui reçoit l’essentiel des visites, en six bandeaux : héros, trois prestations, l’atelier, dernières réalisations, avis clients, appel à devis. On y crée aussi le composant réutilisé sur les autres pages.

Étapes clés

1. Ouvrez la page Accueil dans Elementor et choisissez la mise en page Elementor pleine largeur dans les Réglages de page (chapitre 07).
2. Bandeau héros. Flexbox balise Section, classe section, image de fond de l’atelier (1 800 px de large, moins de 300 Ko) avec une superposition anthracite à 40 % (chapitres 14 et 17). À l’intérieur, un Flexbox centré : Titre H1 « Le bois, sur mesure, depuis 2009 », un Paragraphe d’une phrase, puis deux boutons : btn-primaire « Demander un devis » vers Contact, btn-secondaire « Voir nos réalisations » vers Réalisations.
3. Bandeau trois prestations. Une Grille de trois colonnes 1fr, écart 32 px ; dans chaque cellule un Bloc Div classe carte avec une Boîte d’icône ou une Image, un Titre H3 et un Paragraphe, et un lien « En savoir plus » vers l’ancre correspondante de la page Prestations (chapitres 09, 15, 16).
4. Bandeau l’atelier. Flexbox en ligne : photo de Camille à gauche, texte classe texte-max à droite, bouton secondaire vers À propos.
5. Bandeau dernières réalisations. Provisoirement un Carrousel d’images (widget classique) avec six photos ; il sera remplacé par un Loop Carousel en séance 5 (chapitre 27).
6. Bandeau avis clients. Le widget Témoignage, ou le Carrousel de témoignages (Pro), avec les trois avis autorisés.
7. Bandeau appel à devis. Construisez-le, puis clic droit › Créer un composant « Appel à devis », avec le titre exposé comme propriété (chapitre 22). Il sera inséré sur Prestations, Réalisations et À propos.
8. Interactions. Fondu à l’affichage sur les trois cartes, délais 0, 150 et 300 ms ; rien sur le H1 (chapitre 20).
9. Enregistrez le héros comme modèle (chapitre 21), publiez, puis Réglages › Lecture › Une page statique › Accueil.

Livrable et critères de réussite

La page d’accueil publiée et définie comme page d’accueil du site, avec un composant « Appel à devis » prêt à être réutilisé.

• Un seul H1 ; un H2 par bandeau ; des H3 dans les cartes.
• Deux boutons dans le héros, dont un seul en btn-primaire.
• Image de fond de moins de 300 Ko ; texte lisible grâce à la superposition.
• Padding de section 80 px, écart 32 px, aucune hauteur fixe en pixels sur un conteneur de texte.
• Le composant « Appel à devis » est publié et apparaît dans l’onglet Composants du panneau.
• L’adresse du site ouvre bien cette page (Réglages › Lecture).

38.8 — Séance 4 : prestations et tableau de prix

Objectifs

Détailler les trois familles de prestations dans une page longue mais navigable, avec des ancres, un tableau de prix indicatif et une foire aux questions. C’est la page qui répond à « combien ça coûte » avant que le visiteur n’ose demander.

Étapes clés

1. Posez la structure. Un héros court (H1 « Nos prestations », sous-titre), puis trois Flexbox balise Section. En tête de chacun, un widget Ancre de menu nommé escaliers, cuisines, agencements, ou l’identifiant du conteneur si le champ est proposé (chapitre 15).
2. Construisez la première section. Flexbox en ligne : image d’un côté, de l’autre un H2, un Paragraphe classe texte-max, une Liste d’icône des points forts et un bouton secondaire « Demander un devis ».
3. Dupliquez-la deux fois avec Ctrl+D, en alternant Ligne et Ligne inversée pour que l’image change de côté (chapitres 08 et 09). Remplacez textes, images et ancres.
4. Ajoutez le Tableau de prix. Widget Pro réservé aux plans Advanced et supérieurs d’après le tableau du Centre d’aide (chapitre 30). Trois formules : « Conseil à l’atelier », « Rénovation », « Création sur mesure », avec une mention « à partir de » ou « sur devis », la troisième mise en avant, un bouton vers Contact par colonne. Couleurs prises dans les variables.
5. Ajoutez la foire aux questions. Un Accordéon imbriqué (gratuit) avec cinq questions : délais, essences de bois, garantie, zone d’intervention, entretien (chapitre 16).
6. Créez les boutons flottants « Appeler » et « WhatsApp » depuis l’administration, affichés sur mobile (chapitre 30).
7. Insérez le composant « Appel à devis » en bas de page, publiez, puis vérifiez depuis l’accueil que les trois liens « En savoir plus » atterrissent sur la bonne section.

Livrable et critères de réussite

Une page Prestations avec trois ancres fonctionnelles, un tableau de prix et une foire aux questions.

• Les trois cartes de l’accueil mènent chacune à la bonne section de la page.
• L’alternance image/texte est lisible ; sur mobile, l’image passe au-dessus du texte.
• Le tableau de prix a trois colonnes, une seule mise en avant, un bouton par colonne.
• Les montants affichés correspondent aux devis réels de Camille et portent « à partir de » ou « sur devis ».
• La foire aux questions compte cinq questions, une seule ouverte par défaut au plus.
• Un seul H1 ; un H2 par section.

38.9 — Séance 5 : réalisations, type de contenu et boucle

Objectifs

Transformer dix-huit photos en une galerie filtrable et en fiches individuelles, sans construire dix-huit pages à la main. C’est la séance la plus technique : elle mobilise le type de contenu personnalisé, les balises dynamiques et le Loop Builder.

Étapes clés

1. Créez le type de contenu « Réalisation ». Avec une extension de champs personnalisés (ACF, cité en exemple, chapitre 26) : champs commune, essence de bois, année ; taxonomie « Famille » avec Escaliers, Cuisines, Agencements. Puis autorisez Elementor sur ce type : Elementor › Éditeur › Réglages › Général › Types de contenu.
2. Préparez et saisissez les contenus. Photos à 1 600 px de large, moins de 300 Ko, fichiers nommés (« escalier-chene-murol.jpg »), texte alternatif rempli (chapitre 14). Dix-huit réalisations avec image mise en avant, famille, commune, essence, année.
3. Créez le Loop Item. Constructeur de thème › Loop Item › Ajouter : un Bloc Div classe carte avec l’Image mise en avant (dynamique, hauteur fixe, image ajustée), un Titre H3 dynamique « Titre de publication », un Paragraphe dynamique sur le champ commune avec le texte avant « Commune : » ; lien de la carte vers l’URL de la publication (chapitre 27).
4. Composez la page Réalisations. H1, puis un Filtre par taxonomie sur « Famille », puis un Loop Grid de trois colonnes, neuf éléments par page, source Réalisation, tri par date, pagination par numéros en chargement AJAX.
5. Créez le modèle Publication unique des réalisations. Titre de publication, Image mise en avant, les trois champs dynamiques, une Galerie des photos du chantier, la Navigation de publication et le composant « Appel à devis » ; condition Inclure sur le type Réalisation seulement (chapitre 25).
6. Remplacez le carrousel provisoire de l’accueil par un Loop Carousel utilisant le même Loop Item, limité aux six dernières réalisations.
7. Contrôlez le poids. Dans la boucle, images en taille moyenne, jamais en taille originale (chapitre 33).

Livrable et critères de réussite

Une page Réalisations filtrable, dix-huit fiches habillées par un seul modèle, et un carrousel sur l’accueil qui se met à jour tout seul à chaque nouvelle réalisation.

• Les dix-huit réalisations affichent une image, un titre et une commune dans la grille.
• Le filtre Escaliers / Cuisines / Agencements fonctionne sans recharger la page.
• Chaque fiche a un H1, une galerie et l’appel à devis ; sa navigation mène à la réalisation suivante.
• Le modèle Publication unique ne s’applique qu’aux réalisations : les pages gardent leur mise en page.
• Le carrousel de l’accueil montre les six dernières réalisations, sans réglage manuel.

38.10 — Séance 6 : À propos et témoignages

Objectifs

Raconter l’atelier et les personnes, ce qui fait la différence entre un artisan et un catalogue. La page assemble des widgets classiques dans des conteneurs atomiques, et c’est la bonne occasion de tester l’IA de rédaction avec méthode.

Étapes clés

1. Écrivez le brief. Si vous utilisez Elementor AI pour dégrossir le texte, préparez d’abord le brief, générez deux versions, relisez sur le fond et réécrivez à la première personne de Camille (chapitre 23). Notez que la mention correspondante devra figurer dans les mentions légales (séance 8).
2. Posez la structure. Héros court (H1 « L’atelier, depuis 2009 »), section histoire (Flexbox en ligne, photo et texte classe texte-max), section équipe (Grille de trois Boîtes d’image : Camille et ses deux salariés), section valeurs (Grille de trois Boîtes d’icône : bois local, sur mesure, pose soignée), section chiffres (trois Compteurs : années d’activité, chantiers livrés, communes servies — des chiffres vrais), section témoignages (trois widgets Témoignage dans une Grille, ou le Carrousel de témoignages), composant « Appel à devis » (chapitre 16).
3. Appliquez la classe carte aux Blocs Div de l’équipe et des valeurs : ombre et survol viennent avec, sans rien régler élément par élément (chapitre 17).
4. Harmonisez les photos. Même cadrage, même proportion, coins arrondis par la classe (chapitre 14).
5. Publiez et relisez sur téléphone, la page en entier, à voix basse : les phrases trop longues se repèrent à l’oreille.

Livrable et critères de réussite

Une page À propos publiée, dont tous les contenus sont vrais et signés.

• Aucun texte laissé « générique » : noms, années, communes et essences réels.
• Les avis clients portent un prénom et disposent d’un accord écrit ; aucun avis inventé.
• Les Compteurs affichent des chiffres que Camille peut justifier.
• Les cartes équipe et valeurs utilisent la classe carte, sans style local.
• Un seul H1 ; un H2 par section ; le composant « Appel à devis » ferme la page.

38.11 — Séance 7 : contact, formulaire et popup

Objectifs

Construire la page la plus importante du site pour un artisan : celle où le visiteur devient une demande de devis. Le formulaire, ses actions après envoi et sa conformité occupent l’essentiel de la séance ; la popup vient en dernier.

Étapes clés

1. Posez la page Contact. H1, puis un Flexbox en ligne : à gauche les coordonnées et les horaires (Liste d’icône avec adresse, tel:, mailto:), à droite le formulaire (chapitre 15).
2. Décidez pour la carte. Le widget Google Maps charge des ressources tierces (chapitres 16 et 35) : préférez une image de plan cliquable vers l’itinéraire, ou n’affichez la carte qu’après consentement.
3. Construisez le formulaire de devis avec le widget Formulaire (Pro) en deux étapes (chapitre 28). Étape « Votre projet » : une Sélection (escalier, cuisine, agencement), une Zone de texte, un Téléversement facultatif. Étape « Vos coordonnées » : Nom et Email en colonnes de 50 %, Tel facultatif, une case Acceptation obligatoire renvoyant à la politique de confidentialité, et une Case à cocher facultative, non pré-cochée, « J’accepte d’être rappelé par téléphone » (obligation depuis le 11 août 2026, chapitre 35). Ajoutez un champ Honeypot.
4. Réglez les actions après envoi. Collecter les envois ; Email vers contact@menuiserie-roche.fr avec [all-fields] ; Email 2 en accusé de réception au client, avec « Répondre à » sur l’adresse de l’atelier ; messages de succès et d’erreur personnalisés.
5. Assurez la délivrabilité. Une extension SMTP (citée en exemple) ou Site Mailer, puis un envoi de test réel, en vérifiant le dossier des indésirables.
6. Créez la popup « Devis express ». Elementor › Éditeur › Modèles › Fenêtres surgissantes : un formulaire court (nom, téléphone, projet, même case de rappel), fermeture visible. Publication : condition Tout le site ; déclencheur au chargement après 40 secondes ; règles avancées : afficher sur ordinateur seulement, jusqu’à une fois. Le bouton « Devis express » du composant « Appel à devis » l’ouvre par le lien dynamique Actions › Popup (chapitre 29).
7. Vérifiez la conformité. Mention d’information sous le formulaire, durée de conservation des envois décidée et notée pour la politique de confidentialité, purge périodique prévue (chapitre 35).

Livrable et critères de réussite

Un formulaire de devis en deux étapes, testé de bout en bout, et une popup qui ne dérange personne sur mobile.

• L’envoi de test arrive chez Camille et l’accusé de réception arrive au client.
• La case de rappel téléphonique est facultative, non pré-cochée, avec un libellé explicite.
• Aucun champ inutile ; le téléphone est facultatif ; la case Acceptation renvoie à la politique.
• La popup ne s’affiche jamais sur mobile et se ferme d’un geste.
• Les liens tel: et mailto: de la page sont testés sur téléphone.
• Les envois apparaissent dans Elementor › Envois.

38.12 — Séance 8 : responsive, performance, conformité, mise en ligne

Objectifs

Contrôler, corriger, publier. Rien de neuf n’est construit pendant cette séance : on passe chaque page au crible du téléphone, de la vitesse, de l’accessibilité et de la loi, puis on retire le mode maintenance.

Étapes clés

1. Responsive. Page par page, en vue Tablette puis Mobile (Ctrl+Shift+M) : Grilles de trois colonnes passées à une, Flexbox de ligne en colonne, H1 de 48 à 32 px, padding de section de 80 à 40 px, images vérifiées ; puis la fiche F4 en entier (chapitre 12).
2. Performance. Mesure de l’accueil sur mobile avec PageSpeed Insights ; images de plus de 300 Ko réduites ; deux familles de polices et quatre graisses au plus ; chargement optimisé des images actif ; cache de l’hébergeur ou extension de cache (chapitre 33).
3. Accessibilité et référencement. Hiérarchie des titres, textes alternatifs, contraste, focus visible, libellés de formulaire ; avec une extension SEO (citée en exemple), un titre et une description par page et les données LocalBusiness ; dans Réglages › Lecture, la case demandant aux moteurs de ne pas indexer est décochée (chapitre 34).
4. Conformité. Rédaction des Mentions légales et de la Politique de confidentialité à partir des canevas du chapitre 35, mention des contenus assistés par IA si vous en avez utilisé, inventaire de ce qui charge des ressources tierces et bandeau de consentement si nécessaire.
5. Mise en ligne. Sauvegarde complète, désactivation du mode maintenance, test des sept pages en navigation privée et sur téléphone, formulaire retesté, fiche Google Business reliée au site, https vérifié (chapitre 37).
6. Après. La routine mensuelle du chapitre 36 est notée dans l’agenda ; premier réflexe en cas de style disparu : Elementor › Éditeur › Outils › Regénérer CSS et données.

Livrable et critères de réussite

Le site en ligne. La fiche F5 donne la liste complète de mise en ligne ; les six points ci-dessous sont ceux qu’on oublie le plus souvent.

• Chaque page a été vue sur un vrai téléphone, sans défilement horizontal ni texte tronqué.
• La page d’accueil charge en un temps raisonnable sur mobile et ses images sont compressées.
• Les Mentions légales et la Politique de confidentialité sont complètes et reliées depuis le pied de page.
• Les moteurs de recherche sont autorisés à indexer le site.
• Le mode maintenance est retiré et une sauvegarde datée du jour existe.
• Le formulaire a été testé une dernière fois après la mise en ligne.

38.13 — Variante sans Elementor Pro

Le projet complet suppose un plan Advanced Solo. Avec la version gratuite, on construit le même site en remplaçant chaque fonction Pro par une solution moins confortable mais honnête. Ce qui ne se remplace pas vraiment, c’est le formulaire avec collecte des envois et le contenu dynamique : on s’appuie alors sur une extension de formulaire gratuite (citée en exemple) et sur des pages écrites à la main. Le chapitre 02 aide à décider si l’économie vaut le temps passé.

38.14 — Grille d’auto-évaluation

Une fois le site en ligne, cochez pour chaque compétence la colonne qui vous correspond, sans indulgence. « Acquis » veut dire que vous sauriez le refaire seul, sur un autre site, sans rouvrir le support. Les compétences « à revoir » désignent le chapitre à relire.

Un site fini n’est pas un site parfait : c’est un site en ligne, conforme, que son propriétaire sait faire vivre.