Point culminant du plugin Divi – Logique d’affichage Divi

Et si vous vouliez qu'un élément de design Divi spécifique s'affiche en fonction des conditions que vous avez choisies ? Cela ouvrirait des possibilités de conception telles que l'affichage d'une version d'une page en fonction du statut de connexion de l'utilisateur, de l'heure de la journée ou de sa géolocalisation. Un plugin appelé Divi Display Logic donne à Divi cette fonctionnalité.

Divi Display Logic est un plugin tiers de Tortoise IT qui fonctionne à la fois avec Divi et Extra pour ajouter une logique d'affichage. Dans ce point culminant du plugin, nous allons jeter un œil au plugin et voir quelques exemples de ce qu'il peut faire.

Les images de ces exemples sont extraites de Unsplash.com et des mises en page Divi gratuites disponibles ici sur le blog Elegant Themes.

Installer Divi Display Logic

Téléchargez et activez le plugin comme d'habitude. Un nouvel élément de menu est ajouté au tableau de bord sous les plugins appelés Divi Display Logic. Ici, vous allez ajouter votre clé de licence. Cela garantira que vous obtiendrez les mises à jour du plugin.

La logique d'affichage est désormais ajoutée à toutes les sections, lignes et modules de l'onglet Contenu du backend Divi Builder. Les fonctionnalités incluent une sélection de date et d'heure, une liste déroulante dans laquelle vous pouvez choisir la logique prédéfinie et une zone qui affiche le shortcode que le plugin crée pour votre logique.

Logique prédéfinie

La liste déroulante Logique prédéfinie propose 18 choix logiques prédéfinis. Il y en a quelques autres que vous pouvez copier et coller dans la zone de shortcode. Vous pouvez ajouter vos propres choix logiques si vous souhaitez coder et vous pouvez manipuler le shortcode pour créer des variations.

Les choix sont d'afficher ou de masquer en fonction d'une certaine heure, entre certaines heures, des jours spécifiques, d'afficher s'il a une catégorie NEWS, si l'utilisateur est connecté, à un certain rôle d'utilisateur, à un certain emplacement et en fonction de Code PHP. Tous ces éléments peuvent être modifiés.

Shortcode logique

Une fois que vous avez choisi une logique prédéfinie, il crée automatiquement un shortcode. Vous n'aurez pas besoin d'utiliser ce shortcode, mais vous pouvez le modifier ici si vous le souhaitez.

Vous pouvez également utiliser n'importe quel shortcode encapsulant (un shortcode avec une balise de début et de fin [shortcode][/shortcode]) pour créer vos propres arguments. Ceci est expliqué dans la description sous le champ shortcode, mais j'aimerais également voir un exemple donné dans la description.

Pour modifier, mettez simplement en surbrillance la partie dans le shortcode et apportez vos modifications.

Voici un exemple qui masquera le contenu les jours de semaine. Si vous vouliez afficher le contenu au lieu de le masquer, vous remplaceriez « masquer » par « afficher » dans le shortcode. Une autre option serait de remplacer les chiffres 1-5 par "6,7" qui masqueront le contenu le week-end.

J'ai trouvé que la manipulation du shortcode était intuitive car la plupart des mots-clés de la chaîne sont simples.

Exemples de codes courts intégrés

Le tout premier lien (intitulé Cliquez ici) dans la zone Logique d'affichage fournit des exemples détaillés des codes abrégés. Ceux-ci sont particulièrement utiles pour les exemples PHP. Vous pouvez les copier et les coller dans le champ shortcode.

Sélection de la date et de l'heure

Pour utiliser la sélection date/heure, cliquez sur le texte « Si vous utilisez des dates, cliquez ici ». Cela ouvrira deux champs dans lesquels vous pourrez choisir les dates d'affichage et de masquage. Ce sont des conditions de temps qui détermineront quand la section, la ligne ou le module s'affichera. La logique de l'affichage sera choisie dans la liste Logique prédéfinie.

Sélectionnez la date et l'heure en cliquant dans les champs Afficher la date et Masquer la date. Cela fait apparaître un calendrier avec des curseurs d'heures et de minutes. Au-dessus des champs se trouve un message qui indique l'heure actuelle de votre serveur.

Il est important d'utiliser l'heure de votre serveur plutôt que l'heure réelle. C'est là que WordPress obtient l'heure actuelle et c'est l'heure que Divi Display Logic utilisera.

Le module affichera maintenant le contenu entre la date et l'heure que j'ai choisi.

Cela ouvre beaucoup de possibilités. Par exemple:

• Vous pouvez créer un site de vente avec des offres éclair en utilisant un compte à rebours pour indiquer quand l'offre se termine et que la suivante commence.
• Vous pourriez avoir une vente pour commencer à un certain moment.
• Avoir un accord à terminer à un certain moment.
• Afficher le contenu d'un article à un certain moment même après la publication de l'article.
• Afficher un contenu différent en fonction du matin ou du soir

Exemples de logique d'affichage Divi - School Call to Action

Pour mon premier exemple, je crée une page de destination pour une école. La page comportera un appel à l'action d'inscription pour les étudiants aux États-Unis, mais toute personne en dehors des États-Unis ne pourra pas s'inscrire. Cet exemple utilise la mise en page de la page d'accueil pour les universités et collèges.

La mise en page comprend une ligne avec des modules de texte et de boutons. Je veux que le texte et le bouton soient remplacés par des modules différents pour toute personne en dehors des États-Unis.

Dans les paramètres de la ligne, j'ai choisi « Masquer le contenu si l'utilisateur est aux États-Unis ».

Ensuite, j'ai changé « masquer » dans le code court en « afficher », créant ainsi un nouveau code court.

J'ai cloné la ligne et choisi de masquer le contenu pour les utilisateurs aux États-Unis pour la nouvelle ligne.

Désormais, une seule des lignes s'affichera en fonction de l'emplacement du visiteur.

Les visiteurs américains voient le slogan d'origine et le bouton pour postuler.

Tous les visiteurs en dehors des États-Unis voient un slogan et un bouton différents avec une légende différente.

Exemples de logique d'affichage Divi – Vente Flash

Il s'agit d'une simple page de vente qui n'affiche qu'un seul produit en tant que vente flash. Lorsque le compte à rebours atteint zéro, un nouveau produit avec un nouveau compte à rebours prend sa place.

Alors qu'une seule section s'affiche, la page elle-même a quitté quelques sections supplémentaires. Dans chaque section, j'ai défini la logique pour afficher le contenu à un moment précis. Les sections ne se chargent pas lorsque la page se charge dans le navigateur, vous pouvez donc en ajouter autant que vous le souhaitez avec tout le CSS que vous voulez et elles ne ralentiront pas le temps de chargement.

Le compte à rebours et la logique d'affichage fonctionnent indépendamment l'un de l'autre. J'ai réglé l'heure pour que le compteur corresponde à l'heure indiquée par la logique d'affichage.

Exemples de logique d'affichage Divi - Site de l'auteur avec zone d'adhésion

Cet exemple utilise la mise en page gratuite Elegant Authors. Je souhaite afficher un contenu différent selon que le visiteur est connecté ou non. Les visiteurs qui ne sont pas connectés verront l'écran de l'image ci-dessus qui inclut un appel à l'action.

Les visiteurs connectés ne verront pas de CTA. Au lieu de cela, ils verront un lien vers une zone spéciale du site Web à laquelle seules les personnes connectées auront accès. L'accès spécial peut être contrôlé par des plugins d'adhésion séparés ou en attribuant une capacité utilisateur pour afficher le contenu et en choisissant cette capacité comme logique.

Plutôt que de cloner toute la section, j'ai uniquement cloné le bouton. Tout le reste restera le même. De cette façon, si je décide de changer l'image d'arrière-plan, je n'ai besoin de la modifier que dans une section.

J'ai défini la logique du bouton du haut pour afficher le contenu uniquement aux utilisateurs déconnectés.

Le deuxième bouton ne s'affichera que pour les utilisateurs connectés.

Alternativement, j'aurais pu utiliser 'SHOW this content if the user has the capacity "view_content".'

Les utilisateurs connectés voient désormais le nouveau bouton qui leur fournit un lien vers une page ou un article spécifique.

Exemples de logique d'affichage Divi - Site de l'auteur avec une nouvelle page de destination

Bien sûr, une autre possibilité consiste à afficher une page complètement différente. Cet exemple utilise la même disposition que l'exemple précédent, mais j'ai ajouté deux nouvelles sections qui incluent un en-tête pleine largeur et un module de blog.

J'ai défini la logique pour chaque section. Toutes les sections qui composent la page de destination s'afficheront pour les utilisateurs non connectés. Les deux sections du bas, qui créent une page de blog avec un en-tête pleine largeur, s'afficheront pour les utilisateurs connectés.

Désormais, les utilisateurs connectés ne verront pas la page de vente. Si je change l'article de vente en quelque chose que je veux que tous les utilisateurs voient, je change simplement la logique d'affichage.

Utiliser Divi Display Logic avec Extra

Divi Display Logic fonctionne également avec Extra. Cet exemple montre le module Posts Carousel dans le Category Builder.

Licence

Divi Display Logic peut être utilisé sur un nombre illimité de sites Web pour vous et vos clients. Il comprend 6 mois de support et 12 mois de mises à jour. Une fois les 12 mois écoulés, vous devrez racheter le plugin pour recevoir les mises à jour. Le prix de rachat est de 50 % du prix d'achat initial.

Dernières pensées

Divi Display Logic fournit de nombreuses options pour déterminer quand une section, une ligne ou un module s'affichera. Avec des options d'affichage incluant l'heure, la date, la géolocalisation, si l'utilisateur est connecté ou non et le niveau de l'utilisateur, les possibilités de conception sont pratiquement infinies.

J'ai trouvé le plugin intuitif à utiliser. Les shortcodes sont faciles à manipuler. Quelques exemples supplémentaires seraient utiles, en particulier pour PHP. Si vous souhaitez afficher une section, une ligne ou un module en fonction d'une condition, Divi Display Logic est un excellent choix.

Voir Divi Display Logic chez Tortoise IT pour plus d'informations sur l'achat.

Nous voulons de vos nouvelles. Vous avez utilisé Divi Display Logic ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via phipatbig / shutterstock.com