Lorsque vous créez un site Web, il y a de fortes chances que vous y incluiez une page de blog et des articles de blog. Bien sûr, la partie la plus importante d’une stratégie de blog est la création d’un contenu de qualité, mais la conception joue également un rôle important dans le succès de votre stratégie. Lorsque vous créez un site Web avec Divi, vous pouvez rationaliser l’apparence de vos articles de blog dans le Créateur de thème Divi en créant un modèle d’article avec un contenu dynamique. Nous partageons régulièrement sur notre blog des modèles d’articles de blog qui vous aident à accélérer le processus, mais si vous cherchez spécifiquement à créer un article de blog à écran partagé, vous allez adorer cet article. Nous vous montrerons étape par étape comment procéder et vous pourrez également télécharger gratuitement le fichier JSON du modèle !
C’est parti !
Prévisualisation
Avant de nous plonger dans le tutoriel, 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 en écran partagé
Pour mettre la main sur le modèle gratuit d’article de blog en écran partagé, vous devrez d’abord le télécharger à l’aide du bouton ci-dessous. Pour avoir accès au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous êtes déjà sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur télécharger. Vous ne serez pas « réinscrit » et ne recevrez pas d’e-mails supplémentaires.
1. Allez dans Divi Theme Builder et ajoutez un nouveau modèle de message
Allez dans le Créateur de thème de Divi et ajoutez un nouveau modèle
Commencez par vous rendre dans le Créateur de thèmes de Divi. Une fois là, ajoutez un nouveau modèle.
Utilisez le modèle sur tous les articles
Utilisez le nouveau modèle sur tous vos articles.
Commencer à construire le corps du modèle
Et commencez à construire le corps du modèle.
2. Construire le corps du modèle de billet de blog
Paramètres des sections
Espacement
Une fois dans l’éditeur de modèle, vous remarquerez une section. Ouvrez ses paramètres, passez à l’onglet de conception et supprimez tous les rembourrages supérieurs et inférieurs par défaut.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Ajouter une nouvelle rangée
Structure des colonnes
Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :
Dimensionnement
Sans ajouter de modules, ouvrez les paramètres de la ligne et modifiez les paramètres de dimensionnement comme suit :
- Utiliser une largeur de gouttière personnalisée : Oui
- Largeur de la gouttière : 1
- Égaliser les hauteurs des colonnes : Oui
- Largeur : 100
- Largeur maximale : 100
- Hauteur minimale : 100vh (Bureau), Auto (Tablette et téléphone)
- Hauteur maximale : 100vh (ordinateur de bureau), aucune (tablette et téléphone)
Espacement
Supprimez tous les rembourrages supérieurs et inférieurs par défaut.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Débordements
Et définissez les débordements de la ligne comme étant cachés.
- Débordements horizontaux : Caché
- Débordement vertical : Caché
Paramètres de la colonne 1
Fond dégradé
Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez un fond en dégradé.
- Couleur 1 : rgba(255,255,255,0)
- Couleur 2 : #000000
- Type de gradient : Linéaire
- Placez le dégradé au-dessus de l’image d’arrière-plan : Oui
Image de fond
Nous utilisons l’image dynamique en vedette comme image de fond pour la colonne suivante.
- Image d’arrière-plan : Image vedette
Paramètres de la colonne 2
Espacement
Ensuite, nous allons ouvrir les paramètres de la colonne 2 et ajouter des valeurs de remplissage personnalisées aux paramètres d’espacement.
- Rembourrage supérieur : 8%
- Remplissage inférieur : 8%
- Rembourrage gauche : 8%
- Rembourrage droit : 8%
Débordements
Pour permettre aux gens de faire défiler la deuxième colonne, où le contenu de l’article et la boîte de commentaires apparaîtront, nous allons modifier le débordement vertical dans les paramètres de visibilité.
- Débordement vertical : Défilement (Bureau), Visible (Tablette et téléphone)
Ajouter un module de titre de message à la colonne 1
Éléments
Il est temps d’ajouter des modules, en commençant par un module de titre d’article dans la colonne 1. Désactivez l’option d’image vedette dans les paramètres des éléments.
Paramètres du texte du titre
Passez à l’onglet design et modifiez les paramètres du texte H1 en conséquence :
- Niveau de l’en-tête de titre : H1
- Police du titre : Work Sans
- Poids de la police du titre : Gras
- Couleur du texte du titre : #ffffff
- Taille du texte du titre : 60px (Desktop), 45px (Tablet), 35px (Phone)
- Espacement des lettres du titre : -1px
- Hauteur de la ligne de titre : 1.2em
Paramètres du méta texte
Modifiez ensuite les paramètres du méta texte.
- Police de méta : Work Sans
- Style de la police Meta : Majuscules
- Couleur du texte de la méta : #eaeaea
- Espacement des lettres Meta : 2px
Dimensionnement
Ensuite, modifiez la largeur en fonction des différentes tailles d’écran.
- Largeur : 81% (ordinateur de bureau), 100% (tablette et téléphone)
Espacement
Ajoutez ensuite quelques valeurs de rembourrage réactives.
- Rembourrage supérieur : 8% (Tablette et téléphone uniquement)
- Rembourrage inférieur : 8% (Tablette et téléphone uniquement)
- Rembourrage gauche : 7 % (tablette), 8 % (téléphone)
- Rembourrage droit : 7 % (tablette), 8 % (téléphone)
Position
Complétez les paramètres du module en modifiant les paramètres de position comme suit :
- Position : Absolue (Bureau), Par défaut (Tablette et téléphone)
- Emplacement : Centre en bas
- Décalage vertical : 10
Ajouter un module de contenu de message à la colonne 2
Passons à la colonne suivante. Là, le premier module dont nous avons besoin est un module de contenu d’article. Ce module affichera dynamiquement le contenu de votre message.
Paramètres du texte de l’en-tête
Apportez quelques modifications aux paramètres du texte de l’en-tête du module.
- Police de l’en-tête : Work Sans
- Poids de la police d’en-tête : Semi Bold
- Taille du texte de l’en-tête :
- H2 : 40px
- H3 : 30px
- H4 : 25px
- H5 : 16px
- H6 : 14px
- Espacement des lettres d’en-tête : -1px (H2, H3 et H4)
Classe CSS
Et ajoutez une classe CSS. Dans l’étape suivante de ce tutoriel, nous utiliserons cette classe CSS pour générer de l’espace entre les titres et les paragraphes.
- Classe CSS : blog-post-content
Ajouter le module de code à la colonne 2
Ajouter du code CSS pour l’espace entre les paragraphes et les titres
Ajoutez un module de code juste en dessous du module de contenu de poste et ajoutez les lignes de code CSS suivantes pour générer de l’espace entre les titres et les paragraphes :
Ajouter le module Commentaires à la colonne 2
Paramètres des champs
Le prochain et dernier module dont nous avons besoin dans la colonne 2 pour compléter ce tutoriel est un module de commentaires. Modifiez les paramètres des champs du module en conséquence :
- Fields Background Color : #ffffff
- Couleur du texte des champs : #000000
- Champs Top Padding : 30px
- Remplissage des champs en bas : 30px
- Fields Left Padding : 30px
- Fields Right Padding : 30px
- Police des champs : Work Sans
- Style de police Fields : Majuscules
- Fields Taille du texte : 15px
- Fields Espacement des lettres : 3px
- Champs Coins arrondis : 10px (tous les coins)
- Intensité du flou de l’ombre de la boîte des champs : 30px
- Couleur de l’ombre de la boîte de champ : rgba(0,0,0,0,0.06)
Paramètres du texte de comptage des commentaires
Modifiez ensuite les paramètres du texte du nombre de commentaires.
- Police de caractères du compte de commentaires : Work Sans
- Poids de la police du compte de commentaires : Gras
Paramètres du texte du titre du formulaire
Modifiez également les paramètres du texte du titre du formulaire.
- Niveau de l’en-tête du titre du formulaire : H3
- Police du titre du formulaire : Work Sans
- Poids de la police du titre du formulaire : Semi-bold
Paramètres du méta texte
Ensuite, nous allons apporter quelques modifications aux paramètres du méta texte.
- Police de méta : Work Sans
- Poids de la méta-police : Semi Bold
- Couleur du texte de la méta : #000000
Paramètres du bouton
Ensuite, nous allons donner un style au bouton en conséquence :
- Utiliser des styles personnalisés pour le bouton : Oui
- Taille du texte du bouton : 16px
- 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 : 100px
- Espacement des lettres du bouton : 2px
- Police du bouton : Work Sans
- Style de la police des boutons : Majuscules
- Rembourrage supérieur du bouton : 2%
- Rembourrage inférieur des boutons : 2%
- Rembourrage du bouton gauche : 5%
- Rembourrage du bouton droit : 5%
Espacement
Nous allons également ajouter une marge supérieure.
CSS du corps du commentaire
Nous terminerons les paramètres du module en ajoutant une ligne de code CSS au corps du commentaire du module dans l’onglet avancé.
margin-top : 50px
3. Enregistrer les modifications du constructeur de thème et voir le résultat
Maintenant que nous avons terminé le modèle d’article de blog, il ne nous reste plus qu’à enregistrer toutes les modifications apportées par le constructeur de thème Divi et à voir le résultat sur nos articles de blog !
Prévisualisation de
Maintenant que nous avons suivi toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.
Bureau
Mobile
Réflexions finales
Dans cet article, nous vous avons présenté une approche différente de la création d’un modèle d’article de blog pour votre site Divi. Plus précisément, nous vous avons montré comment créer un modèle d’article de blog à écran partagé à l’aide du Créateur de thème de Divi et du contenu dynamique. Nous vous avons guidé pas à pas tout au long du processus et avons ajouté un fichier JSON que vous avez pu télécharger gratuitement ! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section commentaire ci-dessous.
