3.1Theme Builder : en-tête & pied de page
Le niveau 3 exploite Elementor PRO, à commencer par sa fonctionnalité phare : le THEME BUILDER (constructeur de thème). C'est ce qui transforme Elementor d'un constructeur de PAGES en constructeur de SITE COMPLET. Le principe : avec Elementor Free, on conçoit le CORPS des pages, mais l'EN-TÊTE (header) et le PIED DE PAGE (footer) — présents sur tout le site — viennent du THÈME et ne sont PAS éditables dans Elementor. Le Theme Builder (Pro) permet de CONCEVOIR VISUELLEMENT ces parties du thème dans Elementor : (1) l'EN-TÊTE (logo, menu de navigation, boutons…) ; (2) le PIED DE PAGE (informations, menus secondaires, mentions…) ; (3) et d'autres modèles de site (articles, archives — section 3-2). On crée ces éléments comme n'importe quelle page Elementor (conteneurs, widgets), puis on définit OÙ ils s'appliquent (conditions d'affichage). Ainsi, on maîtrise TOUT le design du site, pas seulement le contenu des pages.
Comment ça marche. (1) On accède au Theme Builder (menu Elementor → Theme Builder, ou depuis le tableau de bord). (2) On crée un modèle d'EN-TÊTE : on le construit visuellement (un conteneur avec logo à gauche, menu de navigation via le widget « Menu de navigation » Pro, un bouton…) ; on peut le rendre COLLANT (sticky, reste en haut au défilement), transparent, responsive (menu hamburger sur mobile). (3) On crée un modèle de PIED DE PAGE de la même façon. (4) On définit les CONDITIONS D'AFFICHAGE : « ce header s'applique à TOUT le site » (ou seulement à certaines pages/types). C'est puissant : un en-tête différent pour la page d'accueil, par exemple. (5) L'en-tête/pied conçus s'affichent alors sur tout le site (ou selon les conditions), à la place de ceux du thème. Points importants. (1) Le THEME BUILDER (Pro) permet de CONCEVOIR VISUELLEMENT l'EN-TÊTE, le PIED DE PAGE et d'autres modèles de site dans Elementor — ce que Free ne permet pas (en Free, ils viennent du thème). (2) C'est ce qui fait d'Elementor un constructeur de SITE COMPLET (maîtriser TOUT le design, pas seulement les pages). (3) On construit ces éléments comme des pages (conteneurs/widgets) puis on définit les CONDITIONS D'AFFICHAGE (où ils s'appliquent). (4) L'EN-TÊTE peut être COLLANT (sticky), transparent, responsive (hamburger sur mobile), avec un widget de MENU de navigation (Pro). (5) C'est LA raison principale de passer à Pro pour beaucoup d'utilisateurs. Maîtriser le Theme Builder (en-tête, pied) est l'entrée dans Elementor Pro : on passe de la conception de pages à celle du SITE ENTIER, avec un design cohérent et maîtrisé de bout en bout. Les modèles d'articles et d'archives (3-2) prolongent cette logique.
Vocabulaire de la section
- Theme Builder (Pro)
- La fonctionnalité phare d'Elementor Pro : concevoir VISUELLEMENT les parties du thème (en-tête, pied de page, modèles d'articles/d'archives) dans Elementor — ce que Free ne permet pas. Transforme Elementor en constructeur de SITE complet.
- En-tête (header)
- La partie haute présente sur tout le site (logo, menu de navigation, boutons). Avec le Theme Builder (Pro), on la conçoit dans Elementor ; en Free, elle vient du thème.
- Pied de page (footer)
- La partie basse présente sur tout le site (informations, menus secondaires, mentions). Conçue dans Elementor avec le Theme Builder (Pro).
- Conditions d'affichage
- Où un modèle (en-tête, pied…) s'applique : tout le site, ou seulement certaines pages/types de contenu. Permet, par exemple, un en-tête différent pour l'accueil.
- En-tête collant (sticky) & responsive
- L'en-tête peut être COLLANT (reste en haut au défilement), transparent, et responsive (menu hamburger sur mobile via le widget Menu de navigation Pro).
Que permet le Theme Builder d'Elementor Pro, et pourquoi est-il décisif ?
En pratique — Concevoir l'en-tête et le pied avec le Theme Builder
- Ouvrez le THEME BUILDER (Elementor → Theme Builder) et créez un modèle d'EN-TÊTE : construisez-le visuellement (logo, widget Menu de navigation, bouton) comme une page.
- Rendez l'en-tête COLLANT (sticky) si voulu, et responsive (menu hamburger sur mobile) ; créez de même un modèle de PIED DE PAGE.
- Définissez les CONDITIONS D'AFFICHAGE (ex. « tout le site », ou certaines pages) pour chaque modèle.
- Publiez : l'en-tête et le pied conçus s'affichent sur le site (selon les conditions), à la place de ceux du thème — vous maîtrisez tout le design.
Points clés à retenir
- Le THEME BUILDER (Pro) est la fonctionnalité PHARE : concevoir VISUELLEMENT l'EN-TÊTE, le PIED DE PAGE et d'autres modèles de site dans Elementor. En FREE, en-tête et pied viennent du THÈME (non éditables dans Elementor) — c'est LA raison principale de passer à Pro.
- Il transforme Elementor d'un constructeur de PAGES en constructeur de SITE COMPLET : on maîtrise TOUT le design (en-tête, pied, modèles), pas seulement le corps des pages.
- On construit ces éléments comme des pages (conteneurs/widgets) puis on définit les CONDITIONS D'AFFICHAGE (où ils s'appliquent : tout le site, certaines pages…) — permet par ex. un en-tête différent pour l'accueil.
- L'EN-TÊTE peut être COLLANT (sticky, reste en haut au défilement), transparent, et responsive (menu HAMBURGER sur mobile via le widget Menu de navigation Pro). Le Theme Builder est l'entrée dans la conception du SITE ENTIER.
Questions fréquentes
Pourquoi le Theme Builder est-il la raison principale de passer à Elementor Pro ?
Le Theme Builder est souvent LE déclencheur du passage à Pro parce qu'il permet de concevoir l'EN-TÊTE, le PIED DE PAGE et les modèles du site dans Elementor — ce que Free ne permet pas —, donnant la maîtrise de TOUT le design, pas seulement du corps des pages. La limite d'Elementor FREE : (1) Avec Free, on conçoit le CORPS (le contenu) des pages avec l'éditeur visuel. (2) MAIS l'EN-TÊTE (logo, menu, présent en haut de tout le site) et le PIED DE PAGE (bas de site) viennent du THÈME et ne sont PAS éditables dans Elementor. On dépend des options (souvent limitées) du thème pour ces parties. (3) De même, l'apparence des ARTICLES de blog et des pages d'ARCHIVES (listes d'articles) est gérée par le thème, pas par Elementor. (4) Résultat : en Free, on ne maîtrise qu'une partie du design (les pages), pas l'ensemble du site (en-tête, pied, articles). Ce que le THEME BUILDER (Pro) débloque : (1) Concevoir l'EN-TÊTE dans Elementor : créer visuellement son propre en-tête (logo, menu de navigation, boutons, disposition), le rendre collant/transparent/responsive — au lieu de subir celui du thème. (2) Concevoir le PIED DE PAGE de même. (3) Concevoir les MODÈLES d'ARTICLES et d'ARCHIVES (single/archive — niveau 3-2) : maîtriser l'apparence de tous les articles de blog, des listes, etc. (4) Définir OÙ chaque modèle s'applique (conditions). (5) En somme, maîtriser TOUT le design du site de bout en bout, dans Elementor, de façon cohérente. Pourquoi c'est LE déclencheur : (1) La maîtrise de l'EN-TÊTE et du PIED est souvent INDISPENSABLE. Un en-tête et un pied sur mesure (design, menu, logo, cohérents avec le site) sont essentiels à un site professionnel. Ne pas pouvoir les concevoir dans Elementor (Free) est très frustrant et limite fortement — d'où le passage à Pro pour beaucoup. (2) La COHÉRENCE de design. Concevoir en-tête, pied, pages et articles dans le même outil (Elementor) garantit un design homogène et maîtrisé — impossible en Free (où le thème gère une partie). (3) Un vrai SITE COMPLET. Le Theme Builder fait passer d'un « constructeur de pages » (Free) à un « constructeur de site » (Pro) — on ne construit plus des pages isolées mais l'ensemble du site. (4) Pour un blog ou un site de contenu, maîtriser les modèles d'articles/archives (Pro) est également décisif. Les autres raisons de passer à Pro (complémentaires) : widgets Pro (formulaires, posts…), pop-ups, contenu dynamique, Loop Builder, WooCommerce Builder. Mais le Theme Builder est souvent le premier et principal motif. Comment décider : (1) Si un site vitrine SIMPLE vous suffit et que l'en-tête/pied du thème conviennent → Free peut suffire. (2) Dès que vous voulez un EN-TÊTE et un PIED SUR MESURE (design maîtrisé), un blog au design personnalisé, ou un site complet cohérent → le Theme Builder (Pro) devient nécessaire. C'est le besoin le plus fréquent qui justifie Pro. En résumé : le Theme Builder est la raison principale de passer à Elementor Pro parce qu'il permet de CONCEVOIR l'EN-TÊTE, le PIED DE PAGE et les modèles d'ARTICLES/ARCHIVES du site DANS Elementor — ce que Free ne permet pas (en Free, ces parties viennent du thème et ne sont pas éditables dans Elementor). Il donne ainsi la maîtrise de TOUT le design du site (de bout en bout, de façon cohérente), transformant Elementor d'un constructeur de PAGES en constructeur de SITE COMPLET. Or maîtriser l'en-tête et le pied sur mesure est souvent indispensable à un site professionnel : c'est le besoin le plus fréquent qui déclenche le passage à Pro. Les autres fonctions Pro (widgets, pop-ups, dynamique, WooCommerce) s'ajoutent, mais le Theme Builder est généralement le motif décisif. Si vous voulez un en-tête/pied personnalisés et un site complet cohérent, Pro (et son Theme Builder) devient nécessaire.
Comment concevoir un en-tête professionnel (logo, menu, sticky) avec le Theme Builder ?
Concevoir un en-tête professionnel avec le Theme Builder consiste à le construire visuellement (logo + menu + éventuels boutons dans un conteneur), à le rendre collant et responsive, et à définir où il s'applique — pour un en-tête sur mesure, cohérent et fonctionnel. La démarche : (1) Ouvrez le THEME BUILDER (Elementor → Theme Builder) et créez un nouveau modèle d'EN-TÊTE (Header). Vous éditez alors l'en-tête comme une page Elementor. (2) Construisez la STRUCTURE : généralement un CONTENEUR en direction « rangée » (horizontal), avec les éléments alignés (logo à gauche, menu au centre/à droite, éventuel bouton à droite). Flexbox gère l'alignement (justify space-between pour espacer logo et menu, align center pour centrer verticalement). (3) Ajoutez le LOGO : le widget « Logo du site » (affiche le logo défini dans l'identité du site — Site Settings) ou une image, avec un lien vers l'accueil. (4) Ajoutez le MENU de navigation : le widget « Menu de navigation » (Nav Menu, Pro) qui affiche un menu WordPress — stylisez-le (couleurs, espacement, effets de survol, sous-menus déroulants). (5) Ajoutez d'éventuels éléments : un bouton d'appel à l'action, une icône de recherche, des coordonnées. Rendre l'en-tête PROFESSIONNEL et fonctionnel : (1) COLLANT (sticky) : configurez l'en-tête pour qu'il RESTE en haut de l'écran au défilement (effets de mouvement / sticky) — pratique (le menu toujours accessible) et courant sur les sites pro. On peut réduire sa taille au défilement (effet « shrink »). (2) TRANSPARENT (optionnel) : un en-tête transparent superposé au contenu du haut (héros) — élégant, à condition d'assurer la lisibilité (texte contrasté). (3) RESPONSIVE (essentiel) : sur mobile, le menu doit passer en HAMBURGER (icône déroulante). Le widget Menu de navigation Pro gère cela (point de bascule, style du menu mobile). Vérifiez le rendu mobile (logo, hamburger, boutons). (4) Soignez l'ESPACEMENT et l'alignement (un en-tête équilibré, aéré). Définir OÙ il s'applique : (1) Conditions d'affichage : indiquez que cet en-tête s'applique à « TOUT le site » (le cas courant), ou seulement à certaines pages/types (ex. un en-tête spécial pour l'accueil). (2) Publiez : l'en-tête s'affiche alors sur le site selon les conditions, remplaçant celui du thème. Les bonnes pratiques : (1) COHÉRENCE : utilisez vos couleurs/polices GLOBALES (identité du site). (2) MENU clair (pas surchargé), sous-menus si besoin. (3) STICKY pour garder la navigation accessible (courant, apprécié). (4) RESPONSIVE soigné (hamburger lisible, cibles tactiles). (5) LISIBILITÉ (surtout si transparent). (6) Un éventuel APPEL À L'ACTION dans l'en-tête (bouton « Contact », « Devis »). (7) PERFORMANCE (en-tête léger). Les pièges : (1) Menu surchargé ou mal aligné. (2) En-tête non responsive (pas de hamburger → illisible sur mobile). (3) En-tête transparent sans contraste (menu illisible sur le contenu). (4) Oublier de définir les conditions (l'en-tête ne s'applique pas). (5) En-tête trop lourd (performance). En résumé : concevez un en-tête professionnel avec le Theme Builder en créant un modèle d'EN-TÊTE que vous construisez visuellement — un CONTENEUR « rangée » avec le LOGO (widget Logo du site), le MENU (widget Menu de navigation Pro, stylisé) et d'éventuels boutons/éléments, bien alignés via Flexbox. Rendez-le COLLANT (sticky, reste en haut au défilement — pratique et pro), éventuellement TRANSPARENT (avec lisibilité assurée), et surtout RESPONSIVE (menu HAMBURGER sur mobile). Utilisez vos couleurs/polices GLOBALES pour la cohérence, gardez le menu clair, soignez l'espacement, ajoutez un appel à l'action si pertinent. Enfin, définissez les CONDITIONS D'AFFICHAGE (tout le site, ou certaines pages) et publiez : l'en-tête remplace celui du thème. Vérifiez le rendu mobile et la performance. Le Theme Builder vous donne un en-tête sur mesure, cohérent et fonctionnel — un marqueur essentiel d'un site professionnel, impossible à obtenir avec Elementor Free.