Vous cherchez un moyen classique mais créatif d'afficher des articles de blog sur votre site Web ? Si c'est le cas, vous allez adorer ce cadeau Divi. Nous avons conçu un modèle d'article de blog classique inspiré de la machine à écrire qui s'applique automatiquement à tous les articles de blog de votre site Web ! Tout au long de cet article, nous montrerons également, étape par étape, comment vous pouvez recréer le design à partir de zéro dans le générateur de thèmes.

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 inspiré de la machine à écrire

Pour mettre la main sur le modèle d'article de blog gratuit inspiré de la machine à écrire, 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 !

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

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 ce 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 nouveau modèle.

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

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et changez la couleur d'arrière-plan.

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

Espacement

Ajoutez ensuite un rembourrage supérieur et inférieur personnalisé.

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

Frontière

Et complétez les paramètres de la section en ajoutant une bordure.

• Largeur de la bordure : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Couleur de la bordure : #ffffff

Ajouter la ligne n° 1

Structure des colonnes

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

Espacement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter un module d'image à la colonne

Télécharger une image

Ensuite, ajoutez un module Image à la colonne de la ligne et téléchargez une illustration de votre choix. L'illustration que nous utilisons dans ce didacticiel se trouve dans le dossier téléchargeable au début de ce didacticiel.

Espacement

Passez à l'onglet conception du module et modifiez les valeurs d'espacement comme suit :

• Marge supérieure : -150px
• Marge de gauche : -12vw (ordinateur de bureau), 0px (tablette et téléphone)

Ajouter la ligne n° 2

Structure des colonnes

Passons à la rangée suivante. Utilisez la structure de colonnes suivante :

Ajouter un module de texte à la colonne 1

Contenu dynamique

Ajoutez un module de texte à la première colonne de la ligne et utilisez le contenu dynamique suivant :

• Corps : Date de publication

• Format de la date : 06/08/1999 m/j/A

Paramètres de texte

Modifiez les paramètres de texte en conséquence :

• Police du texte : Élite spéciale
• Poids de la police de texte : gras
• Couleur du texte : #000000
• Taille du texte : 1.4rem

Cloner le module de texte trois fois

Une fois que vous avez terminé les paramètres du module de texte, vous pouvez cloner le module entier trois fois.

Modifier le contenu dynamique

Modifiez le contenu dynamique des modules en double comme suit :

• Dupliquer n° 1 : catégories de publication
• Duplicata n°2 : Auteur du message
• Duplicata n°3 : nombre de commentaires publiés
  • Après : Commentaires
  • Lien vers la zone de commentaires : Oui

Placez deux modules de texte dans la colonne 2

Continuez en plaçant les deux derniers modules de texte dans la deuxième colonne de la ligne,

Changer la couleur du texte du lien de la catégorie et du nombre de commentaires

Modifiez également la couleur du texte du lien si nécessaire.

• Couleur du texte du lien : #000000

Modifier l'orientation du texte des modules dans la colonne 2

Et complétez les modules de texte de la colonne 2 en modifiant leur alignement de texte sur différentes tailles d'écran.

• Alignement du texte : à droite (ordinateur de bureau), à gauche (tablette et téléphone)

Ajouter la ligne n° 3

Structure des colonnes

Au rang suivant ! Utilisez la structure de colonnes suivante :

Ajouter un module de texte à la colonne

Contenu dynamique

Ajoutez un module de texte à la colonne de la ligne et utilisez le contenu dynamique suivant :

• Corps : Titre de l'article/de l'archive

• Avant:

• Après:

Paramètres de texte H1

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

• Police d'en-tête : Special Elite
• Couleur du texte de l'en-tête : #000000
• Taille du texte de l'en-tête : 3,5 rem (ordinateur de bureau), 2,5 rem (tablette), 2 rem (téléphone)
• Hauteur de la ligne de cap : 1,5 em

Espacement

Ajoutez également des marges haut et bas personnalisées.

• Marge supérieure : 150 px
• Marge inférieure : 150px

Ajouter un module de contenu de publication à la colonne

Paramètres de texte

Passons au module suivant, qui est le module Post Content. Modifiez les paramètres de texte en conséquence :

• Police du texte : Élite spéciale
• Taille du texte : 1.2rem
• Hauteur de la ligne de texte : 2,5 em

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

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

• Police d'en-tête : Special Elite
• Couleur du texte de l'en-tête : #000000
• Titre 2 Taille du texte : 2 rem (H2), 1,9 rem (H3), 1,8 rem (H4), 1,7 rem (H5), 1,6 rem (H6)

Identifiant CSS

Et attribuez un identifiant CSS au module.

• ID CSS : post-content-module

Ajouter un module de code à la colonne

Ajouter un code CSS d'en-tête

Maintenant, pour ajouter une marge personnalisée aux différents en-têtes, nous allons ajouter le CSS personnalisé suivant à un module de code :

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

Ajouter la section #2

Couleur de l'arrière plan

Ajoutez une autre section au modèle de publication, ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan de la section.

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

Frontière

Ajoutez également une bordure.

• Largeur de la bordure : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Largeur de la bordure supérieure : 0px
• Couleur de la bordure : #ffffff

Ajouter une nouvelle ligne

Structure des colonnes

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

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 en conséquence :

• Couleur d'arrière-plan des champs : rgba(0,0,0,0)
• Couleur du texte des champs : #000000
• Remplissage inférieur des champs : 50px
• Police des champs : Special Elite
• Taille du texte des champs : 1.2rem

• Largeur de la bordure inférieure des champs : 1px
• Couleur de la bordure inférieure des champs : #000000

Paramètres du texte du nombre de commentaires

Avec les paramètres de texte du nombre de commentaires.

• Niveau d'en-tête du nombre de commentaires : H2
• Police du nombre de commentaires : Special Elite
• Nombre de commentaires Couleur du texte : #000000
• Taille du texte du nombre de commentaires : 2rem

Paramètres du texte du titre du formulaire

Apportez également quelques modifications aux paramètres du texte du titre du formulaire.

• Titre du formulaire Niveau d'en-tête : H3
• Police du titre du formulaire : Special Elite
• Couleur du texte du titre du formulaire : #000000
• Taille du texte du titre du formulaire : 1.5rem

Paramètres de méta-texte

Ensuite, modifiez les paramètres de méta-texte.

• Police Meta : Élite spéciale
• Couleur du méta-texte : #000000
• Taille du méta-texte : 1.5rem

Paramètres de texte de commentaire

Nous allons également apporter quelques modifications aux paramètres du texte des commentaires.

• Police du commentaire : Special Elite
• Taille du texte du commentaire : 1.2rem
• Hauteur de la ligne de commentaire : 2,5 em

Paramètres des boutons

Continuez en stylisant le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1.2rem
• Couleur du texte du bouton : #ffffff
• Arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px

• Police des boutons : Spécial Elite

Corps du commentaire CSS

Et complétez les paramètres du module en ajoutant une marge supérieure au corps du commentaire dans l'onglet avancé.

margin-top: 100px;

3. Enregistrez toutes les modifications du générateur de thèmes et prévisualisez le résultat

Une fois que vous avez créé le corps d'article de blog personnalisé de votre modèle, vous pouvez enregistrer toutes les modifications et afficher le résultat sur vos articles de blog !

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 avons partagé un modèle d'article de blog classique inspiré de la machine à écrire que vous avez pu télécharger gratuitement et utiliser pour votre prochain projet Divi ! Nous avons également recréé la conception du modèle de publication à partir de zéro. 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.