07. Votre première page en vingt minutes

Assez de théorie : ce chapitre construit, clic après clic, la page d’accueil de la Menuiserie Roche — un bandeau de bienvenue et trois prestations côte à côte — puis la publie et en fait la page d’accueil du site. Vingt minutes, chronomètre en main, pour parcourir une première fois le cycle complet : créer, construire, régler, vérifier, publier.

En bref

Public: Débutant qui a lu les chapitres 05 et 06 et n’a encore rien construit pour de bon.
Enjeu: Vivre une fois le cycle complet, de la page vide à la page en ligne, pour que tout le reste du support ait un sens.
Idée clé: Une page publiée imparfaite apprend plus qu’une page parfaite jamais publiée.
Prérequis: Chapitres 04 (Elementor installé, mode maintenance actif), 05 et 06.
Lecture: Environ 10 minutes (+ 20 minutes de pas-à-pas + 20 minutes d’exercice).

7.1 — Ce que nous allons construire, et pourquoi si peu

La page d’accueil finale de la Menuiserie Roche (chapitre 38) comptera un bandeau, trois prestations, une galerie, des témoignages, un appel au devis et un pied de page. Nous n’en construisons aujourd’hui que les deux premiers blocs. Ce n’est pas par paresse : une première page doit être assez petite pour être terminée en une séance, publiée, et regardée sur un téléphone. Tout ce que nous laissons de côté sera ajouté chapitre après chapitre, sur cette même page.

Le résultat visé est celui de la figure 7.1 : un Flexbox de fond crème, en colonne, contenant un Titre H1, un Paragraphe et un Bouton ; puis un second Flexbox, en ligne, contenant trois Blocs Div, chacun avec un Titre H3 et un Paragraphe. Deux conteneurs, huit contenus, aucune image : les images arrivent au chapitre 14.

Figure 7.1 — La page d’accueil de ce chapitre : deux conteneurs Flexbox, huit contenus, aucune image.

Bonne pratique

Avant d’ouvrir l’éditeur, ayez vos textes sous la main, dans un document ou sur une feuille. Voici ceux d’aujourd’hui. Titre : « Le bois, sur mesure, depuis 2009 ». Paragraphe : « Camille Roche et son équipe conçoivent, fabriquent et posent vos escaliers, cuisines et agencements, à Murol et dans tout le Sancy. » Bouton : « Demander un devis ». Les trois prestations : Escaliers, Cuisines, Agencements, avec une phrase chacune. Les couleurs de la charte : crème #FAF7F2, anthracite #2B2B2B, bois #A8663C. Chercher ses mots dans l’éditeur est la première cause des « vingt minutes » qui en durent soixante.

7.2 — Minutes 0 à 3 : créer la page et la préparer

Créez la page dans WordPress. Dans l’administration, ouvrez Pages › Ajouter une page. Dans le champ du titre, tapez Accueil. Ne touchez à rien d’autre.
Passez dans Elementor. Cliquez sur le bouton Modifier avec Elementor en haut de l’éditeur de blocs. Après quelques secondes, l’écran du chapitre 05 s’affiche, avec une toile vide.
Choisissez la mise en page. Cliquez sur l’engrenage Réglages de page (Page Settings) dans la barre supérieure, ou tapez Ctrl+Shift+Y (Cmd à la place de Ctrl sur Mac). Dans la liste Mise en page (Page Layout), choisissez Elementor pleine largeur : la page garde l’en-tête et le pied de page du thème, mais votre contenu pourra occuper toute la largeur de l’écran.
Enregistrez une première fois. Tapez Ctrl+S. Rien n’est encore visible, mais la page existe en brouillon et l’Historique commence à la suivre.

7.3 — Minutes 3 à 10 : le bandeau de bienvenue

Déposez un Flexbox. Dans le panneau, catégorie Éléments atomiques, saisissez Flexbox et glissez-le sur la zone vide de la toile. Un rectangle clair apparaît, avec une poignée en haut. Le panneau affiche ses deux onglets.
Donnez-lui sa balise. Onglet Général, liste Balise HTML (HTML Tag) : choisissez Section. Ce détail est invisible, mais il indique aux moteurs de recherche et aux lecteurs d’écran que cette boîte est une section de la page (chapitre 03).
Réglez la disposition. Onglet Style, section Mise en page. Le mode d’affichage est déjà Flex. Dans Direction, choisissez Colonne (Column) : les enfants s’empileront. Dans Aligner les éléments (Align items), choisissez Center : ils seront centrés horizontalement. Dans Écart (Gap), tapez 24 : vingt-quatre pixels sépareront chaque enfant du suivant.
Donnez de l’air. Section Espacement, champ de marge interne (Padding). Si les quatre côtés sont liés (icône de chaîne active), cliquez sur l’icône pour les délier, puis saisissez 80 en haut, 24 à droite, 80 en bas et 24 à gauche, en pixels. La marge interne est l’espace entre le bord de la boîte et son contenu ; le chapitre 10 en fait le tour.
Colorez le fond. Section Arrière-plan, choisissez une couleur unie et saisissez #FAF7F2. Le rectangle passe au crème.
Nommez le conteneur. Ouvrez la Structure (Ctrl+I), double-cliquez sur « Flexbox » et tapez Bandeau d’accueil. Refermez la Structure.
Déposez le Titre. Glissez un élément Titre à l’intérieur du Flexbox : la ligne bleue doit apparaître dans le rectangle crème, pas au-dessus ni en dessous. Dans Général, remplacez le texte par Le bois, sur mesure, depuis 2009 et vérifiez que la liste de balise (Tag) indique H1.
Habillez le Titre. Onglet Style, section Typographie : famille de police (Font family) Playfair Display (tapez son nom dans la liste, les polices Google y figurent), taille 48 px, graisse 700, couleur #2B2B2B, alignement centré.
Déposez le Paragraphe. Glissez un Paragraphe sous le Titre, dans le même Flexbox. Collez la phrase de présentation. Typographie : Source Sans 3, 20 px, couleur #2B2B2B, centré. Section Taille, largeur maximale (Max width) : 720 px, pour que la ligne ne s’étire pas sur tout l’écran.
Déposez le Bouton. Glissez un Bouton sous le Paragraphe. Général : texte du bouton Demander un devis ; lien #devis pour l’instant (il pointera vers le formulaire au chapitre 28). Style › Arrière-plan : #A8663C. Typographie : Source Sans 3, 17 px, graisse 600, couleur #FAF7F2. Espacement › marge interne : 16 en haut et en bas, 32 à gauche et à droite. Bordure › rayon : 6 px.
Enregistrez. Ctrl+S. Le bandeau est terminé : un titre, une phrase, un bouton, centrés sur fond crème. Sept minutes si vos textes étaient prêts.

À savoir

Pourquoi un seul H1. La balise H1 est le titre principal de la page : les moteurs de recherche et les lecteurs d’écran s’en servent pour comprendre de quoi elle parle. Une page qui en a trois ne dit plus rien de clair. Le H1 de la page d’accueil est ici le slogan ; les prestations passent en H3, car nous réservons H2 aux titres de section, qui arriveront plus tard. Ne choisissez jamais une balise pour sa taille : la taille se règle dans Typographie, la balise dit le rang (chapitre 13).

Définition

Bouton — un lien habillé pour être vu. Techniquement, le Bouton d’Elementor est un lien, mais il porte un fond, des marges internes et un rayon qui le font ressortir. Réservez-le à l’action que vous voulez que le visiteur accomplisse (demander un devis, appeler), une seule par écran si possible ; un lien dans un paragraphe suffit pour « en savoir plus ». Le chapitre 15 détaille liens, ancres et numéros de téléphone cliquables.

7.4 — Minutes 10 à 16 : trois prestations côte à côte

Déposez un second Flexbox. Glissez un Flexbox sous le bandeau, au niveau de la page : la ligne bleue doit s’afficher sous le rectangle crème, sur toute la largeur. Général › Balise HTML : Section. Renommez-le Prestations dans la Structure.
Réglez-le en ligne. Style › Mise en page : Direction Ligne (Row), Justifier le contenu (Justify content) sur Center, Aligner les éléments sur Stretch pour que les trois blocs aient la même hauteur, Écart 32. Espacement › marge interne : 80 en haut et en bas, 40 à gauche et à droite.
Déposez le premier Bloc Div. Glissez un Bloc Div dans le Flexbox Prestations. Style › Taille : largeur 100 %, largeur maximale 340 px. Espacement › marge interne : 32 sur les quatre côtés, liés. Arrière-plan : #FAF7F2. Bordure › rayon : 12 px. Renommez-le Prestation – Escaliers.
Remplissez-le. Dans le Bloc Div, déposez un Titre : texte Escaliers, balise H3, Playfair Display, 24 px, couleur #2B2B2B ; Espacement › marge externe (Margin) : 12 px en bas seulement, pour l’écarter du texte. Puis un Paragraphe : « Droits, tournants ou hélicoïdaux, en chêne, frêne ou hêtre, dessinés pour votre maison. », Source Sans 3, 17 px, couleur #2B2B2B.
Dupliquez deux fois. Sélectionnez le Bloc Div (cliquez sur sa poignée, ou sur sa ligne dans la Structure) et tapez Ctrl+D deux fois. Trois blocs identiques s’alignent. Le chapitre 08 détaille ce geste, le plus grand gain de temps d’Elementor.
Personnalisez les copies. Dans le deuxième bloc, remplacez le titre par Cuisines et le texte par « Plans de travail, façades et rangements sur mesure, du dessin à la pose. » ; dans le troisième, Agencements et « Bibliothèques, dressings, bureaux et meubles uniques, ajustés au millimètre. ». Renommez les deux blocs dans la Structure.
Enregistrez. Ctrl+S. Seize minutes.

Astuce

Si un élément se dépose au mauvais endroit — dans le bandeau au lieu du Bloc Div, ou entre deux conteneurs —, ne le supprimez pas pour recommencer : ouvrez la Structure et faites-le glisser à sa place dans l’arborescence. C’est plus sûr que sur la toile, où la ligne bleue passe vite d’une boîte à l’autre.

7.5 — Minutes 16 à 20 : vérifier, publier, en faire la page d’accueil

Regardez la page en mobile. Tapez Ctrl+Shift+M et choisissez la vue Mobile. Le bandeau reste lisible ; les trois blocs, eux, se serrent en une ligne trop étroite. C’est attendu : nous les passerons en colonne au chapitre 12. Ne changez rien pour l’instant, et revenez en vue Ordinateur.
Ouvrez l’aperçu. Cliquez sur l’œil Aperçu. Un nouvel onglet montre la page telle que le navigateur la rendra réellement, avec l’en-tête minimal du thème Hello. Relisez les textes une dernière fois ; refermez l’onglet.
Publiez. Cliquez sur Publier. Le bouton devient Mettre à jour : la page est en ligne, à une adresse du type votre-site.fr/accueil/.
Faites-en la page d’accueil. Retournez dans l’administration WordPress (menu du logo Elementor › Sortir vers WordPress, ou un autre onglet). Ouvrez Réglages › Lecture. Sous « Votre page d’accueil affiche », cochez Une page statique, puis choisissez Accueil dans la liste Page d’accueil. Cliquez sur Enregistrer les modifications.
Vérifiez. Ouvrez l’adresse de votre site dans un nouvel onglet. Connecté, vous voyez la vraie page d’accueil ; en navigation privée, si le mode maintenance du chapitre 04 est actif, vous voyez la page « Bientôt disponible ». C’est le comportement voulu jusqu’à la mise en ligne (chapitre 37). Vingt minutes.

Attention

Vérifier sur mobile avant de publier deviendra un réflexe à partir du chapitre 12 ; aujourd’hui, vous avez publié une page dont les trois blocs sont trop serrés sur téléphone. C’est acceptable pour un site en mode maintenance, pas pour un site ouvert au public : la majorité des visiteurs d’un artisan arrivent depuis un téléphone. Retenez la règle dès maintenant : Ctrl+Shift+M avant Publier, toujours.

Piège classique

Publier n’est pas enregistrer. Ctrl+S sur une page déjà publiée la met à jour immédiatement pour les visiteurs ; sur une page en brouillon, il enregistre le brouillon. Si vous voulez travailler sur une page en ligne sans que le public voie vos essais, utilisez la flèche du bouton Mettre à jour › Enregistrer le brouillon, ou construisez d’abord sur la page « Bac à sable » puis copiez le résultat (chapitre 08).

Exercice 7.1 — Refaire sans filet, puis ajouter une quatrième prestation 20 min

Objectif : refaire la page de mémoire, sans relire le pas-à-pas, puis découvrir ce qui se passe quand une ligne est trop pleine — comme nous le faisons en atelier Num Compagny, où la seconde construction est toujours celle qui reste.

Créez une page « Essai accueil » en mise en page Elementor pleine largeur. Fermez ce support.
Reconstruisez le bandeau : Flexbox en Section, colonne, centré, écart 24, marge interne 80/24, fond crème ; Titre H1 en Playfair Display 48 px ; Paragraphe en Source Sans 3 20 px limité à 720 px ; Bouton bois avec texte crème. Comparez ensuite vos valeurs à celles du pas-à-pas et notez les écarts.
Reconstruisez la ligne des trois prestations avec un Bloc Div dupliqué deux fois.
Dupliquez une quatrième fois et nommez le bloc « Rénovation », texte : « Remise en état d’escaliers et de menuiseries anciennes, dans le respect du bâti. ». Observez : quatre blocs de 340 px plus trois écarts de 32 px dépassent la largeur disponible, et le navigateur rétrécit les blocs pour les faire tenir.
Testez deux remèdes. Premier : sur le Flexbox Prestations, section Mise en page, passez Retour à la ligne (Wrap) sur la valeur qui autorise le passage à la ligne ; le quatrième bloc descend sous les autres. Second : annulez, puis réduisez la largeur maximale des quatre blocs à 250 px ; les quatre tiennent sur une ligne. Choisissez celui qui vous paraît le plus lisible et notez pourquoi.
Enregistrez en brouillon. Ne remplacez pas la vraie page d’accueil : cette page d’essai reste votre terrain de jeu.

Résultat attendu : une page « Essai accueil » en brouillon, avec un bandeau conforme et quatre prestations lisibles, en ligne ou sur deux lignes ; vous savez expliquer avec vos mots ce que font l’écart, la marge interne et la largeur maximale, et vous avez identifié les deux ou trois valeurs que vous aviez oubliées.

À retenir

Le cycle complet tient en cinq verbes : créer la page dans WordPress, construire dans Elementor, régler dans l’onglet Style, vérifier en aperçu et en vue mobile, publier.
Une section de page est un Flexbox avec la balise Section, réglé en colonne pour empiler ou en ligne pour aligner, avec un Écart entre ses enfants et une marge interne pour respirer.
Une page n’a qu’un seul H1 ; la balise dit le rang, la Typographie dit la taille.
On construit un bloc, on le duplique, puis on personnalise les copies : jamais trois fois le même travail.
La page d’accueil se désigne dans Réglages › Lecture de WordPress, pas dans Elementor ; le mode maintenance la cache aux visiteurs tant qu’il est actif.