Header Elementor qui ne s’affiche pas : 7 causes et la réparation pas à pas 🔧

Vous avez créé un en-tête (le « header » : la bande du haut avec le logo et le menu) dans le Theme Builder d’Elementor Pro. Dans l’éditeur, tout est parfait, mais sur le site c’est l’ancien en-tête du thème qui apparaît, ou plus rien du tout, ou l’en-tête manque sur certaines pages ou sur mobile. Voici la méthode que nous suivons en intervention ; si vous préférez ne pas toucher à votre site en production, notre équipe peut s’en charger dans le cadre d’une réparation WordPress.

Pourquoi le header Elementor ne s’affiche-t-il pas sur le site ?

Le header Elementor ne s’affiche pas parce qu’Elementor Pro n’a aucune raison de l’afficher sur la page visitée (condition, statut, mise en page) ou parce qu’il en est empêché (cache, thème, extension). Voici les causes, de la plus fréquente à la plus rare :

1. Aucune condition d’affichage, ou une condition trop étroite : dans le Theme Builder, le modèle n’indique pas « Tout le site » (« Entire Site »).
2. Le modèle n’est pas publié : un brouillon ou un modèle privé n’apparaît pas sur le site public.
3. La page utilise la mise en page « Elementor Canevas », qui masque volontairement en-tête et pied de page : la panne ne touche alors qu’une ou quelques pages.
4. Un masquage responsive : l’en-tête est présent sur ordinateur et absent sur téléphone.
5. Un cache qui sert une ancienne version (cache CSS d’Elementor, extension de cache, hébergeur, CDN) : tout est correct en navigation privée ou une fois connecté, mais pas pour les visiteurs.
6. Un thème peu compatible ou mal réglé : thème « à blocs » non pris en charge par le Theme Builder, thème qui n’appelle pas correctement l’en-tête, ou Hello Elementor dont l’en-tête est désactivé sans modèle pour prendre le relais.
7. Elementor Pro désactivé ou en conflit : le Theme Builder est une fonction d’Elementor Pro, et une désactivation (erreur fatale, mise à jour ratée) ou une autre extension qui gère l’en-tête suffit à faire disparaître vos modèles.

Comment savoir en 30 secondes si le header est absent ou simplement invisible ?

Le code source de la page indique tout de suite si Elementor a produit l’en-tête, donc dans quelle direction chercher. Ouvrez la page en navigation privée, affichez le code source (Ctrl+U sur Windows, Cmd+Option+U sur Mac) et cherchez (Ctrl+F) ce texte :

data-elementor-type="header"

• Le texte est présent : l’en-tête est généré mais masqué ou mal stylé (étapes 4, 5 et 8).
• Le texte est absent : Elementor n’a pas inséré l’en-tête (étapes 1, 2, 3, 6 et 7).

Faites le même test avec data-elementor-type="footer" si c’est le pied de page qui manque.

Comment réparer un header Elementor qui ne s’affiche pas, étape par étape ?

Avant toute manipulation, faites une sauvegarde complète des fichiers et de la base de données. Les étapes 1 à 5 sont sans risque ; les suivantes se testent idéalement sur une copie de préproduction.

1. Vérifiez les conditions d’affichage du modèle

Ouvrez Modèles > Créateur de thème (dans les versions récentes, le menu est Elementor > Theme Builder), puis cliquez sur votre modèle d’en-tête. Ouvrez la fenêtre des conditions (« Modifier les conditions », « Edit Conditions » en anglais) et vérifiez :

• qu’une ligne Inclure > Tout le site existe pour un en-tête global ;
• qu’aucune ligne Exclure ne retire justement la page concernée (page d’accueil, articles, produits WooCommerce…) ;
• qu’aucun avertissement de conflit ne signale un autre modèle d’en-tête visant les mêmes pages.

Enregistrez, puis rechargez la page publique en navigation privée.

2. Contrôlez que le modèle est bien publié

Dans l’éditeur du modèle, si le bouton en haut à droite affiche « Publier », le modèle est un brouillon : cliquez dessus. S’il affiche « Mettre à jour » ou est grisé, il est déjà publié. Vérifiez aussi qu’il n’est ni « Privé » ni dans la corbeille.

3. Vérifiez la mise en page de la page concernée

Si l’en-tête manque sur une seule page, ouvrez-la dans Elementor, puis les réglages de la page : si la « Mise en page » est sur Elementor Canevas, passez-la sur Par défaut ou Elementor pleine largeur et mettez à jour.

4. Regardez le masquage sur mobile et tablette

Si l’en-tête disparaît uniquement sur téléphone ou tablette, ouvrez le modèle d’en-tête, sélectionnez le conteneur principal, puis l’onglet Avancé > Responsive. Les options « Masquer sur ordinateur », « Masquer sur tablette » et « Masquer sur mobile » doivent être désactivées pour les appareils où l’en-tête doit apparaître. Vérifiez aussi les sous-conteneurs : un en-tête « mobile » distinct a parfois été supprimé alors que l’en-tête « ordinateur » reste masqué sur mobile.

5. Videz le cache d’Elementor et régénérez les conditions

Elementor stocke le style des modèles dans des fichiers CSS et garde en cache la liste des conditions. Dans Elementor > Outils (Elementor > Editor > Tools dans les versions récentes), section du cache, cliquez sur « Clear Files & Data » (le libellé varie selon la traduction). Avec WP-CLI, l’outil en ligne de commande de WordPress accessible en SSH chez la plupart des hébergeurs, la première commande régénère le CSS et la seconde le cache des conditions du Theme Builder (documentation Elementor) :

wp elementor flush-css
wp elementor-pro theme-builder clear-conditions

Videz ensuite le cache de votre extension (WP Rocket, LiteSpeed Cache…), de l’hébergeur et du CDN, puis testez en navigation privée. Notre guide sur les modifications Elementor qui ne s’affichent pas détaille chaque niveau de cache.

6. Vérifiez qu’Elementor Pro est actif et à jour

Dans Extensions > Extensions installées, Elementor et Elementor Pro doivent être activés tous les deux, sans bandeau signalant une version incompatible. En WP-CLI :

wp plugin list --fields=name,status,version | grep elementor

Si Elementor Pro apparaît en inactive, réactivez-le (wp plugin activate elementor-pro). S’il provoque une erreur critique, ne forcez pas : lisez le message exact (étape 8) et consultez notre fiche sur l’erreur critique WordPress.

7. Testez le thème et les conflits d’extensions

Avec Hello Elementor, dans le menu Hello, onglet « Structure and layout », l’option « Désactiver l’en-tête et le pied de page du thème » ne doit être activée que si vos modèles Elementor ont bien une condition. Notre article sur les pannes courantes du thème Hello Elementor couvre aussi le cas de l’en-tête en double.

Avec un autre thème, vérifiez d’abord qu’il ne s’agit pas d’un thème à blocs, que le Theme Builder ne prend pas en charge. Pour un thème classique, Elementor recommande de créer à la fois l’en-tête et le pied de page : beaucoup de thèmes ouvrent une balise dans l’en-tête et la ferment dans le pied de page, et remplacer l’un sans l’autre peut casser la page. Pour garder le pied de page du thème, il faut déclarer les emplacements Elementor dans le functions.php de votre thème enfant :

function theme_prefix_register_elementor_locations( $elementor_theme_manager ) {
	$elementor_theme_manager->register_location( 'header' );
	$elementor_theme_manager->register_location( 'footer' );
}
add_action( 'elementor/theme/register_locations', 'theme_prefix_register_elementor_locations' );

Puis, dans le gabarit qui imprime l’en-tête, laisser Elementor prendre la main quand un modèle existe (remplacez template-parts/header par le gabarit réel du thème) :

if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) {
	get_template_part( 'template-parts/header' );
}

Pour écarter un conflit, désactivez sur une préproduction tout ce qui n’est pas Elementor, puis réactivez une par une :

wp plugin deactivate --all --exclude=elementor,elementor-pro

Les suspects habituels : les extensions qui gèrent elles aussi un en-tête, celles qui retardent ou combinent le JavaScript et le CSS, et les extensions multilingues qui attribuent le modèle à une seule langue.

8. Lisez les erreurs PHP et JavaScript

Si rien de ce qui précède ne règle la panne, activez le journal de débogage de WordPress en ajoutant ces lignes dans wp-config.php, juste avant la ligne /* That's all, stop editing! */ :

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Rechargez la page et ouvrez wp-content/debug.log : une erreur fatale qui mentionne elementor-pro, le thème ou une extension désigne le coupable. Dans le navigateur, l’onglet Console des outils de développement (F12) révèle les erreurs JavaScript qui bloquent un menu ou un en-tête « collant ». Repassez WP_DEBUG à false ensuite.

Que faire si le header a disparu juste après une mise à jour ?

Si l’en-tête a disparu juste après une mise à jour d’Elementor, d’Elementor Pro ou du thème, commencez par les étapes 5 et 6 : un cache CSS périmé ou un écart de version entre Elementor et Elementor Pro explique la plupart de ces cas. Sinon, le retour à une version antérieure proposé dans les outils d’Elementor (« Version Control ») dépanne le temps qu’un correctif sorte. Notre article sur les mises à jour qui cassent un site WordPress explique comment revenir en arrière proprement.

Pour une mise en page cassée après une mise à jour du thème ou du constructeur, nos durées indicatives prévoient en général 1 à 2 heures, soit 70 à 140 € TTC au tarif normal.

Comment éviter que le header Elementor disparaisse à nouveau ?

Le plus efficace est de garder un seul modèle d’en-tête par zone, avec des conditions simples :

• nommez clairement vos modèles et notez leurs conditions ;
• mettez à jour Elementor et Elementor Pro ensemble, après une sauvegarde, puis videz le cache ;
• après une migration ou une restauration, régénérez le CSS et le cache des conditions ;
• confiez les mises à jour à une maintenance WordPress si vous n’avez pas le temps de vérifier le site après chacune d’elles.

Quand faut-il faire appel à un professionnel ?

Faites appel à un professionnel dès que la panne touche au code du thème, qu’Elementor Pro provoque une erreur critique à l’activation, que d’autres éléments ont disparu en même temps (menus, styles, pages entières) ou que vous n’avez pas de copie de préproduction pour tester sans déranger vos visiteurs.