Comment styliser le module de commentaires de Divi dans un modèle de publication de blog

Publié: 2020-01-11

Concevoir un modèle de publication de blog est assez facile avec le générateur de thème Divi. Mais il y a une chose qui a tendance à être négligée lors de la conception de modèles de blog, et c'est la section des commentaires. Heureusement, Divi dispose d'un module de commentaires personnalisable qui peut facilement être ajouté à un modèle de publication de blog. Dans cet article, nous allons vous montrer comment créer deux modèles de section de commentaires personnalisés que vous pouvez inclure dans n'importe quel modèle de blog. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Jetons un coup d'œil à l'apparence des conceptions de mise en page des commentaires sur différentes tailles d'écran. Le premier design est un style minimal en noir et blanc et le second est plus coloré.

Bureau

Module de commentaires de Divi dans un modèle de publication de blog

Tablette

Téléphone

Bureau

Module de commentaires de Divi dans un modèle de publication de blog

Tablette

Mobile

Téléchargez GRATUITEMENT les modèles de module de commentaires

Pour mettre la main sur les modèles de modules de commentaires gratuits, vous devrez d'abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers
Télécharger gratuitement

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Recréons la conception du module de commentaires #1

Créer un arrière-plan

La première étape pour recréer le modèle de mise en page des commentaires en noir et blanc consiste à concevoir l'arrière-plan des points. Un pour la vue sur le bureau et un autre pour les écrans réactifs. Si vous souhaitez le créer vous-même, vous aurez besoin de l'outil de création de motifs d'Adobe Illustrator. Sinon, vous pouvez vous procurer un modèle similaire sur Internet ou utiliser celui qui est inclus dans le fichier .zip téléchargeable ci-dessus.

  1. Dans Adobe Illustrator, créez un plan de travail vierge d'environ 1920px de haut + 670px de large.
  2. Créez un cercle noir à l'intérieur d'un carré blanc avec des marges d'environ la moitié de la taille du cercle.
  3. Sélectionnez les deux formes et créez un motif en cliquant sur objet > motif > faire.
  4. Dans le créateur de motifs, choisissez « brique par colonne » et enregistrez-le en tant qu'échantillon de motif.
  5. Créez une forme de la taille du plan de travail et appliquez le motif.
  6. Pour les tailles d'écran réactives, réduisez la forme à la moitié de sa taille. Appuyez sur Maj pour conserver le rapport des cercles.
  7. Copiez et collez la forme à motifs à côté de la première et vous avez maintenant le même motif avec des cercles plus petits.
  8. Téléchargez les deux séparément.

Ouvrez le générateur de thème et ajoutez un nouveau modèle

Il est maintenant temps d'ouvrir le générateur de thème. Ajoutez un nouveau modèle.

Sélectionnez le modèle pour tous les messages

Utilisez le nouveau modèle sur tous les messages.

Ajouter un corps personnalisé et construire à partir de zéro

Enfin et surtout, commencez à créer le corps personnalisé du modèle.

Ajouter une nouvelle section

Fond

Maintenant, nous pouvons commencer à créer la conception de la mise en page des commentaires. Dans l'éditeur de modèles, vous remarquerez une section. Ouvrez les paramètres de la section et téléchargez les images d'arrière-plan du motif. Ajoutez également une superposition de dégradé.

  • Arrière-plan : Dégradé
  • Couleur 1 : blanc semi-transparent rgba (255,255,255,0.96)
  • Couleur 2 : Blanc #ffffff
  • Placer le dégradé au-dessus de l'image d'arrière-plan : Oui
  • Image:
    • Bureau : Motif de points Image 1
    • Tablette et téléphone : Motif de points Image 2

Ajouter une nouvelle ligne

Structure des colonnes

Maintenant, ajoutez une nouvelle ligne avec deux colonnes.

Dimensionnement

Ensuite, ajustez la taille de la rangée.

  • Largeur de gouttière personnalisée : 2
  • Largeur: 80%
  • Largeur maximale : 100 %

Paramètres de la colonne 2

Frontière

Dans les paramètres des colonnes, ajoutez une bordure supérieure à la deuxième colonne.

  • Style: Haut seulement
  • Largeur : 3px
  • Couleur : Noir #ffffff

Ajouter un module de texte à la colonne 1

Teneur

Ajoutez le premier module de texte à la colonne 1 avec du contenu H3 de votre choix.

  • Texte : paragraphe

Texte d'en-tête

Ensuite, dans l'onglet Conception, stylisez le texte de l'en-tête.

  • Niveau de titre : H3
  • Police : GFS Didot
  • Couleur : Noir #000000
  • Taille:
    • Ordinateur de bureau : 5vw
    • Tablette : 9vw
    • Téléphone : 13vw

Espacement

Ajustez également l'espacement.

  • Rembourrage inférieur
    • Ordinateur de bureau : 3vw
    • Tablette et téléphone : 7vw

Ajouter le module de témoignage à la colonne 1

Teneur

Maintenant, ajoutez un module de témoignage à la colonne 1 avec un contenu de votre choix. Téléchargez également une image.

  • Auteur : lecteur fidèle
  • Titre du poste : Responsable du marketing de contenu
  • Entreprise : Tiger Media Company
  • Corps : texte du paragraphe
  • Image : Photo de portrait

Fond

Assurez-vous que l'arrière-plan est transparent

  • Couleur de fond : Transparent

Éléments

Dans l'onglet éléments, sélectionnez pour afficher l'icône de devis.

  • Afficher l'icône de citation : Oui

Icône de citation

Ensuite, stylisez l'icône de citation comme suit.

  • Couleur : Noir #000000
  • Fond : Blanc #ffffff
  • Taille de la police de l'icône :
    • Ordinateur de bureau : 2vw
    • Tablette : 5vw
    • Téléphone : 9vw

Image

Modifiez ensuite les paramètres de l'image.

  • Largeur et hauteur:
    • Bureau : 110px
    • Tablette et téléphone : 90px
  • Coins arrondis : 90px
  • Couleur de la bordure : Transparent

Texte

Modifiez également l'alignement du texte.

  • Alignement : Centre

Le corps du texte

Ensuite, stylisez le corps du texte.

  • Police : Verdana
  • La couleur noire
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2vw
    • Téléphone : 3vw

Texte de l'auteur

Continuez en stylisant le texte de l'auteur.

  • Police : GFS Didot
  • Poids : gras
  • Couleur : Noir #ffffff
  • Taille:
    • Ordinateur de bureau : 1.2vw
    • Tablette : 2.5vw
    • Téléphone : 4vw
  • Espacement des lettres : 1px

Texte du poste

Ensuite, le texte de position.

  • Police : GFS Didot
  • Couleur : Noir #ffffff
  • Taille:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 2vw
    • Téléphone : 3vw
  • Hauteur de ligne : 2 em

Texte de l'entreprise

Aussi, le texte de l'entreprise.

  • Police : GFS Didot
  • Couleur : Noir #ffffff
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2vw
    • Téléphone : 3vw
  • Hauteur de ligne : 2 em

Dimensionnement

Continuez en ajustant le dimensionnement du module.

  • Largeur:
    • Ordinateur de bureau : 60 %
    • Tablette : 65%
    • Téléphone : 75 %
  • Alignement du module : Centre

Espacement

Ajustez également l'espacement.

  • Rembourrage supérieur :
    • Ordinateur de bureau : 1.5vw
    • Tablette : 5vw
    • Téléphone : 6vw

Frontière

Enfin, ajoutez une bordure supérieure au module.

  • Styles de bordure : Haut uniquement
  • Largeur : 2px
  • Couleur : Noir #ffffff

Ajouter un module de commentaires à la colonne 2

Éléments

En passant à la colonne 2, ajoutez un module de commentaires. Modifiez les paramètres des éléments comme suit.

  • Afficher l'avatar de l'auteur : Non
  • Afficher le bouton de réponse : Oui
  • Afficher le nombre de commentaires : Non

Des champs

Passez à l'onglet de conception du module et modifiez les paramètres des champs.

  • Couleur du texte : Noir #oooooo
  • Couleur de fond : gris pâle #f7f7f7
  • Couleur du texte de mise au point : noir #oooooo
  • Couleur d'arrière-plan de la mise au point : gris pâle #f7f7f7
  • Police : GFS Didot
  • Taille du texte:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 1.5vw
    • Téléphone : 2.5vw
  • Espacement des lettres : 1px

Texte du titre du formulaire

Modifiez ensuite les paramètres du texte du titre du formulaire.

  • Police : GFS Didot
  • Couleur : Noir #ffffff
  • Taille:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 2.5vw
    • Police : 3.5vw

Méta-texte

Continuez en stylisant le méta-texte.

  • Police : GFS Didot
  • Couleur : Noir #ffffff
  • Taille:
    • Ordinateur de bureau : 1.3vw
    • Tablette : 3vw
    • Téléphone : 4vw

Texte du commentaire

Aussi, le texte du commentaire.

  • Police : Verdana
  • Couleur : Noir #ffffff
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 1.7vw
    • Téléphone : 2.7vw
  • Espacement des lettres : 1px
  • Hauteur de ligne : 1,8 em

Bouton

Pour continuer, stylisez les boutons.

  • Taille du texte:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 2.5vw
    • Téléphone : 3.5vw
  • Couleur du texte : Blanc #000000
  • Fond : Noir #ffffff
  • Espacement des lettres : 1px
  • Police : GFS Didot

Dimensionnement

Ensuite, ajustez les paramètres de dimensionnement du module.

  • Largeur: 90%
  • Alignement du module : Centre

Espacement

Enfin, l'espacement aussi.

  • Rembourrage supérieur :
    • Ordinateur de bureau : 4vw
    • Tablette et téléphone : 8vw
  • Rembourrage gauche et droit : 3vw

Recréons la conception du module de commentaires #2

Créer un arrière-plan

La première étape pour recréer la disposition du module de commentaires des cercles colorés consiste à préparer un design d'arrière-plan. Vous pouvez créer une conception de cercle simple dans votre éditeur graphique préféré. Voici les étapes à suivre pour créer l'image d'arrière-plan :

  1. Créez une toile de 1800px de large et d'environ 1800px de haut.
  2. Ajoutez deux cercles, un plus grand que l'autre.
  3. Colorez les cercles et ajoutez de la transparence.
  4. Placez les deux cercles un peu superposés en haut à gauche de la toile.
  5. Regroupez les cercles en un seul objet et dupliquez-les.
  6. Retournez les cercles et placez-les en diagonale vers le bas et à droite des deux premiers.
  7. Assurez-vous de laisser de l'espace en haut et en bas. Lorsqu'il y a beaucoup de commentaires, l'image se répétera et s'affichera verticalement.

Le design d'arrière-plan que nous avons créé pour ce modèle de mise en page de commentaires est également disponible dans le dossier zippé que vous pouvez télécharger au début du didacticiel.

Ouvrez le générateur de thème et ajoutez un nouveau modèle

Il est maintenant temps d'ouvrir le générateur de thème. Ajoutez un nouveau modèle.

Sélectionnez le modèle pour tous les messages

Appliquez le modèle à tous les messages.

Ajouter un corps personnalisé et construire à partir de zéro

Et commencez à créer le corps personnalisé du modèle.

Ajouter une nouvelle section

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et téléchargez l'image d'arrière-plan. Incluez également une superposition de couleurs dégradées.

Fond

  • Arrière-plan : Dégradé
  • Dégradé de couleur 1 : blanc transparent rgba (255,255,255,0,55)
  • Dégradé de couleur 2: blanc transparent rgba (255,255,255,0,55)
  • Image : Fond de cercles

Espacement

Ajustez également l'espacement de la section avant d'ajouter une ligne.

  • Rembourrage haut et bas : 200px

Ajouter une nouvelle ligne

Structure des colonnes

Ajoutez maintenant une ligne avec trois colonnes.

Dimensionnement

Avant d'ajouter des modules, ajustez la taille de la ligne.

  • Largeur de gouttière personnalisée : 2
  • Largeur: 80%
  • Largeur maximale : 100 %

Paramètres de la colonne 2

Fond

Maintenant, stylisez la deuxième colonne en ajoutant un fond bleu.

  • Couleur de fond : Bleu # 51a2ff

Frontière

Continuez en arrondissant les bordures.

  • Coins arrondis : 1vw aux quatre coins

Boîte ombre

Enfin, ajoutez également une ombre de boîte.

  • Ombre : troisième option
  • Force du flou : 80px
  • Couleur : rgba(0,0,0,0.13)

Ajouter le module Personne à la colonne 1

Teneur

Il est temps d'ajouter les modules. Commencez par un module de personne dans la colonne 1 et ajoutez le contenu.

  • Nom : Jenny McAbee
  • Poste : Contributeur régulier
  • Corps : texte du paragraphe
  • Image : Photo de portrait

Fond

Ajoutez un fond blanc au module.

  • Couleur de fond : Blanc #000000

Image

Dans l'onglet Conception, stylisez la bordure de l'image comme suit.

  • Coins arrondis : 0.5vw en haut à gauche et en haut à droite
  • Styles de bordure : bordure inférieure
    • Largeur : 5px
    • Couleur: Bleu # 51a2ff

Texte du titre

Continuez en stylisant le texte du titre.

  • Niveau de titre : H4
  • Police : Alegreya Sans SC
  • Style: TT
  • Couleur : #021859
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 3vw
    • Téléphone : 5vw
  • Espacement des lettres : 1px
  • Hauteur de ligne : 1,6 em

Le corps du texte

Puis aussi, le corps du texte.

  • Police : Lato
  • Couleur: Bleu #1a1f73
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2vw
    • Téléphone : 3vw
  • Hauteur de ligne : 2 em

Texte du poste

Continuez avec le texte de position.

  • Police : Lato
  • Style : Italique
  • Couleur : #021859
  • Taille:
    • Ordinateur de bureau : 0.8vw
    • Tablette : 3vw
    • Téléphone : 3.5vw

Dimensionnement

Ensuite, ajustez la taille.

  • Largeur:
    • Ordinateur de bureau : 100 %
    • Tablette : 50 %
    • Téléphone : 70 %
  • Alignement du module : Centre

Espacement

Aussi, l'espacement.

  • Rembourrage supérieur et inférieur : 4vw

Frontière

Ensuite, ajoutez des coins arrondis.

  • Coins arrondis : o.5vw aux quatre coins
  • Styles de bordure : 24 px sur les quatre côtés
    • Couleur : Blanc #ffffff

Boîte ombre

Enfin, ajoutez une ombre de boîte.

  • Ombre : troisième option
  • Force du flou : 80px
  • Couleur : rgba(0,0,0,0.13)

Ajouter le module de suivi des médias sociaux à la colonne 1

Réseaux

Sous le module de personne, ajoutez un module de suivi des médias sociaux avec trois réseaux sociaux.

  • Facebook
  • Linkedin
  • Twitter

Paramètres réseau

Appliquez une couleur de fond transparente à chaque réseau social. Vous devez le faire un par un.

  • Arrière-plan : Transparent

Alignement

Dans les paramètres de conception principaux, centrez l'alignement du module.

  • Alignement du module : Centre

Icône

Enfin, coloriez les icônes en bleu.

  • Couleur: Bleu # 51a2ff
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette et téléphone : 4vw

Ajouter un module de texte à la colonne 2

Teneur

Passez à la colonne 2. Ajoutez un module de texte avec du contenu h3 de votre choix.

  • Texte : laissez-nous un commentaire

Fond

Ajoutez un fond blanc.

  • Couleur de fond : Blanc #ffffff

Texte d'en-tête

Passez ensuite à l'onglet Conception et stylisez le texte du titre.

  • Niveau de titre : H3
  • Police : Alegreya Sans SC
  • Poids : gras
  • Style de police : TT
  • Couleur : Bleu #021859
  • Taille:
    • Ordinateur de bureau : 2vw
    • Tablette et téléphone : 5.5vw

Espacement

Enfin, ajustez l'espacement.

  • Rembourrage supérieur :
    • Ordinateur de bureau : 3vw
    • Tablette : 2vw
    • Téléphone : 6vw
  • Rembourrage inférieur
    • Ordinateur de bureau et tablette : 3vw
  • Rembourrage gauche et droit :
    • Ordinateur de bureau et tablette : 1vw

Ajouter un module de commentaires à la colonne 2

Éléments

Ajoutez maintenant le module de commentaires à la colonne 2. Activez tous les éléments.

  • Afficher l'avatar de l'auteur : Oui
  • Afficher le bouton de réponse : Oui
  • Afficher le nombre de commentaires : Oui

Fond

Ajoutez un fond blanc au module de commentaires.

  • Couleur de fond : Blanc #ffffff

Des champs

Ensuite, commencez à styliser le module en ajustant les paramètres des champs comme suit

  • Couleur de fond : Blanc #ffffff
  • Couleur du texte : bleu #1a1f73
  • Couleur d'arrière-plan de la mise au point : Blanc #ffffff
  • Couleur du texte de mise au point : bleu #1a1f73
  • Police : Alegreya Sans SC
  • Style: TT
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 3vw
    • Téléphone : 4vw
  • Coins arrondis : 5px tous les coins

Image

Modifiez également les paramètres de l'image.

  • Coins arrondis : 5px
  • Style de bordure : tous les côtés
  • Largeur : 3px
  • Couleur: Bleu #1a1f73

Texte du nombre de commentaires

Ensuite, le texte du compte de commentaire.

  • Niveau de titre : H3
  • Police : Alegreya Sans SC
  • Style de police : TT
  • Couleur : Bleu #021859
  • Taille:
    • Ordinateur de bureau : 1.3vw
    • Tablette : 3vw
    • Téléphone : 5vw
  • Hauteur de ligne : 2 em

Texte du titre du formulaire

En outre, stylisez le texte du titre du formulaire.

  • Niveau de titre : H3
  • Police : Alegreya Sans SC
  • Style de police : TT
  • Couleur : Bleu #021859
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 3vw
    • Téléphone : 5vw
  • Hauteur de ligne : 2 em

Méta-texte

Passez au méta-texte et au style comme suit.

  • Police : Lato
  • Couleur : #021859
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 2,7 vw
    • Téléphone : 3.5vw

Texte du commentaire

Puis le texte du commentaire.

  • Police : Lato
  • Couleur : #021859
  • Taille:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 1.8vw
    • Téléphone : 2.5vw

Bouton

N'oubliez pas de styliser les boutons aussi.

  • Taille du texte:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 2.5vw
    • Téléphone : 3.5vw
  • Couleur du texte : Blanc #ffffff
  • Rayon de bordure : 5px
  • Police : Lato

Espacement

Aussi, l'espacement du module de commentaires.

  • Marge supérieure:
    • Ordinateur de bureau : -1vw
    • Tablette et téléphone : -3,3 vw
  • Rembourrage supérieur :
    • Ordinateur de bureau et tablette : 3vw
    • Téléphone : 4vw
  • Rembourrage inférieur :
    • Ordinateur de bureau : 3vw
    • Téléphone et tablette : 0vw
  • Rembourrage gauche et droit :
    • Ordinateur de bureau : 2vw
    • Tablette : 4vw
    • Téléphone : 7vw

Frontière

Enfin, ajoutez des coins arrondis au module de commentaires.

  • Styles de bordure : 2px sur les quatre côtés
  • Couleur: Bleu #1a1f73

Ajouter le module d'option de messagerie à la colonne 3

Teneur

Passez à la colonne 3 et à un module d'inscription par e-mail. Donnez un titre au module.

  • Texte : Obtenez des mises à jour régulières
  • Corps : texte du paragraphe

Compte email

Configurez votre fournisseur de messagerie dans l'onglet compte de messagerie. Choisissez une liste et ajoutez votre clé API.

  • Fournisseur de messagerie
    • Lister
    • clé API

Des champs

Ensuite, sélectionnez pour n'utiliser qu'un seul champ de nom.

  • Utiliser le champ de nom unique : Oui

Fond

Ajoutez un fond blanc au module.

  • Couleur de fond : Blanc

Disposition

Passez à la conception et modifiez les paramètres de mise en page comme suit.

  • Disposition : corps à gauche, formulaire à droite
  • Nom pleine largeur : Oui
  • Prénom pleine largeur : Oui
  • Nom de famille pleine largeur : Oui
  • E-mail pleine largeur : Oui

Des champs

Ensuite, stylisez les paramètres des champs.

  • Couleur du texte : bleu #1a1f73
  • Couleur de fond : Blanc #ffff
  • Couleur du texte de mise au point : bleu #1a1f73
  • Couleur d'arrière-plan de la mise au point : Blanc #ffff
  • Police : Lato
  • Taille du texte:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2.2vw
    • Téléphone : 3.2vw
  • Espacement des lettres : 1px
  • Coins plus arrondis : 0.2vw à tous les coins
  • Styles de bordure : les quatre côtés
    • Largeur : 2px
    • Couleur: Bleu #1a1f73

Texte du titre

Suivi du texte du titre.

  • Niveau de titre : H4
  • Police : Alegreya Sans SC
  • Poids : Moyen
  • Style de police : TT
  • Couleur: Bleu #1a1f73
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 4vw
    • Téléphone : 5vw
  • Espacement des lettres : 1px

Le corps du texte

Aussi, le corps du texte.

  • Police : Lato
  • Couleur: Bleu #1a1f73
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2.3vw
    • Téléphone : 3vw

Texte du message de résultat

N'oubliez pas le texte du message de résultat.

  • Police : Lato
  • Couleur: Bleu #1a1f73
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2.3vw
    • Téléphone : 3vw

Bouton

De plus, stylisez le bouton.

  • Taille du texte:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2.3vw
    • Téléphone : 3vw
  • Couleur du texte : Blanc #ffffff
  • Couleur de fond : Bleu # 51a2ff
  • Police : Lato

Espacement

Ajustez l'espacement.

  • Rembourrage supérieur et inférieur : 4vw

Frontière

Ensuite, ajoutez des coins arrondis.

  • Coins arrondis : o.5vw aux quatre coins

Boîte ombre

Enfin, ajoutez une ombre de boîte.

  • Ombre : troisième option
  • Force du flou : 80px
  • Couleur : rgba(0,0,0,0.13)

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat de ce didacticiel.

Bureau

Tablette

Téléphone

Bureau

Tablette

Mobile

C'est une enveloppe de module de commentaires !

C'est ça! Vous venez d'ajouter une section de commentaires personnalisée à votre modèle de publication de blog. Nous espérons que ces conceptions inspireront vos propres créations de créateurs de thèmes Divi. Vous avez pu télécharger les fichiers JSON des deux conceptions au début de ce didacticiel. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!