Comment créer un commutateur de commentaires pour le modèle de billet de blog Divi

Les commentaires sont un élément important de tout modèle de billet de blog. Cependant, pour certains visiteurs, un long commentaire peut poser problème chaque fois qu’ils essaient de parcourir le reste du message. La création de commutateurs d’annotation est un bon moyen de résoudre ce problème. En donnant aux utilisateurs la possibilité d’activer (afficher ou masquer) Les commentaires, vous pouvez améliorer l’expérience utilisateur en leur fournissant initialement une version plus concise du message et en leur permettant d’afficher ou de masquer les commentaires à tout moment.
Dans ce tutoriel, nous vous montrerons comment créer des commutateurs d’annotation pour les commentaires des modèles de post sur le blog Divi. Après avoir créé la barre de basculement d’annotation en utilisant Divi Builder, nous ajouterons le Code nécessaire pour afficher \/ masquer la zone d’annotation lorsque vous cliquez sur la barre de basculement. Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Pour obtenir des commentaires dans ce tutoriel pour activer \/ désactiver le modèle de Post, vous devez d’abord le télécharger en utilisant le bouton ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous êtes inscrit
Emo nouvelle ligne au – dessus de la ligne contenant le formulaire \/ contenu d’annotation. Ensuite, nous remplirons la ligne avec le titre et l’icône basculer pour compléter la conception. Continuez et faites défiler vers la fin de la mise en page par défaut, en ajoutant une nouvelle ligne juste en dessous de la ligne contenant le formulaire de commentaires. Faites glisser la nouvelle ligne sur la ligne de commentaire. Ensuite, ajoutez l’étiquette \ Paramètres de ligne Ouvrez les paramètres de la nouvelle ligne et ajoutez l’arrière – plan suivant: couleur de fond: # 624de3 Sur l’onglet conception, mettre à jour ce qui suit: filet: 10px Largeur de la gouttière: 1 largeur maximale: 1180 Px remplissage: 10px haut, 10px bas, 5% à gauche, 5% à droite Dans l’onglet avancé, ajoutez les classes CSS suivantes à la ligne: CSS Class: et comment Toggle, puis ajoutez les CSS personnalisés suivants à l’élément principal: display: Flex;
Aligner les éléments: Centre; Commentaire modifier le titre pour ajouter un commentaire changer le titre, ajouter un nouveau formulaire de texte dans la colonne de gauche. Lorsque vous passez le curseur sur la zone de contenu du corps, supprimez le contenu du corps virtuel et sélectionnez l’icône utiliser le contenu dynamique. Dans la liste déroulante, sélectionnez count post comments. Dans les paramètres de comptage post – commentaire, mettre à jour ce qui suit: dans la première zone d’entrée, coller le code HTML suivant: Afficher \/ masquer les commentaires (‘)
Dans la zone d’entrée après, collez le code HTML suivant: commentaires) Sous l’option lien vers la zone d’annotation, sélectionnez non. Puis enregistrez les paramètres. Sur l’onglet conception, mettre à jour ce qui suit: police de texte: Rubik poids de police de texte: style de police de texte moyen: tt taille de texte: 24 Px (bureau), 18 Px (tablette), 16 Px (téléphone) hauteur de ligne de texte: 1EM alignement
Ou texte: couleur du texte de gauche: clair Icônes de la barre de basculement d’annotation pour créer une icône de la barre de basculement d’annotation, nous utiliserons un module Blurb qui n’affiche que les icônes que nous voulons utiliser. Ajoutez le nouveau module Blurb à la colonne de droite de la ligne. Supprimez le titre virtuel et le contenu du corps, puis sélectionnez utiliser l’icône plus.
Sur l’onglet conception, mettre à jour ce qui suit: couleur de l’icône: # FFFFFF taille de la police de l’icône: 40px Largeur: alignement du module 50px: hauteur correcte: image \/ icône animée 50px: aucune Animation Dans l’onglet avancé, ajoutez les CSS personnalisés suivants à l’élément principal: display: Flex;
Aligner les éléments: Centre;
Puis ajoutez un autre clip CSS à l’image Blurb: en bas de la marge: 0px! Important Optimiser les lignes de formulaire d’annotation \/ contenu la colonne d’annotation est terminée et nous devons affiner les lignes existantes qui contiennent le formulaire d’annotation \/ contenu afin qu’il ait les classes CSS et l’espacement nécessaires.
Tout d’abord, vous pouvez ajouter le contenu des commentaires à la ligne. Ensuite, ouvrez les paramètres de ligne et mettez à jour le remplissage comme suit: 4% en haut, 4% en bas, 4% à gauche, 4% à droite Dans l’onglet avancé, ajoutez les classes CSS suivantes à la ligne: CSS Class: et comment basculer le contenu Puis sauvegardez et quittez l’éditeur de mise en page. Il enregistre également les modifications dans Theme Builder. Ajouter du code personnalisé le Code que nous devons ajouter à la fonction de commutation de commentaires peut être ajouté au formulaire de code. Ajouter un nouveau module de code sous le module Blurb de la ligne de barre de basculement d’annotation créée précédemment. Ensuite, collez le CSS suivant pour vous assurer que le Code est inclus dans l’étiquette de style. Et annotation Switch. Icône et pb
Transition: tous les 300ms;
}
– Oui. Et notes