Comment créer dynamiquement un modèle de publication de blog simple et convivial avec Divi

Lorsque vous partagez de nouveaux articles de blog sur votre site Web, il est important de rendre l'expérience de lecture aussi simple que possible pour vos visiteurs. Cela signifie éliminer autant de distractions que possible, tout en respectant l'image de marque de votre site Web. Il est également important de permettre aux visiteurs de contrôler la taille du texte via leur navigateur, c'est là que l'unité de police rem relative est utile. Il permet aux utilisateurs d'ajuster la taille de la police affichée dans leur navigateur. Dans ce didacticiel, nous allons créer un modèle de publication de blog magnifique et simple qui prend fortement en compte l'expérience utilisateur. Vous pourrez également télécharger le fichier JSON gratuitement !

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 GRATUITEMENT le modèle d'article de blog simple et convivial

Pour mettre la main sur le modèle de billet de blog gratuit et convivial, vous devez d'abord le télécharger à l'aide du 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 !

Abonnez-vous à notre chaîne Youtube

1. Accédez à Divi Theme Builder et créez un nouveau modèle

Aller à Divi Theme Builder

Commencez par vous rendre sur le Divi Theme Builder.

Créer un nouveau modèle

Créez un nouveau modèle et utilisez-le sur tous vos messages.

• Utiliser sur : tous les messages

2. Commencez à créer le corps d'un article de blog

Ensuite, commencez à créer le corps personnalisé de votre modèle de publication.

Ajouter la ligne n° 1 à la section existante

Structure des colonnes

Dans l'éditeur de modèles, ajoutez une nouvelle ligne à la section déjà présente en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, 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

Bordure des colonnes 1 et 2

Ajoutez ensuite une bordure droite à la première et à la deuxième colonne.

• Largeur de la bordure droite : 1 px (ordinateur de bureau), 0 px (tablette et téléphone)
• Couleur de la bordure droite : #333333

Ajouter un module de texte à chaque colonne

Contenu dynamique

Continuez en ajoutant un module de texte à chaque colonne et sélectionnez du contenu dynamique pour chaque module individuellement.

• Module de texte dans la colonne 1 : Catégories de messages

• Module de texte dans la colonne 2 : date de publication

• Module de texte dans la colonne 3 : nombre de commentaires
• Après : Commentaires

Paramètres de texte

Passez à l'onglet de conception de chaque module et modifiez les paramètres de texte comme suit :

• Police du texte : Lato
• Taille du texte : 1.1rem
• Espacement des lettres du texte : 1px
• Hauteur de la ligne de texte : 2 em

Ajouter la ligne n° 2

Structure des colonnes

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

Ajouter le module de texte n°1 à la colonne

Contenu dynamique

Ajoutez un module de texte et sélectionnez le contenu dynamique du titre de la publication.

• Contenu dynamique : titre du message

• Avant : <H1>
• Après : </H1>

Paramètres de texte H1

Passez à l'onglet de conception du module et modifiez les paramètres de texte H1 comme suit :

• Police de titre : Affichage Playfair
• Alignement du texte de l'en-tête : Centre
• Taille du texte de l'en-tête : 6.2rem (ordinateur de bureau), 3.2rem (tablette), 2.3rem (téléphone)

Espacement

Ajoutez ensuite une marge supérieure et inférieure personnalisée.

• Marge supérieure : 50px
• Marge inférieure : 100px

Ajouter le module de texte #2 à la colonne

Contenu dynamique

Ajoutez un autre module de texte juste en dessous du précédent et sélectionnez le contenu dynamique de l'extrait de publication.

• Contenu dynamique : extrait de publication

Paramètres de texte

Modifiez les paramètres de texte du module comme suit :

• Police du texte : Lato
• Taille du texte : 1.1rem
• Espacement des lettres du texte : 1px
• Hauteur de la ligne de texte : 2 em
• Alignement du texte : Centre

Ajouter la ligne n° 3

Structure des colonnes

Ajoutez une autre ligne à la section en utilisant la structure de colonnes suivante :

Affichage

Assurez-vous que les colonnes restent côte à côte en ajoutant une ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter un module d'image à la colonne 1

Contenu dynamique

Continuez en ajoutant un module d'image à la colonne 1 et sélectionnez le contenu dynamique de l'image de profil de l'auteur.

• Contenu dynamique : photo du profil de l'auteur

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement de l'image.

• Alignement de l'image : à droite

Dimensionnement

Modifiez ensuite la largeur.

• Largeur : 50px

Espacement

Ajoutez une marge de droite sur la tablette et le téléphone.

• Marge de droite : 20px (tablette et téléphone)

Frontière

Et complétez les paramètres du module en ajoutant un rayon de bordure aux paramètres de bordure.

• Tous les coins : 100px

Ajouter un module de texte à la colonne 2

Contenu dynamique

Dans la deuxième colonne, nous aurons besoin d'un module de texte. Sélectionnez le contenu dynamique de l'auteur de l'article.

• Contenu dynamique : auteur de l'article

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Lato
• Taille du texte : 1.1rem
• Espacement des lettres du texte : 1px

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge supérieure : 15px
• Marge de gauche : 20 px (tablette et téléphone)

Ajouter la ligne n° 4

Structure des colonnes

Ajoutez une autre ligne à la section en utilisant la structure de colonnes suivante :

Ajouter un module de texte à la colonne

Laisser la zone de contenu vide

Ajoutez un module de texte à la colonne et assurez-vous de laisser la zone de contenu vide.

Image de fond dynamique

Ajoutez ensuite le contenu dynamique de l'image en vedette à l'image d'arrière-plan du module.

• Contenu dynamique : image en vedette

Dimensionnement

Continuez en modifiant les paramètres de dimensionnement du module sur différentes tailles d'écran.

• Largeur : 800 px (ordinateur de bureau), 500 px (tablette), 300 px (téléphone)
• Alignement du module : Centre

Espacement

Ajoutez également des rembourrages haut et bas personnalisés sur différentes tailles d'écran.

• Rembourrage supérieur : 400 px (ordinateur de bureau), 250 px (tablette), 150 px (téléphone)
• Rembourrage inférieur : 400 pixels (ordinateur de bureau), 250 pixels (tablette), 150 pixels (téléphone)

Frontière

Et ajoutez un rayon de bordure aux paramètres de bordure pour transformer le module en cercle.

• Tous les coins : 500px

Ajouter une nouvelle section

Passons à la prochaine section régulière.

Ajouter la ligne n° 1

Structure des colonnes

Ajoutez une nouvelle ligne à l'aide de la structure de colonnes suivante :

Ajouter un module de contenu de publication à la colonne

Paramètres de texte

Ajoutez le module de contenu de publication à la colonne, passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police du texte : Lato
• Taille du texte : 1.1rem
• Espacement des lettres du texte : 1px
• Hauteur de la ligne de texte : 2,3 em

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

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

• Police de titre : Affichage Playfair
• Taille du texte H2 : 3,5 rem (ordinateur de bureau), 2 rem (tablette et téléphone)
• Taille du texte H3 : 2,5 rem (ordinateur de bureau), 1,5 rem (tablette et téléphone)
• Taille du texte H4 : 2,3 rem (ordinateur de bureau), 1,3 rem (tablette et téléphone)
• Taille du texte H5 et H6 : 2rem (ordinateur de bureau), 1rem (tablette et téléphone)

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une autre ligne à la section en utilisant la structure de colonnes suivante :

Espacement

Ajoutez une marge supérieure personnalisée à la ligne.

• Marge supérieure : 100 pixels

Ajouter un module de commentaire à la colonne

Paramètres des champs

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

• Couleur d'arrière-plan des champs : #ffffff
• Police des champs : Lato
• Taille du texte des champs : 1.1rem

• Tous les coins : 0px
• Largeur de la bordure des champs : 1px
• Couleur de la bordure des champs : #000000

Paramètres d'image

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

• Tous les coins : 100px

Paramètres du texte du titre

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

• Titre Titre Niveau : H2
• Police du titre : Affichage Playfair
• Taille du texte du titre : 3rem (ordinateur de bureau), 2rem (tablette et téléphone)
• Hauteur de la ligne de titre : 1.4em

Paramètres de méta-texte

Stylisez également le méta-texte.

• Police Meta : Affichage Playfair
• Taille du méta-texte : 1.4rem

Paramètres de texte de commentaire

Nous utilisons les paramètres suivants pour les paramètres de texte de commentaire :

• Police du commentaire : Lato
• Taille du texte du commentaire : 1.1rem
• Espacement des lettres de commentaires : 1px
• Hauteur de la ligne de commentaire : 2 em

Paramètres du texte du bouton

Et complétez les paramètres du module en stylisant le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1.1rem
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 1px
• Police des boutons : Lato

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

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

Une fois que vous avez terminé la conception du modèle, enregistrez toutes les modifications de Divi Theme Builder et prévisualisez 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 créer un modèle d'article de blog beau et simple qui se concentre sur l'expérience utilisateur que vos visiteurs ont lors de la lecture. Modifiez ce modèle de publication à l'aide des options intégrées de Divi pour le faire correspondre à la marque de votre site Web. Vous avez également pu télécharger le fichier modèle 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.