24. Constructeur de thème (1) : en-tête et pied de page

Jusqu’ici, chaque page de la Menuiserie Roche a été dessinée une par une. Mais l’en-tête et le pied de page doivent être identiques partout. Ce chapitre ouvre la partie consacrée à Elementor Pro avec l’outil qui rend cela possible : le Constructeur de thème. On y construit une fois ce qui s’affiche sur toutes les pages.

24.1 — Pourquoi un constructeur de thème

Dans WordPress, l’en-tête (la bande du haut avec le logo et le menu) et le pied de page (la bande du bas avec les coordonnées et les mentions légales) sont fournis par le thème. Le thème Hello Elementor, installé au chapitre 04, est volontairement presque vide : le Centre d’aide le présente comme la « toile vierge » recommandée pour le Constructeur de thème. Sans Elementor Pro, on règle son en-tête sommairement depuis Réglages du site › Styles du thème › En-tête et Pied de page : logo, menu, quelques couleurs.

Avec Elementor Pro, le Constructeur de thème (Theme Builder) permet de dessiner ces deux bandes exactement comme une page, avec les mêmes éléments (Flexbox, Titre, Bouton, Image) et quelques widgets réservés à cet usage (Logo du site, Menu WordPress). Les pages, articles et archives sont traités au chapitre 25.

24.2 — L’écran du Constructeur de thème

Trois chemins y mènent : le menu Elementor › Constructeur de thème de l’administration, le menu du logo Elementor dans l’éditeur, ou le raccourci Ctrl+Shift+E (Cmd+Shift+E sur Mac). L’écran liste à gauche les parties du site : Entête (Header — orthographié ainsi dans la traduction française), Pied de page (Footer), Page individuelle (Single Page), Publication unique (Single Post), Archive, Résultats de recherche (Search Results), Erreur 404 (Error 404), Loop Item (chapitre 27), Produit et Archive de produits pour WooCommerce (chapitre 31).

Chaque partie créée apparaît sous forme de carte. Un point vert signale un modèle en ligne, publié avec au moins une condition ; un point gris, un brouillon ou un modèle sans condition, qui n’apparaît nulle part. Au survol d’une carte : Edit (modifier), Edit Conditions (modifier les conditions), Export, Rename (renommer), Delete (supprimer). Le bouton Add New crée une partie ; une icône voisine importe un fichier .json ou .zip. Elementor Pro n’étant pas intégralement traduit, certains libellés peuvent apparaître en anglais.

24.3 — Construire l’en-tête

Un en-tête de site vitrine tient en une ligne : logo à gauche, menu, bouton d’appel à l’action. Vérifiez d’abord que le logo est déclaré dans Réglages du site › Identité du site › Logo du site (chapitre 19) et qu’un menu « Principal » existe dans Apparence › Menus : Elementor affiche les menus, il ne les compose pas.

1. Créez la partie. Dans Elementor › Constructeur de thème, sélectionnez Entête puis Add New. Nommez le modèle En-tête principal. Si la bibliothèque d’en-têtes prêts à l’emploi s’ouvre, fermez-la.
2. Posez le conteneur extérieur. Déposez un Flexbox ; dans l’onglet Général, balise HTML Header, qui dit aux navigateurs et aux moteurs « ceci est l’en-tête ». Dans Style › Arrière-plan, blanc cassé #FAF7F2 ; dans Style › Mise en page, direction Colonne et Aligner les éléments sur Center. Renommez-le « En-tête » dans la Structure (Ctrl+I).
3. Posez le conteneur de contenu. À l’intérieur, un second Flexbox, balise Div, largeur 100 % et largeur maximale 1140 px (Style › Taille, chapitre 10). Mise en page : direction Ligne, Justifier le contenu sur Space between, Aligner les éléments sur Center, écart 24 px, marge interne 16 px haut et bas.
4. Ajoutez le logo. Déposez le widget Logo du site (Site Logo, catégorie Site) : il reprend le logo de l’Identité du site et renvoie vers l’accueil. Limitez sa largeur à 160 px. Sans Pro, un élément Image atomique lié à l’accueil fait le même travail.
5. Ajoutez le menu. Déposez le widget Menu WordPress (WordPress Menu, anciennement Nav Menu) et choisissez le menu « Principal ». Ses réglages sont détaillés au paragraphe 24.4.
6. Ajoutez le bouton. Un Bouton atomique « Demander un devis », lien vers la page Contact, classe btn-primaire du chapitre 18.
7. Vérifiez en mobile. En vue mobile (Ctrl+Shift+M), le menu se replie derrière une icône ; si le bouton déborde, masquez-le (Mise en page › Aucun dans cette vue).
8. Publiez avec une condition. Cliquez sur Publier ; dans la fenêtre qui s’ouvre, ajoutez Include › Tout le site (Entire Site), puis Save & Close. Le point de la carte passe au vert.

24.4 — Menu, menu mobile et en-tête collant

Le widget Menu WordPress

Ses réglages se lisent de haut en bas dans l’onglet Contenu : le menu à afficher ; la disposition (Layout), horizontale pour un en-tête ; le pointeur (Pointer), effet sur l’entrée survolée ou active (soulignement, cadre, fond, rien). Les sous-menus ne se créent pas ici : ce sont les entrées placées en retrait dans Apparence › Menus qui deviennent déroulantes. La section du menu replié (Dropdown) règle le point de rupture (Breakpoint) en dessous duquel le menu se cache derrière une icône (mobile, tablette, ou jamais) et le bouton d’ouverture (Toggle Button), trois traits surnommés « hamburger ». Pour cinq pages plus un bouton, replier dès la tablette est souvent plus sûr : tout cela tient rarement sur 768 pixels.

Le widget Mega Menu (panneaux entiers sous chaque entrée) et le widget Off Canvas (panneau latéral) conviennent aux sites de plusieurs dizaines de pages ; pour cinq pages, le Menu WordPress suffit.

L’en-tête collant

Un en-tête collant (sticky) reste visible quand le visiteur fait défiler la page. Sur un Flexbox atomique, cela se règle dans Style › Position : Sticky, décalage haut 0, z-index élevé (par exemple 100) pour passer au-dessus du contenu (chapitre 10). Appliquez-le au Flexbox extérieur « En-tête », et donnez-lui un fond : un en-tête collant transparent laisse le texte de la page se superposer au menu. Sur un conteneur classique (V3), le même effet se trouve dans Avancé › Effets de mouvement › Sticky, réservé à Pro.

24.5 — Les conditions d’affichage

Une partie du site ne « sait » pas où s’afficher : ses conditions d’affichage le lui disent. Chaque condition associe un verbe, Include (inclure) ou Exclude (exclure), à une cible. On peut en cumuler plusieurs, et Elementor prévient si deux modèles entrent en conflit. Les conditions « Inclure » dessinent un ensemble de pages, les conditions « Exclure » en retirent. Pour un en-tête, la règle de base est Include › Tout le site, complétée au besoin par Exclude › Pages › En construction pour une page d’atterrissage sans menu.

Les cibles sont regroupées en quatre familles. Les libellés sont ceux de l’interface, en anglais quand la traduction n’est pas confirmée.

Pour modifier les conditions après coup : Edit Conditions sur la carte du modèle, ou, dans l’éditeur, la flèche du bouton Publier puis Conditions d’affichage. Une partie publiée sans condition est enregistrée mais invisible : c’est la cause la plus fréquente d’un « mon en-tête n’apparaît pas ».

24.6 — Le pied de page, puis exporter

Le pied de page suit la même mécanique : une partie Pied de page, un Flexbox extérieur en balise Footer sur fond anthracite #2B2B2B, un conteneur de contenu de 1140 px et, à l’intérieur, une Grille (chapitre 09) de quatre colonnes : les coordonnées (Liste d’icône avec liens tel: et mailto:, chapitre 15), un menu (Menu WordPress en disposition verticale, sur un second menu « Pied de page »), les horaires de l’atelier, et les réseaux sociaux (widget Icônes réseaux sociaux). Une dernière ligne porte les liens vers les mentions légales et la confidentialité (chapitre 35). Sur mobile, la Grille passe à une colonne. Texte blanc cassé sur fond sombre : vérifiez le contraste (chapitre 34). Publiez avec Include › Tout le site.

Depuis la carte d’un modèle, Export télécharge un fichier .json contenant toute la partie ; l’icône d’import du Constructeur de thème l’accepte sur un autre site, conditions à redéfinir. Depuis Elementor 4.0, les modèles emportent aussi leurs Classes et Variables (chapitre 21).