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 coder, 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, et toutes les pages WooCommerce. C’est la fonctionnalité qui transforme Elementor Pro d’un simple page builder en véritable constructeur de thème.
Les types de templates disponibles
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 menu mega 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.
Footer (pied de page)
Designez un footer avec colonnes, liens utiles, réseaux sociaux, formulaire newsletter, et mentions légales. Comme le header, le footer peut varier selon le type de page grâce au système de conditions.
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 de chaque article dans votre template.
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.
WooCommerce Builder
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 editable visuellement avec les Dynamic Tags WooCommerce.
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
- Dans le menu WordPress, allez dans Templates → Theme Builder
- Cliquez sur « Header » puis sur « Ajouter nouveau »
- Choisissez un template de démarrage ou commencez de zéro
- Designez votre header avec les widgets Elementor Pro (Logo, Menu de navigation, Bouton…)
- Cliquez sur « Publier » puis définissez les conditions d’affichage (ex: « Tout le site »)
- 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, une durée, et même un style différent une fois le header sticky activé (via le mode Sticky dans le Design).
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 un breakpoint tablet et mobile indépendants.