Comment afficher le module Commentaires de Divi aux utilisateurs connectés uniquement

La section commentaires de n’importe quel blog peut être un lieu de discussion intéressante. Cependant, il arrivera peut-être un moment où vous souhaiterez créer votre communauté en ligne. Avec la fonctionnalité Divi Condition Options, nous pouvons empêcher les utilisateurs ne faisant pas partie de votre blog de commenter les articles. Cela pourrait fonctionner pour une communauté réservée aux membres ou comme avantage d’un site d’adhésion.

Dans ce tutoriel, nous allons vous montrer comment afficher le module Commentaires de Divi aux utilisateurs connectés uniquement, cela vous permettra d'interagir directement avec votre communauté ! Nous utiliserons le modèle d’article de blog Film Lab comme base de ce didacticiel Divi.

Comment créer une section de commentaires réservée aux membres

La fonctionnalité Condition de Divi nous permet de choisir un ensemble de paramètres avec lesquels les modules, lignes, colonnes et sections peuvent interagir. Dans notre cas, nous souhaiterons définir les conditions d'affichage en fonction du statut de connexion d'un utilisateur. Voici un résumé des étapes que nous suivrons dans ce didacticiel pour obtenir notre section de commentaires réservée aux membres :

1. Téléchargez votre modèle d’article de blog sur Divi Theme Builder (ou créez votre modèle de blog !)
2. Créez votre section de commentaires réservée aux membres contenant un module de connexion
3. Activer les conditions d'affichage pour la ligne contenant le module de connexion
4. Activer les Conditions d'Affichage pour la ligne contenant le Module Commentaire
5. Enregistrez et testez le modèle dans une fenêtre de navigation privée

Avant : une section de commentaires gratuite pour tous

Voici à quoi ressemble le modèle d'article de blog Film Lab sans la section de commentaires réservée aux membres. Notez que n'importe qui peut accéder à un article de blog, le lire et interagir avec la section des commentaires.

Après : une section de commentaires réservée aux membres

En utilisant les options de condition de Divi, nous pouvons désormais afficher un module de connexion. Une fois connecté, un utilisateur peut interagir avec le module de commentaires. S'ils ne sont pas un utilisateur connecté, ils ne peuvent pas voir ni soumettre de commentaire.

Installation du modèle d'article de blog

Avant de commencer à créer notre section de commentaires réservée aux membres, nous devons télécharger le modèle que nous utiliserons. Vous pouvez télécharger le modèle d’article de blog Film Lab ici.

Accédez au générateur de thème Divi

Pour télécharger le modèle, accédez au Divi Theme Builder dans le backend de votre site Web WordPress.

Télécharger un modèle de site Web

Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l'icône.

Accédez à l'onglet d'importation, téléchargez le fichier JSON que vous pouvez télécharger dans cet article, puis cliquez sur « Importer des modèles Divi Theme Builder ».

Enregistrer les modifications du générateur de thème Divi

Une fois que vous avez téléchargé le fichier, vous remarquerez un nouveau modèle avec une nouvelle zone de corps attribuée à Tous les messages. Enregistrez les modifications de Divi Theme Builder dès que vous souhaitez activer le modèle.

Modification du modèle

Modèle de message ouvert

Maintenant que notre modèle est installé et attribué à tous les articles de blog de notre site, nous pouvons commencer à créer notre section de commentaires réservée aux membres. Nous commençons par ouvrir le modèle.

Ajouter une nouvelle ligne pour le module de connexion

Ajoutez une nouvelle ligne dans la même section que le module de commentaires de ce modèle. Passez à la vue filaire pour faciliter les choses. Ensuite, cliquez sur l'icône plus verte pour ajouter une nouvelle ligne au-dessus de la ligne contenant le module de commentaires.

Ensuite, nous allons ajouter une colonne à la ligne.

Ajouter un module de connexion

Dans notre nouvelle ligne, nous allons ajouter un module de connexion. Nous souhaitons que les utilisateurs se connectent à notre site Web pour accéder à notre section de commentaires réservée aux membres. Faites défiler la boîte modale du module jusqu'à ce que vous voyiez le

Ajouter du texte au module de connexion

Ajoutons un titre au module de connexion. Nous utiliserons également ce titre pour demander aux utilisateurs de se connecter avant d'accéder à notre section de commentaires.

Module de connexion de style

Maintenant, nous allons styliser notre module de connexion nouvellement ajouté pour qu'il corresponde à l'image de marque du modèle de blog Film Lab.

Définition de l'arrière-plan du module de connexion

Cliquez sur l'icône du pot de peinture. Cela ajoutera une couleur de remplissage unie de #ff4125 à l'arrière-plan du module. Ensuite, cliquez sur la bascule Utiliser la couleur d’arrière-plan .

Arrière-plan

• Couleur de fond : #ff4125
• Utiliser la couleur d'arrière-plan : Oui

Styliser les champs

Pour les Champs, nous utiliserons la même couleur que la section pour son fond avec du texte noir.

Champs : style d'arrière-plan et de texte

• Couleur d'arrière-plan des champs : #eae9e4
• Couleur du texte des champs : #000000
• Couleur d'arrière-plan du focus des champs : #eae9e4
• Couleur du texte de focus des champs : #000000

Nous donnerons également aux champs une bordure et aucun coin arrondi. Cela imitera le style du module de commentaires.

Champs : style d'arrière-plan et de texte

• Champs Coins arrondis : 0
• Styles de bordure de champs : Tous
• Largeur de bordure des champs : 1 px
• Couleur de la bordure des champs : #000000
• Style de bordure de champs : Solide

Styliser le titre

Le titre utilisera la même police que celle utilisée dans tout le modèle et sera blanc.

Texte du titre

• Texte du titre : H2
• Police du titre : Mulish
• Couleur du texte du titre : #ffffff

Notez que nous ajoutons des tailles réactives pour que le titre s'affiche bien sur différentes tailles d'écran.

Texte du titre : Taille de la police

• Taille de la police du texte du titre (ordinateur de bureau) : 64 px
• Taille de la police du texte du titre (tablette) : 48 px
• Taille de la police du texte du titre (Mobiler) : 48px

Styliser le bouton

Pour gagner du temps, copiez et collez les paramètres des boutons du module de commentaires vers notre module de connexion. Cliquez sur l'icône des paramètres du module de commentaires.

Accédez à l'onglet Conception . Faites défiler jusqu'à l'onglet Bouton. Cliquez avec le bouton droit sur l'onglet du bouton et cliquez sur Copier les styles de bouton .

Ensuite, quittez le module de commentaires. Entrez dans le module de connexion en cliquant sur l'icône d'engrenage.

Encore une fois, cliquez sur l'onglet Conception et faites défiler jusqu'à l'onglet Bouton . Ensuite, cliquez avec le bouton droit et sélectionnez Coller les styles de boutons . Voilà ! Le bouton semble proche du bouton dans le module de commentaires.

Désormais, le bouton de notre module de connexion correspond étroitement au style des boutons du module de commentaires. Ouais nous!

Appliquer la condition d'affichage à la ligne du module de connexion

Avec le style de notre module de connexion, nous pouvons maintenant mettre en place notre première condition d'affichage. La condition d'affichage est essentielle pour créer une section de commentaires réservée aux membres. Divi propose diverses options dans la fonctionnalité Condition d’affichage qui contribuent à rendre cela possible. Cliquez sur l'icône d'engrenage pour saisir les paramètres de la ligne contenant le module de connexion.

Cliquez sur l'onglet Avancé dans les paramètres de ligne, puis cliquez sur l'onglet Conditions . Ensuite, cliquez sur l'icône plus .

Lorsque vous cliquez sur l'icône plus, vous aurez de nombreuses options quant à la condition dans laquelle vous afficherez (ou masquerez) cette ligne. Faites défiler jusqu'à Statut de l'utilisateur, puis cliquez sur Statut de connexion.

Une fois cela fait, nous recevrons une autre boîte modale. Dans cette boîte modale, nous voulons cliquer sur la liste déroulante qui dit, L'utilisateur est connecté et le changer en L'utilisateur est déconnecté . C’est ce qui contribue à notre section de commentaires réservée aux membres. Comme nous souhaitons que les gens soient membres du site, ils doivent disposer d'un identifiant de connexion valide pour accéder à notre section de commentaires. S'ils ne disposent pas d'informations d'identification valides, ils ne peuvent pas accéder à la section commentaires de notre site.

Conditions d'affichage

• Afficher uniquement si : l'utilisateur est déconnecté
• Condition d'activation : Oui

Une fois que vous avez sélectionné votre condition d'affichage, assurez-vous d'enregistrer vos modifications en cliquant sur le bouton à cocher vert de la boîte modale. Soyez conscient de la notification concernant les plugins de mise en cache.

Activation des conditions d'affichage pour la section de commentaires réservée aux nouveaux membres

La dernière partie de ce didacticiel consiste à configurer la condition d'affichage pour la ligne contenant le module de commentaires. Pour ce faire, cliquez sur l'icône d'engrenage pour accéder aux paramètres de ligne.

Comme pour la ligne contenant le module de connexion, une fois dans les paramètres de ligne, nous cliquons sur l'onglet Avancé , puis sur l'onglet Conditions et appuyons sur l'icône plus pour ajouter notre condition d'affichage.

Pour la ligne contenant le module Commentaire, au lieu de s'afficher uniquement si l'utilisateur est déconnecté, nous souhaitons qu'elle s'affiche uniquement si l'utilisateur est connecté.

Une section de commentaires terminée uniquement pour les membres

Maintenant que nous avons ajouté les conditions d'affichage au module de commentaires et à la ligne avec le module de connexion, nous pouvons effectuer un test rapide. Visitez un article de blog sur votre site dans une fenêtre de navigation privée ou privée.

Nous utilisons un navigateur privé ou une fenêtre de navigation privée pour tester nos conditions d'affichage, car la fenêtre nous déconnectera temporairement de notre site Web lors de la navigation sur celui-ci. Lorsque vous revenez à votre navigation habituelle et que vous *êtes* connecté à votre site Web, vous devriez voir votre section de commentaires. Alternativement, vous pouvez vous déconnecter de votre site Web WordPress pour voir votre travail terminé ! Bien que nous ayons réalisé ce tutoriel sur un module de commentaires, celui-ci peut être appliqué à n’importe quel module, ligne, colonne ou section de manière native dans Divi ; aucun plugin supplémentaire n'est nécessaire. Prenez le temps de mélanger et assortir les différents paramètres d’affichage et de voir ce que vous faites.

En conclusion

Créer une communauté sur votre site WordPress vous permet d’approfondir la confiance de ceux qui utilisent le plus votre site Web. Une façon d'y parvenir consiste à créer une section de commentaires réservée aux membres qui permet aux membres d'interagir facilement les uns avec les autres. Divi dispose d'outils et de fonctionnalités intégrés qui facilitent cette tâche. Avec les conditions d’affichage natives de Divi, il est possible de permettre à vos utilisateurs d’interagir uniquement entre eux. De plus, vous pouvez facilement styliser votre module Commentaires à l’aide de l’onglet Conception et des outils d’édition complets de Divi. Pour créer une communauté privée agile, vous n’avez pas besoin d’installer un plugin d’adhésion lorsque vous utilisez Divi. En activant certaines fonctionnalités dans le noyau de Divi, vous pouvez créer une section de commentaires des utilisateurs connectés, renforcer votre communauté en ligne et garder votre site Web WordPress léger et agile. Avant de rechercher un plugin pour ajouter des fonctionnalités d'adhésion simples à votre site Web, pensez à consulter dès aujourd'hui les conditions d'affichage de Divi pour certains aspects de votre site Web.