Theme Builder Elementor Pro : créer header, footer et templates globaux

Qu’est-ce que le Theme Builder Elementor Pro ?

Le Theme Builder est la fonctionnalité la plus puissante d’Elementor Pro. Il permet de créer visuellement, sans écrire une ligne de code, tous les éléments globaux d’un site WordPress : l’en-tête (header), le pied de page (footer), les templates d’articles, les pages d’archive, les pages WooCommerce. C’est la fonctionnalité qui transforme Elementor Pro d’un simple page builder en véritable constructeur de thème complet.

Les types de templates disponibles dans le Theme Builder

Header (en-tête)

Créez un header sur mesure avec logo, menu de navigation, bouton CTA, barre de recherche, icône panier WooCommerce, et même un mega menu avec JetMenu. Le header peut être sticky (reste visible au scroll), transparent sur la page d’accueil, ou différent selon la section du site. Chaque comportement est configurable sans CSS.

Footer (pied de page)

Designez un footer avec colonnes, liens utiles, réseaux sociaux, formulaire newsletter intégré, et mentions légales. Comme le header, le footer peut varier selon le type de page grâce au système de conditions d’affichage.

Single Post (template d’article)

Créez une mise en page unique pour vos articles de blog : positionnement du titre, de l’image à la une, de la biographie auteur, des articles liés, et des boutons de partage. Les Dynamic Tags injectent automatiquement les données réelles de chaque article dans votre template — un seul template sert pour tous vos articles.

Archive (page de liste)

Personnalisez la mise en page de vos listes d’articles par catégorie, tag ou auteur. Utilisez le Loop Grid pour afficher les articles avec votre mise en page sur mesure, et les Dynamic Tags pour afficher le titre et la description de l’archive courante.

WooCommerce Builder intégré

Le Theme Builder couvre également toutes les pages WooCommerce : page boutique, fiche produit, panier, tunnel de paiement, confirmation de commande, et page « Mon compte ». Chaque template est modifiable visuellement avec les Dynamic Tags WooCommerce (prix, galerie, bouton panier, stock, avis).

Le système de conditions : la clé de la flexibilité

Chaque template peut être assigné selon des conditions précises :

  • Global : s’applique à l’ensemble du site
  • Par type : uniquement sur les articles, les pages, ou les produits WooCommerce
  • Par taxonomie : uniquement sur la catégorie « Blog » ou le tag « Actualité »
  • Par page spécifique : uniquement sur la page d’accueil ou une page donnée
  • Par rôle utilisateur : un header différent pour les clients connectés

En pratique, vous pouvez avoir un header transparent sur la home, un header coloré sur les pages intérieures, et un header minimaliste sur les pages de checkout — sans une seule ligne de code PHP.

Comment créer un header avec le Theme Builder — pas à pas

  1. Dans le menu WordPress, allez dans Templates → Theme Builder
  2. Cliquez sur « Header » puis sur « Ajouter nouveau »
  3. Choisissez un template de démarrage ou commencez de zéro
  4. Designez votre header avec les widgets Elementor Pro (Logo, Menu de navigation, Bouton…)
  5. Cliquez sur « Publier » puis définissez les conditions d’affichage (ex : « Tout le site »)
  6. Validez — votre header s’affiche immédiatement sur tout le site

Header sticky : comment le configurer

Pour rendre votre header sticky (fixe au scroll), sélectionnez la section du header dans l’éditeur Elementor, allez dans Avancé → Effets de mouvement → Sticky et sélectionnez « Haut ». Vous pouvez configurer un délai avant activation, une durée, et même un style différent une fois le header sticky activé (couleur de fond qui apparaît au scroll).

Mes bonnes pratiques après 150+ projets

Créez d’abord le Design System global (couleurs et typographies) avant de designer le header — vous n’aurez pas à refaire les styles manuellement. Utilisez un Container Flexbox pour le header, pas les anciennes sections/colonnes. Le layout est plus propre et les performances meilleures. Testez sur mobile en premier — le menu hamburger nécessite souvent des ajustements spécifiques. Elementor Pro propose des breakpoints tablette et mobile indépendants pour un contrôle total.

→ Retour au guide complet Elementor Pro

FAQ — Theme Builder Elementor Pro

Le Theme Builder Elementor Pro remplace-t-il complètement le thème WordPress ?

Pas exactement. Le Theme Builder permet de designer le header, le footer, et les templates de pages, mais un thème WordPress reste techniquement nécessaire comme « wrapper » HTML. C’est pourquoi j’utilise Hello Elementor : il est si léger (5 Ko de CSS, 0 JS) qu’il est invisible en termes de design, laissant Elementor Pro gérer tout l’aspect visuel sans surcharge.

Peut-on avoir plusieurs headers différents selon les pages ?

Oui, c’est l’un des grands avantages du Theme Builder. Vous pouvez créer autant de headers que nécessaire et définir des conditions d’affichage précises : ce header uniquement sur les pages de la catégorie « Blog », ce footer uniquement sur les pages WooCommerce, cet autre header sur la page d’accueil. Les conditions d’affichage sont très granulaires et combinables.

Le Theme Builder fonctionne-t-il avec les archives WordPress (catégories, tags) ?

Oui. Le Theme Builder permet de créer des templates pour tous les types d’archives WordPress : archives de catégories, archives de tags, archives de Custom Post Types, archives d’auteurs, et archives de dates. Chaque template utilise les Dynamic Tags pour afficher le titre de l’archive et le Loop Grid pour afficher les articles correspondants.

Peut-on utiliser le Theme Builder pour créer un site multilingue ?

Oui. Le Theme Builder est compatible avec WPML et Polylang. Vous créez vos templates dans la langue principale, puis WPML ou Polylang gère la traduction du contenu dynamique. Les textes statiques dans les templates (ex : « Rechercher », « Accueil ») doivent être traduits dans WPML String Translation ou Polylang. Cette compatibilité est bien documentée et stable.

Comment prévisualiser un template du Theme Builder avant de le publier ?

Depuis l’interface du Theme Builder (Elementor → Theme Builder), chaque template a un bouton « Preview » qui ouvre une prévisualisation avec un contenu réel de votre site (un article existant pour un template Single Post, une page pour un template Page, etc.). Vous pouvez changer l’élément prévisualisé en cliquant sur la flèche à côté du sélecteur dans la barre d’aperçu en bas de l’éditeur.

Autres ressources Elementor

Theme Builder Elementor Pro (2026) : Le Guide Ultime pour Structurer un Site Professionnel

Plus de 140 missions sur Malt Présentation générale d’Elementor Pro Elementor Pro s’est imposé comme la solution de création de sites WordPress la plus complète...

Données structurées Schema.org sur Elementor : comment les implémenter

Comment implémenter les données structurées Schema.org sur un site Elementor Pro ? Rank Math, JSON-LD, types de schema et vérification avec Google....

JetWooBuilder : personnaliser WooCommerce avec Elementor et JetEngine

JetWooBuilder permet de personnaliser chaque page WooCommerce avec Elementor : fiche produit, page boutique, panier, checkout. Guide complet....

Loop Grid Elementor Pro : créer des listes dynamiques sans coder

Le Loop Grid Elementor Pro permet de créer des listes dynamiques (blog, portfolio, catalogue, équipe) sans coder. Guide complet avec cas d'usage par un expert....

Site internet pour artisan avec Elementor Pro

Créer un site web pour artisan avec Elementor Pro : SEO local, galerie de réalisations, devis en ligne. Guide complet et conseils d'expert....

Score PageSpeed 90+ sur mobile avec Elementor : checklist complète

La checklist complète pour atteindre 90+ mobile sur PageSpeed avec Elementor Pro : structure, cache, images, hébergement, CDN. Validée sur 150+ projets....