3.1Theme Builder : en-tête & pied de page
L'essentiel en 30 secondes
- Le Theme Builder (Pro) conçoit visuellement les parties globales du site : en-tête, pied, modèles.
- Les conditions d'affichage décident où un modèle s'applique (tout le site, certaines pages…).
- L'en-tête peut être collant (sticky) et doit être responsive (menu hamburger sur mobile).
Mini-cas filé — Nadia passe à Pro
Le menuisier veut un en-tête identique partout (logo + menu + bouton « Devis ») et un pied avec adresse et horaires. Jusqu'ici, Nadia recopiait ces blocs sur chaque page. Avec Elementor Pro et le Theme Builder, elle crée un en-tête et un pied globaux, affichés sur tout le site, modifiables en un seul endroit.
Début du niveau 3 — Nadia bascule sur Elementor Pro.
1. En-tête et pied globaux
Le Theme Builder est la fonctionnalité phare d'Elementor Pro : il permet de concevoir visuellement les parties globales du site. L'en-tête (header) est la bande du haut présente partout (logo, menu, bouton d'action) ; le pied de page (footer) la bande du bas (adresse, horaires, réseaux, mentions). On les crée une fois, et ils s'affichent sur tout le site.
Fini le copier-coller : Nadia conçoit l'en-tête du menuisier (logo à gauche, menu, bouton « Devis » à droite) et le pied (adresse Oran, horaires, téléphone) dans le Theme Builder.
2. Conditions, sticky, responsive
Les conditions d'affichage décident où un modèle s'applique : tout le site, uniquement certaines pages, etc. On peut ainsi avoir un en-tête différent sur la page d'accueil si besoin.
L'en-tête peut être collant (sticky) : il reste visible en haut quand on fait défiler — pratique pour garder le menu et le bouton « Devis » accessibles. Et il doit être responsive : sur mobile, le menu se replie (hamburger), à tester.
🔎 Exemple concret — En-tête et pied du menuisier (cas Nadia)
Theme Builder → En-tête : logo · menu · bouton « Devis » → condition : tout le site, sticky activé.
Theme Builder → Pied : adresse Oran · horaires · tél · mentions → condition : tout le site.
Mobile : menu en hamburger, testé au doigt.
→ Un changement de menu = un seul endroit.Résultat : cohérence totale, maintenance en un point.
Leçon : concevoir les parties globales dans le Theme Builder.
Vocabulaire de la section
- Theme Builder (Pro)
- La fonctionnalité d'Elementor Pro pour concevoir visuellement les parties globales du site.
Exemple simple : Nadia y crée l'en-tête et le pied du menuisier.
Ce que ce n'est pas : recopier l'en-tête sur chaque page à la main.
Réflexe : partie présente partout → Theme Builder.
- En-tête (header)
- La bande du haut présente sur tout le site (logo, menu, bouton d'action).
Exemple simple : logo + menu + bouton « Devis ».
Ce que ce n'est pas : un en-tête différent et incohérent par page.
Réflexe : en-tête global, clair, avec une action.
- Pied de page (footer)
- La bande du bas présente partout (adresse, horaires, réseaux, mentions).
Exemple simple : adresse Oran, horaires, téléphone, mentions légales.
Ce que ce n'est pas : oublier les infos de contact et les mentions.
Réflexe : pied = infos utiles + mentions.
- Conditions d'affichage
- Où un modèle (en-tête, pied…) s'applique : tout le site, certaines pages…
Exemple simple : en-tête sur tout le site, un autre sur l'accueil.
Ce que ce n'est pas : ne pas définir de condition (le modèle ne s'affiche pas).
Réflexe : créer un modèle = lui donner une condition.
- En-tête collant (sticky) & responsive
- L'en-tête reste visible au défilement (sticky) et s'adapte au mobile (hamburger).
Exemple simple : menu et bouton « Devis » toujours accessibles ; hamburger sur mobile.
Ce que ce n'est pas : un en-tête qui disparaît ou casse sur mobile.
Réflexe : sticky utile + toujours tester le mobile.
En pratique — Créer un en-tête et un pied globaux
- Dans le Theme Builder, créez un en-tête (logo, menu, bouton d'action).
- Donnez-lui la condition « tout le site » et activez le sticky si pertinent.
- Créez un pied (adresse, horaires, mentions) avec la même condition.
- Testez sur mobile : menu hamburger, en-tête lisible, pied complet.
Script prêt à dire — valoriser l'en-tête global (20 s)
« J'ai créé votre en-tête et votre pied de page une seule fois : logo, menu et bouton de devis en haut, adresse et horaires en bas, identiques sur toutes les pages. Si vous voulez changer le menu ou ajouter un horaire, je le fais en un endroit, et ça s'applique partout. »
Vendre la cohérence et la maintenance en un point.
Modèle copier-coller — check Theme Builder
EN-TÊTE : logo ___ menu ___ bouton action ___
CONDITION : tout le site / pages : ___ STICKY : oui / non
PIED : adresse ___ horaires ___ tél ___ mentions ___
CONDITION : tout le site / pages : ___
RESPONSIVE (hamburger) TESTÉ : oui / nonVitrine artisan
En-tête simple (logo + menu + bouton appel), pied avec adresse et horaires.
Accueil spécifique
Condition particulière : un en-tête transparent sur l'accueil, classique ailleurs.
Sticky
Garder le bouton « Devis » accessible au défilement sur les pages longues.
Mobile
Menu hamburger clair ; bouton d'appel visible dans l'en-tête mobile.
✓ Bonnes pratiques
- Concevoir en-tête/pied dans le Theme Builder (une fois).
- Donner une condition d'affichage à chaque modèle.
- Tester l'en-tête sticky et le menu mobile.
✗ Pièges fréquents
- Recopier l'en-tête sur chaque page.
- Oublier la condition (modèle non affiché).
- Ne pas tester le menu mobile.
Points clés à retenir
- Theme Builder (Pro) = parties globales du site.
- En-tête (haut) et pied (bas) conçus une fois.
- Conditions d'affichage = où ça s'applique.
- En-tête sticky + responsive (hamburger).
Défi 48h — appliquez demain
Avec Elementor Pro, créez un en-tête global (logo, menu, bouton) et un pied (adresse, horaires), appliqués à tout le site. Activez le sticky et testez le menu hamburger sur mobile. 30 minutes.
- Je crée un en-tête et un pied globaux.
- Je règle les conditions d'affichage.
- Je teste sticky et menu mobile.
Questions fréquentes
Le Theme Builder est-il gratuit ?
Non : c'est une fonctionnalité d'Elementor Pro. En Free, on ne peut pas concevoir d'en-tête/pied global ni de modèles de contenu avec Elementor.
À quoi servent les conditions d'affichage ?
À décider où un modèle s'applique : tout le site, uniquement certaines pages, un type de contenu, etc. Sans condition, le modèle ne s'affiche nulle part.
Qu'est-ce qu'un en-tête « sticky » ?
Un en-tête qui reste collé en haut de l'écran quand on fait défiler la page — pratique pour garder le menu et un bouton d'action toujours accessibles.
Le menuisier veut le même en-tête (logo, menu, bouton Devis) sur toutes ses pages, modifiable facilement. Que fait Nadia ?