La zone de contenu d'une page se met vite en forme avec Elementor. L'en-tête en revanche — logo, menu, numéro de téléphone, peut-être un bouton — appartient d'abord au thème. Vous ne pouvez l'adapter que dans la mesure où le thème le prévoit. Le Theme Builder fait tomber cette limite.
Ce dont le Theme Builder se charge
Avec lui, vous mettez en forme les zones qui se trouvent en dehors du contenu proprement dit : l'en-tête, le pied de page, la mise en page des articles, la vue d'ensemble du blog, les pages d'archive, la page 404 et, pour les boutiques, les pages produit.
Le principe est toujours le même : vous construisez un modèle, et vous définissez où il doit s'appliquer. C'est la seconde partie qui coince en pratique.
Le Theme Builder est une fonction de la version Pro.
Elementor Pro : pouvoir mettre en forme librement l'en-tête, le pied de page et les mises en page d'articles est la raison la plus fréquente du passage à Pro — davantage que les formulaires ou les popups. Découvrir Elementor Pro
Préparation : le bon thème
Si Elementor construit l'en-tête, le thème ne doit pas en fournir un second. Sinon vous vous retrouvez avec deux en-têtes superposés.
Le plus simple est un thème délibérément minimal comme Hello, conçu exactement pour cela : il n'apporte presque aucune mise en forme propre et laisse le champ à Elementor. Pour des thèmes plus fournis, cherchez dans leurs réglages une option permettant de désactiver leur propre en-tête. S'il n'y en a pas, c'est un indice que le thème et le Theme Builder vont se marcher dessus.
Créer un en-tête
Dans le menu WordPress, sous Modèles → Theme Builder, choisissez En-tête et créez un nouveau modèle. Elementor propose des blocs tout faits ; je construis le plus souvent à partir de zéro, parce que les variantes prêtes à l'emploi s'accordent rarement au reste.
Une structure solide ressemble à ceci : un conteneur, réglé en ligne flex, avec le logo à gauche et le menu à droite. L'alignement vertical sur « centré », la répartition horizontale sur « espace entre ». C'est la structure qui ne s'effondre pas non plus sur les écrans étroits.
Pour le menu, utilisez le widget Menu de navigation. Il s'appuie sur les menus que vous avez créés dans WordPress sous Apparence → Menus — créez donc le menu au préalable, sinon le widget reste vide.
L'étape que beaucoup oublient : les conditions d'affichage
Avant de publier, Elementor demande où le modèle doit s'appliquer. Cette question n'est pas une formalité.
Pour un en-tête valable partout, réglez la condition sur Tout le site. Si vous voulez au contraire un en-tête différent uniquement pour la page d'accueil, créez un second modèle et posez-y la condition plus spécifique. La règle la plus spécifique l'emporte sur la générale.
L'erreur la plus fréquente que je rencontre : modèle construit, publié, condition sautée — puis perplexité devant un site où rien n'a changé. Vous pouvez poser les conditions après coup à tout moment via le menu d'aperçu dans l'éditeur ou via la liste des modèles.
En-tête collant, proprement résolu
Un en-tête qui reste en haut pendant le défilement est l'une des demandes les plus fréquentes. Cela se règle dans le conteneur sous Avancé → Effets de mouvement → Collant : Haut.
Deux points sur lesquels ça coince typiquement :
L'en-tête disparaît derrière le contenu. Réglez sous Avancé un z-index suffisant, par exemple 999.
Le contenu sursaute au défilement. Cela arrive quand l'en-tête collant change de hauteur. Si vous voulez afficher un logo plus petit au défilement, travaillez avec les réglages d'effet et vérifiez le résultat sur téléphone — c'est là que le saut se remarque le plus.
Et une recommandation tirée de la pratique : sur téléphone, un en-tête collant prend de précieux pixels en hauteur. Je l'y désactive souvent. Les options de visibilité correspondantes se trouvent également sous Avancé ; ma manière générale de procéder sur mobile est décrite dans Optimiser Elementor pour le mobile.
Le pied de page
Le pied de page suit le même schéma, mais il est moins critique — pas de collant, pas de logique de menu. Faites attention à deux choses : les mentions légales et la politique de confidentialité doivent être accessibles depuis chaque page, et les colonnes doivent s'empiler proprement les unes sous les autres sur téléphone plutôt que d'être comprimées côte à côte.
Si quelque chose n'apparaît pas
Trois causes couvrent la plupart des cas : la condition d'affichage manque ; le thème fournit encore son propre en-tête ; ou une extension de cache retient l'ancienne version — videz le cache avant de chercher plus loin.
D'autres pièges typiques et leurs causes sont rassemblés dans Corriger les erreurs Elementor fréquentes.
Si vous préférez configurer le Theme Builder une bonne fois accompagné plutôt que de tâtonner à travers les conditions d'affichage : c'est exactement ce que nous faisons dans ma formation Elementor.
Tags