Comment concevoir un modèle de publication de blog avec le générateur de thème de Divi (téléchargement GRATUIT)

Publié: 2019-11-05

Un modèle de publication de blog est probablement le modèle le plus important que vous puissiez ajouter à un site de blog. Il fournit une structure et une conception qui s'appliquent « par magie » à tous les articles de blog sur le front-end, tandis que les blogueurs n'ont qu'à se soucier de la rédaction du message sur le backend. Cela permet de gagner du temps en rationalisant le processus de création pour publier rapidement votre message sur le Web. Et avec le Divi Theme Builder, vous n'aurez pas à vous contenter d'un modèle de publication ennuyeux qui ressemble à tous les autres articles de blog sur le Web. Vous pouvez créer d'innombrables conceptions authentiques (visuellement) et ajouter facilement différentes combinaisons de contenu statique et dynamique dans votre modèle.

Dans cet article, nous couvrirons tout ce que vous devez savoir pour créer un modèle d'article de blog à l'aide de Divi Theme Builder. Nous couvrirons beaucoup de contenu, mais je pense que vous serez surpris de la facilité avec laquelle ces modèles peuvent prendre vie sous vos yeux.

Commençons maintenant !

Aperçu

Voici un aperçu du modèle de publication de blog que nous allons créer dans ce didacticiel.

Vous avez peut-être remarqué la similitude de cette conception de notre pack de mise en page de marketing numérique. Ce modèle de publication a été créé pour correspondre à la mise en page afin que vous puissiez l'utiliser en combinaison avec le Digital Marketing Layout Pack.

Prendre plaisir!

Téléchargez GRATUITEMENT le modèle d'article de blog

Pour mettre la main sur le modèle de ce tutoriel, 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 abonné et ne recevrez pas d'e-mails supplémentaires.

Télécharger les fichiers
Télécharger gratuitement

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.

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 !

Pour importer la mise en page du modèle sur votre site Web, vous devrez accéder au générateur de thème Divi et utiliser l'option de portabilité pour importer le fichier .json dans le générateur de thème.

modèle de page de catégorie divi

modèle de page de catégorie divi

Qu'est-ce qu'un modèle d'article de blog et pourquoi en avez-vous besoin ?

Un modèle d'article de blog est un modèle à l'échelle du site utilisé pour tous (ou certains) de vos articles de blog uniques sur votre site Web. Il s'agit d'un modèle prédéfini construit avec un contenu dynamique afin que tout article nouveau ou existant hérite automatiquement de la mise en page et de la conception du modèle attribué.

Il existe quelques raisons impérieuses d'utiliser un modèle de publication de blog. La principale raison d'utiliser un modèle d'article de blog est de rationaliser le processus de blog. Avoir un modèle prêt à l'emploi déjà conçu pour vos articles peut accélérer considérablement le processus de création en éliminant le besoin de concevoir les éléments de l'article à la volée et en laissant aux blogueurs plus de temps pour faire ce qu'ils font le mieux : écrire du contenu. Mais ce n'est pas tout! Un modèle de publication de blog peut incorporer des éléments supplémentaires (tels que des commentaires, des boutons de partage et des options d'e-mail) à la publication afin d'augmenter l'engagement des utilisateurs et d'augmenter les conversions.

Avec le Divi Theme Builder, créer un modèle de publication de blog est étonnamment facile. Le secret pour créer un modèle de publication de blog dans Divi est de comprendre quels modules utiliser et comment incorporer efficacement des éléments de contenu dynamique dans le modèle.

Avant de nous lancer dans la création d'un modèle de publication de blog ensemble, examinons d'abord certains des outils disponibles pour en créer un.

Blocs de construction d'un modèle d'article de blog

Les modèles d'articles de blog peuvent varier en fonction des besoins du blog. Mais généralement, un modèle d'article de blog se composera de la structure suivante :

  • Titre – La zone supérieure de la publication qui comprend généralement le titre de la publication, l'image en vedette et les métadonnées de la publication (catégories, balises, auteur, date de publication, etc.)
  • Contenu de la publication – Le contenu principal de l'article.
  • Articles connexes - Liens vers d'autres articles qui pourraient intéresser les lecteurs.
  • Commentaires – Une section permettant aux utilisateurs d'ajouter et de répondre aux commentaires sur la publication.
  • Appel à l'action – Généralement un formulaire d'inscription par e-mail, des icônes de partage social ou une offre promotionnelle quelconque.

Modules Divi et contenu dynamique

Un modèle de publication de blog peut être créé dans Divi Theme Builder en utilisant les capacités de contenu dynamique intégrées de Divi inhérentes aux modules Divi. Certains modules Divi sont spécialement conçus pour les publications. Cependant, la plupart des modules Divi auront la capacité d'extraire le contenu dynamique disponible lié à une publication. Voici une ventilation de certaines des options qui s'offrent à vous lors de la conception d'un modèle de publication de blog dans Divi.

  • Modules Divi conçus pour les modèles de publication
    • Module de navigation de publication – utile pour fournir des liens de navigation vers les publications précédentes et suivantes.
    • Module de curseur de publication - utile pour fournir une galerie de publications organisées par les plus récentes ou par catégorie.
    • Module Titre de la publication – utile pour afficher le titre de la publication avec une image en vedette dans un module pratique.
    • Module de contenu de publication - un module nécessaire pour le modèle de publication pour afficher le contenu d'une publication. Le module de contenu de publication comprend également des options de conception qui peuvent être utilisées comme conception par défaut pour le contenu de publication à l'échelle du site.
  • Éléments de contenu dynamique pour le modèle de publication disponibles dans tous les modules Divi
    • Titre de la publication/des archives
    • Extrait du message
    • Date actuelle
    • Slogan du site
    • Biographie de l'auteur
    • Auteur du message
    • Lien de publication
    • Catégories de messages
    • Décompte des commentaires
    • Date de publication
    • Les champs personnalisés

Maintenant que vous avez une bonne idée des outils disponibles, voyons comment nous pouvons créer un modèle de publication de blog dans Divi à partir de zéro.

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

  1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi (ou le plugin Divi Builder si vous n'utilisez pas le thème Divi).
  2. Assurez-vous d'avoir créé au moins quelques articles de blog afin d'afficher les résultats du modèle d'article de blog que nous allons créer. Assurez-vous d'inclure autant de contenu que possible dans chaque publication (c.-à-d. image vedette, catégories, etc.) afin d'avoir un bon exemple de publication réelle.

Après cela, vous êtes prêt à commencer à créer un nouveau modèle pour vos articles de blog dans Divi.

Comment créer un modèle de publication de blog dans le générateur de thème Divi

Abonnez-vous à notre chaîne Youtube

Comme tous les modèles, un modèle de publication de blog est créé dans Divi Theme Builder, ce qui vous permettra de créer le modèle entièrement à partir de zéro avec la puissance du Divi Builder.

Création d'un nouveau modèle

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Cliquez ensuite sur le carré vide « Ajouter un nouveau modèle ».

Attribution du modèle à tous les articles de blog

Une fois que vous avez ajouté un nouveau modèle, la boîte des paramètres du modèle apparaîtra, vous permettant d'attribuer le modèle aux pages et/ou aux publications de votre site Web. Étant donné que nous souhaitons créer un modèle de publication de blog pour tous les articles de blog à l'échelle du site, sélectionnez « Tous les articles » et cliquez sur le bouton Créer un modèle.

Création d'une disposition personnalisée de la zone du corps

Ensuite, cliquez sur la zone « Ajouter un corps personnalisé » du modèle pour créer une nouvelle zone de corps pour le modèle de publication. Sélectionnez ensuite « Créer un corps personnalisé ».

Sélectionnez l'option « Créer à partir de zéro » pour démarrer le processus de construction.

Création de la mise en page personnalisée du corps pour le modèle de publication

Une fois que l'éditeur de mise en page de modèle est lancé, vous avez la liberté de créer le corps entier de votre modèle de publication de blog à partir de zéro à l'aide de Divi Builder.

Pour commencer, ajoutez une ligne d'une colonne à la section régulière par défaut.

Ensuite, avant d'ajouter un module, mettez à jour les paramètres de la section avec un design d'arrière-plan et un peu de remplissage comme suit :

  • Couleur d'arrière-plan du dégradé de gauche : #8624e1
  • Dégradé de fond à droite : #3607a6
  • Direction du gradient : 130 degrés
  • Position de départ : 25 %
  • Image d'arrière-plan : insérer une image
  • Utiliser l'effet de parallaxe : OUI
  • Rembourrage : haut 7vw, bas 7vw

Création de l'en-tête du titre de l'article en tant que contenu dynamique avec le module de texte

À l'intérieur de la ligne à une colonne, ajoutez un module de texte.

Cliquez ensuite sur l'icône de contenu dynamique lorsque vous survolez la zone de contenu du corps.

Sélectionnez l'élément Titre de publication/d'archivage dans la liste.

Ensuite, cliquez sur l'icône d'engrenage sur l'élément Titre de publication/d'archivage et mettez à jour les zones de saisie avant et après avec les balises h1 comme suit :

Avant: 

<h1>

Après: 

</h1>

Concevez maintenant le titre avec les paramètres de conception suivants :

  • Police du texte : Roboto
  • Taille du texte du texte : 16px
  • Hauteur de la ligne de texte : 1,8 em
  • Alignement du texte : au centre
  • Police de titre : Roboto
  • Poids de la police d'en-tête : gras
  • Taille du texte du titre : 60px (ordinateur de bureau), 40px (tablette), 32px (téléphone)
  • Hauteur de la ligne de cap : 1,2 em

Ajout de l'image en vedette à l'aide d'un module d'image en tant que contenu dynamique

Une fois la section de titre en place, ajoutons l'image en vedette pour le modèle de publication. Pour ce faire, ajoutez une autre section régulière avec une disposition de colonnes de deux tiers et d'un tiers.

Ajoutez ensuite un module image dans la colonne de gauche.

Ajoutez ensuite l'élément de contenu dynamique de l'image en vedette pour l'image.

Conception du module image

Passez à l'onglet Conception et personnalisez l'image comme suit :

  • Alignement de l'image : centre
  • Marge : -9vw (ordinateur de bureau), 0vw (tablette)
  • Coins arrondis : 8px
  • Box Shadow : voir capture d'écran
  • Position verticale de l'ombre de la boîte : 16px
  • Force du flou de l'ombre de la boîte : 96 px
  • Force de propagation de l'ombre de la boîte: -24px

Ajouter l'auteur de l'article et la biographie de l'auteur au module Blurb en tant que contenu dynamique

Ensuite, nous allons ajouter un auteur de publication et une biographie de l'auteur de publication à l'aide d'un module de blog. Alors, allez-y et ajoutez un module de blog dans la colonne de droite.

Dans les paramètres de présentation, survolez la zone de saisie Titre et cliquez sur l'icône de contenu dynamique. Ajoutez ensuite l'élément de contenu dynamique Post Author pour le contenu Title.

Ensuite, ouvrez les paramètres de l'auteur de publication et mettez à jour l'entrée avant comme suit :

  • Avant : Écrit par

Pour le contenu du corps du module de présentation, cliquez sur l'icône de contenu dynamique et sélectionnez l'élément de contenu dynamique « Auteur Bio » dans la liste.

Pour l'image du module de présentation, ajoutez la « photo de profil de l'auteur de la publication » en tant que contenu dynamique.

Auteur du post de conception et module de présentation de la biographie

Optimisez maintenant la conception de l'image comme suit :

  • Placement des images/icônes : à gauche
  • Coins arrondis de l'image : 50 %
  • Police du titre : Roboto
  • Poids de la police du titre : gras
  • Hauteur de la ligne de titre : 1,3 em
  • Police de caractère : Lato
  • Hauteur de la ligne du corps : 1,4 em
  • Largeur de l'image : 50 pixels

Ajouter des catégories de publication au module Blurb en tant que contenu dynamique

Sous le module Auteur et biographie de l'auteur que vous venez de créer, ajoutez un autre module de présentation en dessous et sélectionnez l'élément de contenu dynamique Catégories de publication pour le titre.

Mettez ensuite à jour le texte de présentation avec une icône comme suit :

  • Utiliser l'icône : OUI
  • Icône : voir capture d'écran

Module de présentation de catégorie de publication de conception

Mettez à jour les paramètres de conception comme suit :

  • Couleur de l'icône : #dddddd
  • Placement des images/icônes : à gauche
  • Utiliser la taille de la police de l'icône : OUI
  • Taille de la police de l'icône : 20 px
  • Police du titre : Roboto
  • Poids de la police du titre : moyen
  • Couleur du texte du titre : #f92c8b
  • Taille du texte du titre : 16px
  • Hauteur de la ligne de titre : 20px
  • Remplissage : 16px à gauche

Ajouter le nombre de commentaires au module Blurb en tant que contenu dynamique

Pour ajouter le nombre de commentaires de publication pour le modèle de publication de blog, dupliquez le module de présentation que vous venez de créer.

Mettez ensuite à jour le contenu du titre avec l'élément de contenu dynamique Nombre de commentaires.

Étant donné que le nombre de commentaires n'affiche qu'un nombre, nous devons compléter le nombre par un texte d'ajout après le nombre. Pour ce faire, ouvrez les paramètres Post Comment Count et mettez à jour les éléments suivants :

Après : Commentaire(s)

Ensuite, mettez à jour l'icône comme suit :

  • Utiliser l'icône : OUI
  • Icône : voir capture d'écran

Ajouter la date de publication au module Blurb en tant que contenu dynamique

Pour le dernier élément de métadonnées, dupliquez le module de présentation avec le nombre de commentaires. Mettez ensuite à jour le contenu du titre avec l'élément de contenu dynamique « Date de publication ».

Astuce : Vous pouvez toujours ouvrir les paramètres de l'élément dynamique Date de publication pour modifier le format d'affichage de la date.

Ensuite, mettez à jour l'icône comme suit :

  • Utiliser l'icône : OUI
  • Icône : voir capture d'écran

Ajouter un module de contenu de publication avec des paramètres de conception pour le contenu

Avec le titre de la publication, l'image vedette, l'auteur de la publication et les métadonnées en place, nous sommes prêts pour le contenu principal de la publication.

Ajoutez une nouvelle ligne avec une disposition à une colonne.

Ajoutez ensuite un module de contenu de publication à la ligne.

Ce module de contenu de publication est l'endroit où le contenu principal de la publication sera affiché. De plus, nous pouvons mettre à jour les paramètres de conception afin d'établir la conception par défaut de tout le contenu de publication saisi à l'aide de l'éditeur par défaut. Nous pouvons mettre à jour les paramètres du module Post Content comme nous le ferions pour tout autre module. Et nous pouvons voir le contenu fictif fourni par le module lorsque nous mettons à jour le module.

Ouvrez les paramètres du module de contenu de publication et mettez à jour les paramètres d'image suivants :

  • Coins arrondis de l'image : 8px
  • Image Box Shadow : voir capture d'écran
  • Position verticale de l'ombre de la boîte : 16px
  • Force du flou de l'ombre de la boîte : 96 px
  • Force de propagation de l'ombre de la boîte: -24px

Ensuite, nous devons définir la conception de tous les éléments de contenu texte possibles lorsqu'un utilisateur crée un article de blog à l'aide de l'éditeur par défaut. Ouvrez la bascule du groupe d'options de texte pour afficher les 5 onglets différents de types de conceptions de texte - paragraphe, lien, liste non ordonnée, liste ordonnée et citation de bloc.

Mettez ensuite à jour les options suivantes sous chacun des onglets.

Continuez à mettre à jour les paramètres de texte de titre pour chacun des niveaux de titre – h1, h2, h3, h4, h5, h6.

  • Police de titre : Roboto
  • Poids de la police d'en-tête : gras
  • Taille du texte du titre (h1) : 56px (ordinateur de bureau), 42px (tablette), 28px (téléphone)
  • Taille du texte du titre (h2) : 45px (ordinateur de bureau), 35px (tablette), 24px (téléphone)
  • Taille du texte du titre (h3) : 40px (ordinateur de bureau), 30px (tablette), 20px (téléphone)
  • Taille du texte du titre (h4) : 32px (ordinateur de bureau), 24px (tablette), 18px (téléphone)
  • Taille du texte du titre (h5) : 28px (ordinateur de bureau), 20px (tablette), 16px (téléphone)
  • Taille du texte du titre (h6) : 24px (ordinateur de bureau), 18px (tablette), 14px (téléphone)

Ajouter un module de navigation de poste

Sous le module de contenu de publication, ajoutez une nouvelle ligne à une colonne avec un module de navigation de publication.

Mettez à jour le texte du lien précédent et suivant comme suit :

  • Lien précédent : Précédent : %title
  • Lien suivant : Suivant : %title

Ensuite, mettez à jour la conception de la navigation de la publication comme suit :

  • Police des liens : Roboto
  • Poids de la police des liens : gras
  • Couleur du texte des liens : #f92c8b

Ajouter une section de messages connexes

Après la navigation dans les articles, nous sommes prêts à ajouter une section « articles connexes » à notre modèle d'article de blog. Cela sera utile pour donner à l'utilisateur des suggestions de publications en fonction de la catégorie actuelle de la publication en cours de visualisation.

Ajouter un titre de publication connexe à l'aide du module de texte

Avant d'ajouter le module Blog pour extraire les publications associées, nous devons créer un titre statique pour la section. Pour ce faire, créez une nouvelle section avec une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne.

Mettez à jour le contenu du texte avec l'en-tête H2 suivant : 

<h2>You May Also Like...</h2>

Mettez ensuite à jour la conception du texte d'en-tête comme suit :

  • Police de titre 2 : Roboto
  • Titre 2 Taille du texte : 48px (ordinateur de bureau), 38px (tablette), 28px (téléphone)

Maintenant que notre titre est en place, nous sommes prêts à ajouter nos publications connexes.

Ajouter des articles liés à l'aide du module de blog avec des articles de la catégorie actuelle

Sous le module de texte contenant le titre, ajoutez un nouveau module de blog.

Mettez ensuite à jour le contenu du module de blog comme suit :

  • Nombre de messages : 3
  • Catégories incluses : Catégorie actuelle
  • Longueur de l'extrait : 120
  • Afficher l'auteur : NON
  • Afficher les catégories : NO
  • Afficher la pagination : NON

L'aspect le plus important de ces paramètres est la sélection de la « catégorie actuelle ». Cela permettra au modèle de publication d'extraire les publications les plus récentes qui partagent la même catégorie que la publication actuelle.

Une fois les paramètres de contenu du module de blog en place, passez aux paramètres de conception et mettez à jour les éléments suivants :

  • Disposition : Grille
  • Police du titre : Roboto
  • Taille du texte du titre : 14 px
  • Hauteur de la ligne de titre : 1,3 em
  • Police de caractère : Lato
  • Police Meta : Lato
  • Couleur du méta-texte : #f92c8b
  • Taille du méta-texte : 13 px
  • Disposition de la grille, coins arrondis : 20px

Continuez à mettre à jour la conception avec une ombre de boîte comme suit :

  • Largeur de la bordure de la disposition de la grille : 0px
  • Box Shadow : voir la capture d'écran
  • Position verticale de l'ombre de la boîte : 16px
  • Force du flou de l'ombre de la boîte : 96 px
  • Force de propagation de l'ombre de la boîte: -24px

Module d'ajout de commentaires

La dernière section de ce modèle d'article de blog contiendra les commentaires. Pour ajouter des commentaires à la publication, créez simplement une nouvelle ligne à une colonne et placez le module de commentaires à l'intérieur.

Module de commentaires de conception

Il ne reste plus qu'à personnaliser le design du module de commentaires pour qu'il corresponde à notre modèle. Mettez à jour les paramètres de conception suivants :

  • Couleur d'arrière-plan : #f2f5f9
  • Couleur d'arrière-plan des champs : #ffffff
  • Couleur d'arrière-plan de la mise au point des champs : #ffffff
  • Couleur du texte de mise au point des champs : #222222
  • Marge des champs : 3px en bas
  • Remplissage des champs : 18 pixels en haut, 18 pixels en bas
  • Police des champs : Lato
  • Taille du texte des champs : 16px
  • Hauteur de la ligne des champs : 1.4em

Continuez à mettre à jour les paramètres comme suit :

  • Coins arrondis de l'image : 60 px
  • Police du titre : Roboto
  • Taille du texte du titre : 26px (ordinateur de bureau), 20px (tablette), 15px (téléphone)
  • Hauteur de la ligne de titre : 1,3 em
  • Police Meta : Lato
  • Police du commentaire : Lato
  • Couleur du texte du commentaire : #222222
  • Rembourrage : 5 % en haut, 5 % en bas, 5 % à gauche, 5 % à droite

Enfin, personnalisez le style du bouton pour les commentaires comme suit :

  • Taille du texte du bouton : 14 px
  • Largeur de la bordure du bouton : 0px
  • Rayon de bordure de bouton : 4px
  • Espacement des lettres des boutons : 5 pixels (bureau), 5,5 pixels (survol)
  • Police des boutons : Roboto
  • Poids de la police du bouton : gras
  • Style de police des boutons : majuscule (TT)
  • Remplissage des boutons : 16 pixels en haut, 16 pixels en bas

Ajouter un séparateur de section à l'en-tête

N'oubliez pas toutes les options de conception étonnantes à votre disposition lors de la conception du modèle de publication. Par exemple, nous pouvons donner à la section d'en-tête une conception de diviseur. Pour ce faire, revenez en haut de la page et ouvrez les paramètres de la section supérieure contenant l'en-tête. Ensuite, mettez à jour les éléments suivants :

  • Style de séparateur inférieur : voir la capture d'écran
  • Couleur du séparateur : #ffffff
  • Hauteur du diviseur : 10vw
  • Diviseur Flip: horizontal

N'oubliez pas d'enregistrer vos paramètres pour la mise en page et également pour le générateur de thèmes afin que vos modifications soient enregistrées.

C'est ça! Voyons le résultat final.

Résultat final

Pour visualiser le résultat final, nous pouvons ouvrir n'importe quel article de blog au sein de notre site Divi (puisque le modèle a été attribué à tous les articles de blog).

Voici un exemple de publication lorsque vous l'affichez depuis l'éditeur de publication sur le backend.

Et voici l'article sur le front-end avec notre modèle d'article de blog en place.

Et le voici sur l'écran de la tablette et du téléphone :

Utiliser le Divi Builder pour créer un article de blog avec un modèle d'article de blog en place

Si vous le souhaitez, vous pouvez facilement déployer le Divi Builder pour concevoir un article de blog à l'aide d'un modèle d'article de blog comme celui-ci. Tout contenu créé et conçu avec Divi Builder sera affiché dans la zone Post Content Module du modèle.

Dernières pensées

J'espère que ce tutoriel servira de bon point de départ pour créer votre propre modèle de publication de blog à partir de zéro à l'aide de Divi Builder. N'oubliez pas de prendre le temps de considérer tous les outils disponibles ainsi que la manière dont vous souhaitez structurer la mise en page du modèle de publication. Il est toujours important d'utiliser autant d'éléments de contenu dynamiques dans le modèle d'article de blog afin de mieux rationaliser le processus de création impliqué dans les blogs. Avec un beau modèle en place, un blogueur peut vraiment se concentrer sur la création de contenu tandis que le modèle fait automatiquement tout le gros du travail de conception.

Avez-vous créé un modèle de publication de blog à l'aide du Divi Theme Builder ? Dites-nous ce que vous en pensez.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!