Comment concevoir une boîte d'auteur dynamique pour votre modèle d'article de blog avec Divi

Mentionner l'auteur de l'article dans vos articles de blog est essentiel. Désormais, avec le générateur de thèmes de Divi, vous pouvez ajouter une zone d'auteur dynamique à l'échelle du site à vos publications. Vous pouvez également styliser la boîte de l'auteur à l'aide des options intégrées de Divi, cela peut conduire à une belle conception Web. Dans ce tutoriel, nous allons vous montrer exactement comment concevoir une belle boîte d'auteur dynamique à l'intérieur de votre modèle de publication. Vous pourrez également télécharger gratuitement le fichier JSON du modèle de publication !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le modèle de publication GRATUITEMENT

Pour mettre la main sur le modèle de publication gratuit, vous devrez d'abord le 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

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.

TÉLÉCHARGER

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 !

1. Accédez à Divi Theme Builder et ajoutez un nouveau modèle de publication

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Commencez par vous rendre sur le Divi Theme Builder. Une fois là-bas, ajoutez un nouveau modèle.

Utiliser le modèle sur tous les messages

Utilisez le nouveau modèle sur tous vos messages.

• Utiliser sur : tous les messages

Commencer à créer le corps du modèle

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

2. Construire le corps du modèle d'article de blog

Paramètres de section

Couleur de l'arrière plan

Dans l'éditeur de modèles, vous remarquerez une section. Ouvrez les paramètres de la section et ajoutez une couleur d'arrière-plan.

• Couleur d'arrière-plan : #270fff

Image de fond

Téléchargez l'image de fond que vous pouvez trouver dans le dossier zippé que vous avez pu télécharger au début de cet article.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de la ligne et modifiez la largeur maximale dans les paramètres de dimensionnement.

• Largeur maximale : 1380 px

Ajouter un module de titre de message à la colonne

Éléments

Le seul module dont nous avons besoin dans cette rangée est un module de titre de poste. Nous désactivons l'image vedette de la publication dans les paramètres des éléments.

• Afficher l'image en vedette : Non

Paramètres de texte

Passez à l'onglet de conception du module et modifiez la couleur du texte dans les paramètres de texte généraux.

• Couleur du texte : clair

Paramètres du texte du titre

Modifiez ensuite les paramètres du texte du titre.

• Police du titre : Work Sans
• Taille du texte du titre : 7rem (ordinateur de bureau), 4rem (tablette), 2rem (téléphone)
• Espacement des lettres du titre : -2px

Paramètres de méta-texte

Avec les paramètres de méta-texte.

• Meta Font: Work Sans
• Taille du méta-texte : 1rem

Ajouter une nouvelle section

Espacement

Ajoutez une nouvelle section régulière au corps de votre modèle, ouvrez les paramètres de la section et supprimez tout le rembourrage supérieur par défaut.

• Rembourrage supérieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur maximale : 1380 px

Espacement

Supprimez également tous les rembourrages supérieurs par défaut.

• Rembourrage supérieur : 0px

Paramètres de la colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 200 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)
• Rembourrage inférieur : 200 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)
• Rembourrage gauche : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)
• Rembourrage droit : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)

Boîte ombre

Ajoutez également une ombre de boîte à la première colonne.

• Force du flou d'ombre de la boîte: 60px
• Couleur de l'ombre : rgba(0,0,0,0.09)

Ajouter un module de contenu de publication à la colonne 1

Paramètres de texte

Il est temps de commencer à ajouter des modules ! Placez le module de contenu de publication dans la colonne 1 et modifiez les paramètres de texte en conséquence :

• Police du texte : Work Sans
• Taille du texte : 1rem (ordinateur de bureau), 0.9rem (tablette et téléphone)
• Hauteur de la ligne de texte : 2,3 em

Paramètres de texte d'en-tête

Modifiez également les différents paramètres de texte de titre.

• Police de titre : Work Sans
• Titre 2 Taille du texte : 1,6 rem (H2), 1,5 rem (H3), 1,4 rem (H4), 1,3 rem (H5), 1,2 rem (H6)
• Hauteur de la ligne de cap : 1,3 em

Identifiant CSS

Complétez les paramètres du module en ajoutant un identifiant CSS.

• ID CSS : blog-post-content

Ajouter un module de code à la colonne 1

Insérer le code CSS de l'en-tête

Pour ajouter de l'espace entre les différents éléments de contenu de publication, nous allons ajouter un module de code à la colonne 1 et insérer les lignes de code CSS suivantes :

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Ajouter le module Personne à la colonne 2

Contenu dynamique

Dans la deuxième colonne, le seul module dont nous avons besoin est un module Person. Nous sélectionnerons le contenu dynamique suivant :

• Nom : Auteur du message
• Poste : auteur
• Corps : Biographie de l'auteur

Contenu dynamique d'image

Ajoutez également la photo de profil dynamique de l'auteur au module.

• Image : Image de profil de l'auteur

Couleur d'arrière-plan du survol

Ensuite, ajoutez une couleur de fond blanc au survol.

• Couleur d'arrière-plan : #ffffff

Paramètres du texte du titre

Passez à l'onglet de conception du module et modifiez les paramètres de texte H3 en conséquence :

• Titre Titre Niveau : H3
• Police du titre : Work Sans
• Taille du texte du titre : 1.1rem

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

• Police du corps : Work Sans
• Taille du corps du texte : 0.9rem
• Hauteur de la ligne du corps : 2 em

Paramètres de texte de position

Ensuite, modifiez les paramètres du texte de police de position.

• Police de position : Work Sans
• Taille du texte de la position : 0.9rem

Dimensionnement par défaut

Modifiez la hauteur dans les paramètres de dimensionnement.

• Hauteur : 160 px (ordinateur de bureau), automatique (tablette et téléphone)

Dimensionnement de survol

Et ramenez la hauteur à l'auto en vol stationnaire.

• Hauteur: automatique

Espacement

Ensuite, nous ajoutons de l'espace autour du module en utilisant un remplissage personnalisé.

• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Bordure par défaut

Et nous utiliserons également une bordure.

• Largeur de la bordure gauche : 0 px (ordinateur de bureau), 4 px (tablette et téléphone)
• Couleur de la bordure gauche : #270fff

Bordure de survol

Modifiez la largeur de la bordure au survol.

• Largeur de la bordure gauche : 4px

Ombre de boîte par défaut

Ensuite, ajoutez une ombre de boîte.

• Force du flou d'ombre de la boîte: 60px
• Couleur de l'ombre : rgba(0,0,0,0) (bureau), rgba(0,0,0,0.11) (tablette et téléphone)

Ombre de la boîte de survol

Changez la couleur de l'ombre au survol.

• Couleur de l'ombre : rgba(0,0,0,0.11)

Filtres par défaut

Passons à autre chose, nous allons changer l'opacité.

• Opacité : 41 % (ordinateur de bureau), 100 % (tablette et téléphone)

Filtres de survol

Ramenez l'opacité à 100 % en survol.

• Opacité : 100 %

Élément principal CSS

Pour ajouter l'effet collant que vous avez pu remarquer dans l'aperçu de cet article, nous allons ajouter quelques lignes de CSS personnalisé à l'élément principal du module.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

CSS de l'image du membre

Nous nous assurons que l'image du profil de l'auteur est alignée à gauche en ajoutant une seule ligne de code CSS à l'image du membre du module.

text-align: left;

Visibilité par défaut

Pour masquer le contenu du module sur le bureau, nous allons modifier les débordements dans l'onglet avancé.

• Débordement horizontal : masqué
• Débordement vertical : caché

Visibilité au survol

Nous allons faire apparaître le contenu au survol en changeant les débordements en visibles.

• Débordement horizontal : Visible
• Débordement vertical : visible

Ajouter une nouvelle section

Ajoutez une autre section à votre conception.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur maximale : 1380 px

Ajouter un module de commentaires à la colonne

Paramètres des champs

Le seul module dont nous avons besoin dans cette ligne est un module de commentaires. Modifiez les paramètres des champs comme suit :

• Couleur d'arrière-plan des champs : #ffffff
• Remplissage supérieur des champs : 20 px
• Remplissage inférieur des champs : 20 px
• Police des champs : Work Sans
• Taille du texte des champs : 1rem

Paramètres du texte du nombre de commentaires

Modifiez également les paramètres du texte du nombre de commentaires.

• Niveau d'en-tête du nombre de commentaires : H2
• Police du nombre de commentaires : Work Sans
• Taille du texte du nombre de commentaires : 1.5rem

Paramètres du texte du titre du formulaire

Ensuite, modifiez les paramètres du texte du titre du formulaire.

• Titre du formulaire Niveau d'en-tête : H3
• Police du titre du formulaire : Work Sans
• Taille du texte du titre du formulaire : 1.2rem

Paramètres de méta-texte

Modifiez également les paramètres de méta-texte.

• Meta Font: Work Sans
• Taille du méta-texte : 1rem

Paramètres de texte de commentaire

Nous modifions également les paramètres du texte des commentaires.

• Police du commentaire : Work Sans
• Taille du texte du commentaire : 1rem
• Hauteur de la ligne de commentaire : 2,3 em

Paramètres des boutons

Complétez les paramètres du module en stylisant le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1rem
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #270fff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px

• Police des boutons : Work Sans

3. Enregistrer les modifications apportées au générateur de thème et afficher le résultat

Une fois que vous avez terminé le modèle, assurez-vous d'enregistrer toutes les modifications, quittez le Générateur de thèmes et affichez le résultat sur vos publications !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment concevoir une belle boîte d'auteur dynamique à l'aide des options intégrées de Divi, de la fonctionnalité dynamique et du générateur de thèmes. Avec ces trois éléments combinés, il est maintenant plus facile que jamais de personnaliser votre modèle de publication de blog et de créditer l'auteur de la publication de manière créative. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.