Dites que votre magasin ferme à 18 h et que vous voulez que le bouton “Order Now” se transforme en une “Nous sommes fermés, de retour à 9 h (heure) après les heures d'ouverture Ou le tableau des prix indique un prix aux visiteurs déconnectés et un autre aux membres Vous pourriez construire deux pages et les échanger à la main Personne ne veut faire ça deux fois par jour.
L'affichage conditionnel de l'élémenteur le corrige : construisez les deux versions sur la même page, puis joignez une règle à chacune d'elles qui décide qui le voit et quand. Le Extension Conditions d'affichage dans Master Addons ajoute ceci à chaque élément Elementor, gratuit, pas de code.
Ci-dessous : chaque type de condition, comment se comporte réellement la logique ET/OU, le seul paramètre qui mord tranquillement les gens (Html de sortie) et où cette approche est à court de route.
Ce que fait réellement l'affichage conditionnel
Chaque élément Elementor, qu'il s'agisse d'un conteneur, d'un widget ou d'une colonne, récupère un Conditions d'affichage panneau dans son Avancé onglet. Allumez-le et vous pouvez joindre des règles Les pass visiteurs voient l'élément Le visiteur échoue, il est parti.
Chaque règle se lit comme une phrase en trois parties : ce qu'il faut vérifier, un opérateur (Est ou N'est pas), et une valeur.“Login Status est Connecté.” “Browser n'est pas Safari.” C'est tout le modèle Tout ci-dessous est une variante de celui-ci.
Allumez d'abord l'extension
Conditions d'affichage est livré avec Master Addons mais n'est pas actif dès la sortie de la boîte Aller à Modules complémentaires principaux > Paramètres > Extensions(en), trouvez-le sous le groupe Dynamic Widgets, activez-le, enregistrez.
Ignorez ça et le panneau Conditions d'affichage n'apparaît jamais dans l'onglet Avancé, qui est de loin le message de “it's not working” le plus courant que nous obtenons Si vous n'avez pas encore le plugin, installez Master Addons gratuitement à partir de WordPress.org.
Le réglage Affichage sur : toutes les conditions vs n'importe quelle condition
Activez les conditions d'affichage sur un élément et vous obtenez un Affichage sur dropdown avec deux choix Le fait de choisir le mauvais est la raison la plus courante pour laquelle une règle n'“ fonctionne pas.”
Toutes conditions remplies est ET logique, donc chaque règle doit passer. Toute condition remplie est-ce que la logique OU, donc une règle de passage suffit.
Voici ce que cela signifie en pratique Dites que vous avez défini deux conditions :“Browser is Chrome” et “User Role is Administrator.”
Sur Toutes conditions remplies[traduction], seul un administrateur qui navigue dans Chrome voit l'élément Ce même administrateur sur Firefox ne voit rien.
Sur Toute condition remplie[TRADUCTION] ?Tout visiteur de Chrome le voit, et tout administrateur de n'importe quel navigateur aussi C'est un public beaucoup plus important que ce que la plupart des gens ont en tête lorsqu'ils ajoutent une deuxième règle.
Donc, si un élément est montré aux gens, il ne devrait pas, vérifiez cette liste déroulante avant de toucher autre chose.
La bascule HTML de sortie (lisez ceci avant de masquer quoi que ce soit de sensible)
Assis juste sous la bascule principale est Sortie HTMLet sa propre étiquette précise ce qu'elle fait : “Si activé, le code HTML existera sur la page mais le widget sera masqué à l'aide de CSS.”
Cela compte bien plus que ne le suggère son emplacement calme.
Laissez-le désactivé, qui est la valeur par défaut, et l'élément n'est jamais rendu Il n'est pas du tout dans la source de la page Quelqu'un qui échoue à la condition ne peut pas voir-source et le lire, et Google ne l'indexera pas.
Tourne-le sur et l'élément est rendu dans le HTML, puis caché avec CSS. N'importe qui peut ouvrir les outils de développement, supprimer une ligne et lire le tout.
Alors gardez Output HTML désactivé pour tout ce que vous voulez réellement gardé privé : un prix réservé aux membres, un lien de téléchargement caché, une note interne La raison pour laquelle le paramètre existe est que certains scripts ont besoin du balisage présent dans le DOM pour fonctionner, qui propose des curseurs, des systèmes d'onglets et des compteurs qui mesurent les éléments sur le chargement de la page C'est le cas pour l'allumer, et pas grand-chose d'autre.
Pendant que nous sommes ici, la version contondante : l'affichage conditionnel est un outil de présentation, pas un système de contrôle d'accès Avec Output HTML désactivé, c'est parfaitement solide pour un usage quotidien Mais le contenu qui doit être verrouillé, comme un cours payant ou un fichier fermé, appartient derrière une véritable protection Le Widget Restreindre le contenu existe pour cela, et un propre Configuration de l'adhésion WordPress est la bonne réponse pour tout ce pour quoi vous facturez de l'argent.
Chaque condition que vous pouvez utiliser
Ouvrez le dépôt Condition et vous obtenez quatre groupes.
| Groupe | Conditions | Utilisation typique |
|---|---|---|
| Visiteur | État de connexion, rôle de l'utilisateur, système d'exploitation, navigateur | Tarification des membres, notes admin-only,“Télécharger pour Mac” boutons |
| Date et heure | Plage de dates, heure du jour, jour de la semaine | Ventes qui expirent, heures d'ouverture, offres week-end |
| Simple | Page, publication, page statique, type de message, publication à terme | En-tête CTA qui change sur certaines pages |
| Archive | Archives de taxonomie, archives de termes, archives de types de messages, archives de dates, archives d'auteurs, résultats de recherche | Bannières spécifiques à une catégorie, un message sur les résultats de recherche vides |
Chacun d’eux s’associe à Est ou N'est pas(en), qui double discrètement ce qu'une seule règle peut faire.
Afficher le contenu aux utilisateurs connectés uniquement
Sélectionnez l'élément, ouvrez Avancé > Conditions d'affichage[traduction], allumez-le La condition par défaut est déjà Login Statut régler sur Est« Cela signifie que les visiteurs connectés le voient et personne d'autre ne le voit. Vous n'avez rien à changer. ».
Maintenant, construisez la version opposée pour les visiteurs déconnectés Sélectionnez ce deuxième élément, activez Conditions d'affichage et retournez l'opérateur à N'est pas.
Empilez ces deux-là sur une seule page et vous avez un en-tête qui salue les membres par leur nom et présente une inscription à tout le monde, sans page en double à synchroniser.
Cibler un rôle d'utilisateur spécifique
Même débit, condition différente Choisir Rôle Utilisateur dans la liste déroulante et choisissez le rôle que vous recherchez : Administrateur, Éditeur, Abonné, Client, quel que soit le site de votre site WooCommerce et les plugins d'adhésion ajoutent leurs propres rôles à cette liste.
Retournez-le N'est pas Administrateur et tout le monde sauf les administrateurs voit l'élément C'est pratique pour une “voici comment éditer cette section” note que votre client voit sur la page, sans que vous ayez à la regarder à chaque fois que vous ouvrez le site.
Un seul attrapé : un rôle d'utilisateur n'existe que pour quelqu'un qui est connecté Un visiteur déconnecté n'a aucun rôle, donc une règle de rôle d'utilisateur ne les correspondra jamais, peu importe ce que vous définissez Si vous devez attraper des personnes déconnectées, c'est une règle de statut de connexion.
Afficher le contenu par date, heure ou jour de la semaine
Trois conditions basées sur le temps, et ils permettent d'économiser plus de travail que toute autre chose dans la liste.
Date Gamme prend une date de début et de fin Construisez la bannière Black Friday en octobre, définissez la gamme, oubliez-la Elle se pointe et disparaît d'elle-même.
Heure de la journée prend une fenêtre temporelle, qui est l'échange ouvert contre fermé du haut de cet article.
Jour de la semaine prend un ou plusieurs jours, ajoutés sous forme de balises.
Réglez-le du lundi au vendredi pour un chat d'“ avec le widget support now” et laissez-nous un bloc de messagerie de “ couvrir le week-end Combinez le jour de la semaine avec l'heure de la journée Toutes conditions remplies et vous avez décrit les heures d'ouverture réelles en deux règles.
Attention à l'horloge, cependant. Les conditions horaires s'appliquent à votre Fuseau horaire du site WordPress (Paramètres > Général), pas celui du visiteur Si votre vente est censée se terminer à minuit pour le client, et que votre serveur est assis sur UTC pendant que vos clients sont à New York, elle se termine cinq heures plus tôt pour qu'ils vérifient ce paramètre avant de planifier tout ce qui coûte de l'argent.
Afficher le contenu par navigateur ou système d'exploitation
Choisir Navigateur ou Système d'exploitation et ciblez Chrome, Firefox, Safari, Edge, Windows, macOS, Linux, etc.
La véritable utilisation pour le ciblage du système d'exploitation est le téléchargement d'applications. Afficher le bouton Mac aux visiteurs Mac et le bouton Windows aux visiteurs Windows, au lieu d'une rangée de quatre boutons où trois d'entre eux ne conviennent pas à celui qui cherche.
Le ciblage du navigateur est plus étroit que ce à quoi les gens s'attendent C'est pour les “ occasionnellescette fonctionnalité se comporte différemment dans l'avis Safari”, pas pour l'expédition de conceptions différentes par navigateur Si une section ne fonctionne que dans Chrome, corrigez le CSS Ne le cachez pas à vos visiteurs Firefox et appelez-le terminé.
Cela vaut également la peine de dire clairement : il ne s'agit pas de ciblage de périphérique Les commandes réactives d'Elementor cachent déjà des éléments par taille d'écran, et c'est le bon outil pour le téléphone par rapport au bureau Le système d'exploitation concerne la plate-forme, pas la taille de l'écran.
Là où cela devient véritablement utile
Quelques configurations qui valent la peine d'être volées.
Exécutez deux en-têtes à partir d'un modèle : dans votre Constructeur de thèmes en-tête, mettez un bouton “Log in” sur Statut de connexion N'est paset un bouton “My Account” sur Statut de connexion Est. Un en-tête, les deux publics La même astuce fonctionne dans le pied.
Laissez les ventes fonctionner elles-mêmes avec une barre promotionnelle dans une condition Date Range, programmée des semaines à l'avance, il n'y a donc pas de brouillage le jour du lancement à 6 heures du matin. Laissez les instructions client sur la page avec une note réservée aux administrateurs définie sur le rôle de l'utilisateur Est Administrateur, assis exactement là où il est nécessaire au lieu d'être enterré dans un e-mail.
Vous pouvez également mettre des conditions sur les éléments intérieur un popup(traduction), donc une seule fenêtre contextuelle sert différemment les visiteurs connectés et déconnectés, et utilise les conditions Taxonomy Archive pour exécuter une offre différente sur chaque archive de catégorie de produits.
Pour une personnalisation plus profonde, associez les conditions à Balises dynamiques (champs personnalisés inclus) donc la version qui survit aux règles extrait les données en direct au lieu du texte statique.
Des choses qui attirent les gens
- Pas de panneau Conditions d'affichage. L'extension n'est pas activée Master Addons > Paramètres > Extensions.
- L'élément se montre à tout le monde. Affichage sur est défini sur“Toute condition remplie” quand vous vouliez dire“Toutes les conditions remplies.”
- Ça marche pour vous mais pas pour les visiteurs. Vous êtes connecté en tant qu'administrateur Testez dans une fenêtre privée, à chaque fois.
- Le contenu caché apparaît dans la source de la page. Sortie HTML est allumé Éteignez-le.
- Le temps règne sur le feu à la mauvaise heure. Fuseau horaire du site, pas fuseau horaire du visiteur Paramètres > Général.
- Les changements ne s'affichent pas sur le site en direct. Un cache de page sert une copie stockée La plupart des plugins de mise en cache ne peuvent pas varier une page mise en cache par utilisateur, donc la mise en cache pleine page agressive et les conditions basées sur la connexion fonctionnent les unes contre les autres Exclure ces pages du cache, ou effacer et tester à nouveau.
Questions fréquemment posées
Qu'est-ce que l'affichage conditionnel dans Elementor ?
L'affichage conditionnel vous permet d'afficher ou de masquer n'importe quel élément Élémenteur en fonction de règles, comme si le visiteur est connecté, son rôle d'utilisateur, son navigateur ou le jour de la semaine Vous construisez une page contenant plusieurs versions d'une section, et chaque visiteur ne voit que la version qui s'applique à lui.
Puis-je utiliser gratuitement l'affichage conditionnel dans Elementor ?
Oui. L'extension Conditions d'affichage est livrée avec le plugin gratuit Master Addons Activez-le sous les modules complémentaires principaux, puis les paramètres, puis les extensions et un panneau Conditions d'affichage apparaît dans l'onglet Avancé de chaque élément.
Le contenu caché est-il vraiment caché aux visiteurs ?
Avec Output HTML désactivé (la valeur par défaut), l'élément n'est jamais rendu, il n'est donc pas du tout dans la source de la page Activez le HTML de sortie et le balisage se charge mais est masqué avec CSS, que tout le monde peut annuler dans les outils de développement. Gardez-le éteint pour tout ce qui est sensible.
Pourquoi ma condition d'affichage ne fonctionne pas ?
Habituellement l'une des trois choses suivantes : l'affichage en version déroulante est défini sur“Toute condition remplie” au lieu de “Toutes les conditions remplies”, vous testez lorsque vous êtes connecté en tant qu'administrateur, ou un plugin de mise en cache sert une copie stockée de la page Test dans une fenêtre privée avec le cache effacé.
Les conditions basées sur le temps utilisent-elles le fuseau horaire du visiteur ?
Non. Ils s'exécutent sur le fuseau horaire de votre site WordPress, défini sous Paramètres, puis Général Si vos visiteurs sont assis dans un fuseau horaire différent, une vente se terminant à minuit sur votre serveur se termine à une heure différente pour eux, définissez donc délibérément le fuseau horaire du site.
Envelopper
L'affichage conditionnel de l'élémenteur transforme une page en autant de versions que nécessaire Activez l'extension, ouvrez Conditions avancées > d'affichage sur n'importe quel élément et écrivez la règle : cochez quelque chose, Est ou N'est pas, fait Deux paramètres décident s'il se comporte comme vous l'attendez. Affichage sur contrôles ET versus OR, et Sortie HTML contrôle si le contenu caché est véritablement absent ou simplement repeint.
Ça fait partie du ensemble d'extensions Master Addons gratuit, donc il n'y a rien à acheter avant de l'essayer Si vous finissez par vouloir le reste de la boîte à outils plus tard, c'est ce que le Pro plans sont pour.
Lecture connexe: Animations d'entrée des éléments, comment créer un en-tête collant dans Elementor, et comment ajouter la vérification de l'âge dans Elementor.
