Affichage conditionnel Elementor Pro : personnaliser selon le profil utilisateur
L’affichage conditionnel (« Visibilité ») d’Elementor Pro permet de masquer ou d’afficher n’importe quel élément de votre design — Container, Section, Colonne, ou Widget individuel — selon des conditions précises. C’est une fonctionnalité qui transforme un site statique en une expérience personnalisée : un visiteur non-connecté voit un bouton « Se connecter », un membre connecté voit son nom et un lien vers son compte, un administrateur voit les outils de gestion. Tout cela sans une ligne de code.
Comment configurer la visibilité d’un élément
Pour configurer la visibilité d’un élément dans Elementor Pro : sélectionnez l’élément (widget, Container, ou Section), allez dans l’onglet « Avancé » dans la sidebar, déroulez la section « Réglages de visibilité ». Activez « Afficher les règles de condition » et ajoutez une ou plusieurs conditions. L’élément sera affiché uniquement si les conditions sont satisfaites. Les règles sont visibles dans l’éditeur mais leur comportement s’applique uniquement sur le front-end.
Les conditions d’affichage disponibles
Elementor Pro propose plusieurs catégories de conditions : Authentification (utilisateur connecté ou non, rôle spécifique), Type d’appareil (desktop, tablette, mobile), Heure et date (afficher uniquement pendant une période ou un horaire spécifique), Paramètre d’URL (afficher uniquement si un paramètre GET est présent), et Valeur de méta-champ (via JetEngine Display Conditions — afficher si un champ ACF ou JetEngine a une valeur spécifique). Chaque condition peut être inversée (afficher si la condition est FAUSSE).
Combinaison AND / OR avec JetEngine
Le système de conditions natif d’Elementor Pro utilise une logique OR : l’élément s’affiche si au moins une condition est vraie. Pour une logique AND (toutes les conditions doivent être vraies simultanément), JetEngine Display Conditions est la solution. Ce module de JetEngine s’intègre à l’éditeur Elementor et ajoute des conditions combinées : « Utilisateur connecté » ET « A le rôle Abonné » ET « A acheté le produit X ». C’est la base des espaces membres et des contenus réservés.
Cas d’usage concrets
Exemples réels que j’implémente sur mes projets : (1) E-commerce : bouton « Ajouter au panier » visible pour les non-connectés, bouton « Ajouter à ma liste » visible pour les membres. (2) Formation en ligne : le contenu du cours masqué pour les non-inscrits, avec un bloc d’appel à l’action visible à leur place. (3) Site membre : section « Bienvenue [prénom] » visible uniquement pour les connectés avec Dynamic Tag pour le prénom. (4) Promotion limitée : bandeau promo affiché uniquement entre deux dates spécifiques.
Impact SEO de l’affichage conditionnel
Un point crucial à comprendre : l’affichage conditionnel d’Elementor Pro fonctionne côté client (JavaScript). Les éléments masqués restent dans le code HTML de la page — ils sont invisibles visuellement mais présents dans le DOM. Google peut donc les voir et les indexer. Si vous avez du contenu important pour le SEO que vous voulez cacher à certains utilisateurs mais pas à Google, cette approche est correcte. Si vous voulez que Google ne voie pas ce contenu, utilisez des conditions côté serveur via JetEngine (elément non rendu dans le HTML).
Conditions basées sur les méta-champs : un usage avancé
Avec JetEngine Display Conditions, vous pouvez afficher des éléments selon la valeur d’un méta-champ. Exemples : afficher un bouton « Télécharger » uniquement si le méta-champ « fichier_pdf » n’est pas vide (et utiliser un Dynamic Tag pour le lien), afficher une badge « Nouveau » uniquement si la date de publication est inférieure à 30 jours, ou afficher une section « Produit en rupture » uniquement si le stock WooCommerce est à zéro. Ces combinaisons Affichage conditionnel + Dynamic Tags sont la puissance maximale d’Elementor Pro.
→ Retour au guide complet Elementor Pro
FAQ — Affichage Conditionnel Elementor Pro
L’affichage conditionnel fonctionne-t-il sur les widgets ou uniquement sur les sections ?
L’affichage conditionnel fonctionne sur tous les niveaux : Containers, Sections, Colonnes, et Widgets individuels. Vous pouvez masquer/afficher n’importe quel élément selon des conditions. La granularité au niveau widget est particulièrement puissante — vous pouvez par exemple masquer un bouton « Ajouter au panier » pour les utilisateurs non-connectés et afficher un bouton « Se connecter » à la place, sur la même fiche produit.
Peut-on combiner plusieurs conditions d’affichage en AND / OR ?
Oui. Le système natif d’Elementor Pro utilise une logique OR (l’élément s’affiche si au moins une condition est vraie). Pour une logique AND (toutes les conditions doivent être vraies), utilisez JetEngine Display Conditions — un module qui étend les conditions avec une logique AND/OR configurable et des conditions basées sur les méta-champs.
L’affichage conditionnel impacte-t-il le SEO — les éléments masqués sont-ils indexés ?
Oui, si l’élément est masqué via CSS/JS côté client (comportement par défaut d’Elementor), Google peut quand même l’indexer car il est présent dans le DOM HTML. Pour que Google ne voie pas le contenu, il faut utiliser des conditions côté serveur via JetEngine (l’élément n’est pas rendu du tout dans le HTML).
Peut-on afficher un élément uniquement aux administrateurs WordPress pour les tests ?
Oui. Dans les conditions de visibilité Elementor Pro, choisissez « Rôle utilisateur » → « Administrateur ». L’élément n’est visible que pour les utilisateurs connectés avec le rôle administrateur — invisible pour tous les autres visiteurs. Pratique pour afficher des bandeaux de test, des indicateurs de staging, ou des outils de développement directement sur le front-end sans les cacher avec display:none en CSS.
L’affichage conditionnel fonctionne-t-il en combinaison avec les Dynamic Tags ?
Oui, et c’est une combinaison particulièrement puissante. Exemple : affichez un bouton « Télécharger » uniquement si un méta-champ « fichier_pdf » n’est pas vide (condition basée sur une valeur de méta-champ via JetEngine Display Conditions), et utilisez un Dynamic Tag pour que le lien du bouton pointe vers la valeur de ce méta-champ. Le résultat : un bouton de téléchargement qui apparaît automatiquement quand un PDF est joint, et se cache sinon. Tout sans PHP.