Il est facile de concevoir un modèle de billet de blog en utilisant Divi Theme Builder. Mais une chose qui est souvent négligée lors de la conception des modèles de blog est la section commentaires. Heureusement, Divi dispose d’un formulaire de commentaires personnalisable qui peut être facilement ajouté au modèle de billet de blog. Dans cet article, nous vous montrerons comment créer deux sections de commentaires personnalisées que vous pouvez inclure dans n’importe quel modèle de blog. Vous pouvez également télécharger gratuitement le fichier json! On y va. Voyons comment les mises en page annotées sont affichées sur des écrans de différentes tailles. Le premier est un style simple en noir et blanc, le second est plus coloré.
Bureau
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 vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Nous avons recréé la conception du module d’annotation 1 Créer un dessin d
Ne 1 tablette et téléphone mobile: modèle d’image Point 2 Ajouter une nouvelle ligne – structure de colonne ajoutez maintenant une nouvelle ligne avec deux colonnes. Ensuite, redimensionnez la ligne. Largeur de gouttière personnalisée: 2 largeur: 80% largeur maximale: 100% Paramètres de colonne 2 bordure dans les paramètres de colonne, ajoutez une bordure au – dessus de la deuxième colonne. Styles: largeur supérieure seulement: 3px couleur: Noir # FFFFFF
Ajouter un formulaire texte au contenu de la colonne 1 Ajouter le premier formulaire texte à la colonne 1 qui contient du contenu H3 de votre choix. Texte: Paragraphes Ensuite, sur l’onglet conception, modélisez le texte du titre. Niveau du titre: H3 caractères: GFS Didot couleur: Noir # 000000 taille: Bureau: 5vw tablette: 9vw Téléphone: 13vw L’espacement peut également être ajusté. Remplissage du bas du Bureau: tablette 3vw et téléphone: 7vw Ajouter un formulaire de recommandation au contenu de la colonne 1 ajoutez maintenant un formulaire de recommandation à la colonne 1, qui contient certains des éléments que vous avez sélectionnés. Téléchargez également l’image.
Auteur: loyal Reader titre: Content Marketing Manager Company: Tiger media company Body: Paragraph text picture: portrait picture Arrière – plan assurez – vous que l’arrière – plan est transparent couleur de fond: transparent Dans l’onglet projet, sélectionnez pour afficher l’icône devis. Afficher l’icône devis: Oui L’icône devis modélise ensuite l’icône devis comme suit. Couleur: Noir # 000000 fond: blanc # FFFFFF icône taille de police: Bureau: 2vw tablette: 5vw Téléphone: 9vw L’image change les paramètres de l’image plus tard.
Largeur et hauteur: Bureau: tablette de 110 pixels et téléphone: filet de 90 pixels: bord de 90 pixels couleur: transparent Le texte modifie également l’alignement du texte. Alignement: Centre Le corps est ensuite modélisé. Caractères: verdana couleur noir taille: de
Sktop: 0.7vw tablette: 2vw Téléphone: 3vw Le texte de l’auteur continue de styliser le texte de l’auteur. Caractères: GFS diffot Weight: bold color: Black # ffffffff size: desktop: 1.2vw tablette: 2.5vw mobile: 4vw letter Spacing: 1px La position du texte, puis la position du texte. Caractères: GFS diffot color: Black # FFFFFF size: desktop: 0.9vw Tablet: 2vw Mobile Phone: 3vw Wire height: 2em
En outre, le texte de l’entreprise. Caractères: GFS diffot color: Black # FFFFFF size: desktop: 0.7vw tablette: 2vw Mobile Phone: 3vw Wire height: 2em Continuer à redimensionner le module. Largeur: Bureau: 60% tablette: 65% Téléphone: 75% alignement du module: Centre L’espacement peut également être ajusté. Remplissage supérieur: Bureau: 1,5vw tablette: 5vw Téléphone: 6vw Bordure Enfin, ajoutez la bordure supérieure au formulaire. Styles de bord: largeur supérieure seulement: 2px couleur: Noir # FFFFFF Ajoutez le formulaire d’annotation à l’élément de colonne 2 en passant à la colonne 2 et en ajoutant le formulaire d’annotation. Modifier les paramètres du projet comme suit.
Afficher l’image de l’auteur: non afficher la réponse du bouton: Oui afficher le nombre de commentaires: Non Les champs passent à l’onglet conception du formulaire et modifient les paramètres des champs. Couleur du texte: Noir # oooooooo couleur de fond: gris clair # f7f7f7 couleur de fond du texte avant – plan: Noir # oooooo couleur de fond: gris clair # f7f7f7f7 caractères: GFS Didot taille du texte: Bureau: 0,9vw tablette: 1,5vw Téléphone: 2,5vw espacement des lettres: 1px Texte du titre du formulaire ensuite, changez les paramètres du texte du titre du formulaire. Rôle: GFS diffot couleur: Noir # FFFFFF taille: Bureau: 0.9vw tablette: 2.5vw rôle: 3.5vw Continuer à styliser le métatexte. Caractères: GFS diffot couleur: Noir # FFFFFF taille: Bureau: 1.3vw tablette: 3vw Téléphone: 4vw En outre, le texte du commentaire. Karat
Ere: verdana couleur: Noir # FFFFFF taille: Bureau: 0.7vw tablette: 1.7vw Téléphone: 2.7vw espacement des lettres: 1px poids de ligne: 1,8 em Le bouton avance et donne un style au bouton. Taille du texte: Bureau: tablette 0.9vw: 2.5vw Téléphone: 3.5vw couleur du texte: blanc # 000000 fond: Noir # FFFFFF espace: 1px caractères: GFS diffot Ensuite, redimensionnez le module. Largeur: module 90% aligné: Centre Enfin, l’espacement est aussi l’espacement. Remplissage en haut: Bureau: tablette 4vw et téléphone: 8vw remplissage à gauche et à droite: 3vw Recréer la conception du module d’annotation Créer une image de fond la première étape pour recréer la disposition d’un module d’annotation de cercle coloré consiste à préparer l’arrière – plan. Vous pouvez créer un design circulaire simple dans votre éditeur de graphiques préféré. Pour créer une image de fond, créez une toile de 1800 pixels de large et 1800 pixels de haut. Ajoutez deux cercles, l’un plus grand que l’autre. Colorez le cercle et ajoutez de la transparence. Placez les deux cercles légèrement superposés dans le coin supérieur gauche de la toile. Groupez les cercles en objets et copiez – les. Retournez le cercle et placez – le en diagonale vers le bas et à droite à partir des deux premiers points. Assurez – vous de laisser de l’espace en haut et en bas. Lorsqu’il y a beaucoup de commentaires, l’image se répète et est placée verticalement des deux côtés. La conception de fond que nous avons créée pour ce modèle de mise en page d’annotation se trouve également dans un dossier compressé que vous pouvez télécharger au début du tutoriel. Il est temps d’ouvrir Theme Builder et d’ajouter un nouveau modèle. Ajouter un nouveau modèle. Sélectionnez un modèle pour tous les messages appliquer le modèle à tous les messages. Ajoutez des entités personnalisées et construisez à partir de zéro, puis commencez à créer des entités personnalisées pour votre modèle. Ajouter une nouvelle section une fois dans l’éditeur mo
Delli, vous remarquerez une partie. Ouvrez la section et Téléchargez l’image de fond. Comprend également une couverture de gradient. Fond: Gradient Gradient Gradient Gradient Gradient 1: rgba transparent white (255255255,0,55) Gradient 2: rgba transparent white (255255255,0,55) Image: Fond circulaire De plus, réglez l’espacement des sections avant d’ajouter des lignes. Remplissage supérieur et inférieur: 200 px Ajouter une nouvelle ligne de structure de colonne ajoutez maintenant une ligne avec trois colonnes. Redimensionner avant d’ajouter un module, redimensionnez la ligne. Largeur de gouttière personnalisée: 2 largeur: 80% largeur maximale: 100% Paramètres de colonne 2 background modélise maintenant la deuxième colonne en ajoutant un fond bleu. Couleur de fond: bleu # 51a2ff La bordure continue à arrondir les bords. Filets: 1vw les quatre coins Enfin, ajoutez une ombre de boîte. Ombres: troisième option intensité du flou: 80px couleur: rgba (0,0,0,0,13) Il est temps d’ajouter un module personnel au contenu de la colonne 1. Commencez par le formulaire personne dans la colonne 1 et ajoutez du contenu. Nom: Jenny mcabee titre: collaboratrice régulière corps: paragraphe texte Image: portrait photo L’arrière – plan ajoute un arrière – plan blanc au formulaire. Couleur de fond: blanc # 000000 Image sur l’onglet conception, modélisez les bords de l’image comme suit. Filet: 0,5vw en haut à gauche et à droite style de bord: largeur du bord inférieur: 5px couleur: bleu # 51a2ff Le texte du titre continue de styliser le texte du titre. Niveau du titre: H4 caractères: alegreya sans SC style: tt couleur: # 021859 taille: Bureau: 1vw tablette: 3vw Téléphone: 5vw espacement des lettres: 1px poids de ligne: 1,6 em Le corps est ensuite le corps. Caractères: couleur latérale: bleu # 1a1f73 taille: Bureau: 0,7vw tablette: 2vw Téléphone: 3vw hauteur de ligne: 2em Emplacement du texte
Continuez à utiliser le texte de localisation. Police: style latéral: couleur en italique: # 021859 taille: Bureau: 0,8vw tablette: 3vw Téléphone: 3,5vw Redimensionnez et redimensionnez. Largeur: Bureau: 100% compression: 50% Téléphone: 70% alignement du module: Centre Et l’espacement. Garniture supérieure et inférieure: 4vw Ensuite, ajoutez des filets. Filet: o.5vw full Quad Edge style: 24 pixels full Quad color: White # FFFFFF Boîte d’ombre enfin, ajoutez une ombre de boîte. Ombres: troisième option intensité du flou: 80px couleur: rgba (0,0,0,0,13) Ajoutez le module Focus sur les médias sociaux à la colonne 1, réseaux, sous le module personnel, et ajoutez un formulaire Focus sur les médias sociaux qui contient trois réseaux sociaux. Facebook LinkedIn Twitter Le réseau est configuré pour appliquer une couleur de fond transparente à chaque réseau social. Vous devez le faire l’un après l’autre. Contexte: transparent Alignement dans les principaux paramètres de conception, centrer l’alignement du module. Alignement des modules: Centre À la fin de l’icône, colorez l’icône en bleu. Couleur: bleu # 51a2ff taille: Bureau: tablette 1vw et téléphone: 4vw Changez le contenu de la colonne 2 en ajoutant un formulaire texte. Ajoutez un formulaire texte qui contient du contenu H3 de votre choix. Texte: envoyer un message Fond ajouter un fond blanc. Couleur de fond: blanc Ensuite, passez à l’onglet conception et modélisez le texte du titre. Niveau du titre: H3 font: alegreya sans SC Weight: bold font style: tt color: Blue # 021859 size: desktop: 2vw tablette and Mobile Phone: 5.5vw Enfin, réglez l’espacement. Remplissage supérieur: Bureau: 3vw tablette: 2vw Téléphone: 6vw remplissage inférieur Bureau et tablette: 3vw remplissage gauche et droite: Bureau et tablette: 1vw Ajouter un formulaire d’annotation à la colonne 2 Éléments ajouter maintenant un formulaire d’annotation à la colonne 2.
Tel: 7vw Enfin, ajoutez des filets au formulaire d’annotation. Styles de bord: 2 couleurs quadrilatères: bleu Changez le contenu du formulaire d’activation de courriel à la colonne 3 et ajoutez le formulaire d’activation de courriel. Spécifiez un titre pour le formulaire. Texte: recevoir des mises à jour périodiques du texte: texte dans les paragraphes Définissez votre fournisseur de courriel dans l’onglet comptes de courriel. Sélectionnez une liste et ajoutez une clé API. Liste des clés de l’API du fournisseur de courriel Champ, sélectionnez ensuite un seul champ de nom à utiliser. Utiliser un seul champ de nom: Oui L’arrière – plan ajoute un arrière – plan blanc au formulaire. Couleur de fond: blanc Passez à la conception de l’at et modifiez les paramètres de mise en page comme indiqué ci – dessous. Layout: Body left, module right name Full Width: Yes name Full Width: Yes name Full Width: Yes Full Width email: Yes Les champs modélisent ensuite 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 de fond de mise au point: blanc # ffff caractères: taille du texte latéral: Bureau: 0,7vw tablette: 2,2vw Téléphone: 3,2vw espacement des lettres: 1px filet: 0,2vw full Corner Edge style: all sides width: 2px color: Blue # 1a1f73 Texte du titre Voici le texte du titre. Niveau du titre: H4 police: alegreya sans SC poids: police moyenne style: tt couleur: bleu # 1a1f73 taille: Bureau: tablette 1vw: 4vw Téléphone: 5vw espacement des lettres: 1px En outre, le texte. Police: couleur latérale: bleu # 1a1f73 taille: 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: couleur latérale: bleu # 1a1f73 taille: Bureau: 0,7vw tablette: 2,3vw Téléphone: 3vw Bouton avant
Ensuite, modélisez le bouton. Taille du texte: Bureau: 0.7vw tablette: 2.3vw Téléphone: 3vw couleur du texte: blanc # FFFFFF couleur de fond: bleu # 51a2ff caractères: côté L’espacement ajuste l’espacement. Garniture supérieure et inférieure: 4vw Ensuite, ajoutez des filets. Filets: o.5vw pour les quatre coins Boîte d’ombre enfin, ajoutez une ombre de boîte. Ombres: troisième option intensité du flou: 80px couleur: rgba (0,0,0,0,13) Aperçu maintenant que nous avons terminé toutes les étapes, jetons un dernier coup d’oeil aux résultats de ce tutoriel. Bureau Comprimés Téléphone Bureau Comprimés Mobile C’est un formulaire d’emballage de commentaires! C’est tout! Vous venez d’ajouter une section commentaires personnalisés au modèle de billet de blog. Nous espérons que ces dessins vous inspireront en tant que concepteur du thème Divi. Au début de ce tutoriel, vous pouvez télécharger les fichiers json pour les deux conceptions. Si vous avez des questions ou des suggestions, veuillez les commenter immédiatement dans la section commentaires ci – dessous!
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Nous avons recréé la conception du module d’annotation 1
Ne 1 tablette et téléphone mobile: modèle d’image Point 2
Auteur: loyal Reader titre: Content Marketing Manager Company: Tiger media company Body: Paragraph text picture: portrait picture
Largeur et hauteur: Bureau: tablette de 110 pixels et téléphone: filet de 90 pixels: bord de 90 pixels couleur: transparent
Sktop: 0.7vw tablette: 2vw Téléphone: 3vw
Afficher l’image de l’auteur: non afficher la réponse du bouton: Oui afficher le nombre de commentaires: Non
Ere: verdana couleur: Noir # FFFFFF taille: Bureau: 0.7vw tablette: 1.7vw Téléphone: 2.7vw espacement des lettres: 1px poids de ligne: 1,8 em
Delli, vous remarquerez une partie. Ouvrez la section et Téléchargez l’image de fond. Comprend également une couverture de gradient. Fond: Gradient Gradient Gradient Gradient Gradient 1: rgba transparent white (255255255,0,55) Gradient 2: rgba transparent white (255255255,0,55) Image: Fond circulaire
Continuez à utiliser le texte de localisation. Police: style latéral: couleur en italique: # 021859 taille: Bureau: 0,8vw tablette: 3vw Téléphone: 3,5vw
Tel: 7vw
Ensuite, modélisez le bouton. Taille du texte: Bureau: 0.7vw tablette: 2.3vw Téléphone: 3vw couleur du texte: blanc # FFFFFF couleur de fond: bleu # 51a2ff caractères: côté