Comment créer un modèle de page de catégorie pour votre blog à l'aide de Divi Theme Builder

Une page de catégorie peut être extrêmement utile aux utilisateurs en leur fournissant une page entière remplie de choses qui les intéressent (ou recherchent). Mais souvent, la page de catégorie peut en souffrir en matière de conception. Dans Divi, avant l'époque du Divi Theme Builder, les développeurs devaient s'appuyer sur la personnalisation manuelle du code php sur un fichier de thème de modèle de page de catégorie, puis sur le style du modèle de page uniquement avec du CSS externe. Mais maintenant, avec le Divi Theme Builder, ce processus est devenu facile et agréable !

Dans ce tutoriel, nous allons vous montrer comment créer un modèle de page de catégorie pour votre blog à partir de zéro à l'aide de Divi Theme Builder. Nous vous montrerons comment configurer rapidement un nouveau modèle affecté aux catégories de publication ainsi que comment concevoir le modèle à l'aide des modules appropriés et du contenu dynamique à l'aide de Divi Builder.

Commençons!

Aperçu

Voici un aperçu du modèle de page de catégorie que nous allons concevoir ensemble dans ce tutoriel. Dans cette image, il est utilisé pour afficher tous les messages de la catégorie « Entreprise ».

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs 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 « 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 !

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.

Passons au tutoriel, voulez-vous ?

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 Divi Theme installé (ou le Divi Builder Plugin si vous n'utilisez pas le Divi Theme).
2. Étant donné que nous allons créer un modèle de page de catégorie pour les articles de blog, vous devrez avoir déjà créé des articles sur votre site Web avec des catégories qui leur sont attribuées.

Après cela, vous êtes prêt à partir.

Modules et contenu dynamique disponibles pour les modèles de page de catégorie

Lors de la création d'un modèle de page de catégorie pour un blog Divi, il est important de comprendre quels outils sont à votre disposition afin de pouvoir créer efficacement un modèle qui affiche dynamiquement les informations correctes. Pour un modèle de page de catégorie pour les articles de blog, nous souhaitons surtout afficher les articles de la catégorie actuelle chaque fois qu'un utilisateur visite une page de catégorie. Par exemple, si un utilisateur clique sur le lien de la catégorie « Entreprise », il devrait voir une page d'archives qui affiche tous les articles de la catégorie « Entreprise ». Certains modules Divi ont intégré des options pour rendre l'affichage de contenu dynamique sur un modèle assez facilement.

Le module Blogue

Le module Blog est le module principal qui doit être utilisé pour afficher les modèles de page de catégorie. C'est parce qu'il a l'option intégrée pour afficher les messages pour la page actuelle.

Il s'agit essentiellement de dire à Divi d'afficher les publications qui sont normalement générées chaque fois qu'un utilisateur visite la page. Ainsi, avec l'option définie pour afficher les « messages de la page actuelle », l'utilisateur pourra afficher une page de catégorie et afficher correctement les messages par catégorie.

Module Post Slider et Module Post Titre

Vous pouvez également utiliser le module Post Slider pour afficher les publications de la page actuelle. Ceci est utile pour créer un curseur de publication dynamique qui affiche les publications générées lors de la visite d'une page de catégorie, un peu comme le module de blog peut le faire.

Le module Post Title peut également être utilisé, mais il est pratiquement limité à la capacité d'afficher le titre de la page de manière dynamique. La plupart des autres éléments disponibles dans le module de titre de publication ne s'appliquent pas à une page d'archive, mais uniquement à des modèles de publication spécifiques.

Titre de l'article/de l'archive (contenu dynamique)

Un moyen plus simple d'afficher le titre de la page de publication/d'archivage consiste à utiliser un module Divi ordinaire, puis à extraire le titre de la page de publication/d'archivage à l'aide de la fonction de contenu dynamique disponible dans tous les modules Divi.

Par exemple, vous pouvez utiliser un module de texte, puis ajouter le titre de la page de publication/d'archive en tant que contenu dynamique au contenu du corps. Ensuite, vous pouvez styliser le titre comme vous le souhaitez.

Maintenant que vous comprenez les outils nécessaires pour créer un modèle de page de catégorie, passons à l'action et créons-en un ensemble.

Comment créer un modèle de page de catégorie pour votre blog

Pour ce modèle de page de catégorie, l'objectif est de créer une zone de corps personnalisée pour un modèle qui est attribué à toutes les pages de catégorie pour les articles de blog dans Divi. Nous n'allons pas créer une zone d'en-tête ou de pied de page personnalisée pour ce modèle. Mais vous pouvez facilement utiliser ce modèle sur votre propre site Web avec votre propre en-tête et pied de page.

Création et attribution d'un modèle personnalisé pour les catégories de publication

Pour commencer, accédez à votre tableau de bord WordPress et accédez à Divi > Générateur de thèmes. Cliquez ensuite sur la zone grise vide pour ajouter un nouveau modèle.

Ensuite, attribuez le modèle à Toutes les pages de catégorie.

Ajout d'une nouvelle zone de corps personnalisée au modèle

Pour créer le corps personnalisé du modèle, cliquez sur la zone Ajouter un corps personnalisé, puis sélectionnez « Créer un corps personnalisé ».

Ensuite, choisissez l'option « Construire à partir de zéro ».

Ajouter un titre d'archive dynamique

Dans l'éditeur de mise en page de modèle, créez une nouvelle ligne à une colonne dans la section normale.

Ajoutez ensuite un module de texte à la ligne.

Supprimez le contenu du corps par défaut et cliquez sur l'icône « Utiliser le contenu dynamique » et sélectionnez l'option « Titre de publication/d'archivage.

Une fois que l'élément Titre de publication/d'archivage est en place, ouvrez les paramètres en cliquant sur l'icône d'engrenage.

Mettez ensuite à jour les zones de saisie Avant et Après pour envelopper le contenu dans une balise H1 et ajoutez un élément supplémentaire de contenu statique après le titre dynamique comme suit :

Avant:

<h1>

Après:

 Articles</h1>

Nous devons envelopper le titre dans une balise H1 à des fins de référencement. Le mot statique « Articles » est ajouté après le titre de sorte que si un utilisateur visite une page de catégorie « Entreprise », le titre lira « Articles commerciaux ».

Style Titre de l'archive dynamique

Une fois le contenu dynamique en place, nous pouvons le styliser en utilisant les éléments suivants :

• Police de titre : Ubuntu
• Police de titre : Poids : gras
• Couleur du texte de l'en-tête : 192231
• Taille du texte de l'en-tête : 48px (ordinateur de bureau), 38px (tablette), 28px (téléphone)
• Hauteur de la ligne de cap : 1,2 em

Utilisation du module Blog pour afficher dynamiquement les articles de la catégorie actuelle

Une fois le titre de la page de catégorie dynamique en place, nous devons ajouter le module de blog pour afficher les articles de la page de catégorie actuelle.

Ajouter une nouvelle ligne

Ajoutez une nouvelle ligne à une colonne sous la ligne supérieure actuelle.

Ajouter un module de blog

Ajoutez ensuite un module de blog à la ligne.

Mettez à jour les options de contenu comme suit :

• Messages pour la page actuelle : OUI
• Nombre de messages : 9
• Afficher le bouton Lire la suite : OUI

N'oubliez pas que nous devons nous assurer que les publications pour la page actuelle sont activées pour la page de catégorie afin d'extraire la bonne archive de publication.

Module de blog de conception

Une fois les paramètres de contenu en place, apportons quelques modifications à la conception comme suit :

• Disposition : Grille

• Police du titre : Ubuntu
• Poids de la police du titre : gras
• Couleur du texte du titre : #192231
• Police Meta : Ubuntu
• Couleur du méta-texte : #985e6d
• Taille du méta-texte : 13 px

• Lire la suite Police : Ubuntu
• En savoir plus Poids de la police : gras
• Lire la suite Style de police : Souligné
• Lire la suite Couleur du texte : #985e6d
• Police de pagination : Ubuntu
• Couleur du texte de pagination : #985e6d
• Taille du texte de la pagination : 18px
• Hauteur de la ligne de pagination : 2 em

• Largeur de la bordure de la disposition de la grille : 0px
• Box Shadow : voir capture d'écran
• Force du flou d'ombre de la boîte: 70px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : rgba (25,34,49,0,3)

À ce stade, nous avons une page de catégorie de base opérationnelle avec le titre de la page et les articles de blog qui s'afficheront correctement en fonction de la page de catégorie actuelle. Cependant, nous pouvons être plus créatifs en ajoutant un module supplémentaire pour afficher le message de manière créative.

Créez un curseur de publication pour extraire les 4 publications les plus récentes de la catégorie actuelle.

Nous pouvons également utiliser un module de curseur de publication pour afficher dynamiquement les publications de la page de catégorie. Voici comment faire.

Ajouter une nouvelle ligne

Ajoutez d'abord une nouvelle ligne avec une disposition de colonnes 1/3 2/3 sous la ligne du haut.

Ajouter un module de curseur de publication

Dans la colonne de gauche, ajoutez un module post slider.

Mettez ensuite à jour les options de contenu du curseur de publication comme suit :

• Messages pour la page actuelle : OUI
• Nombre de messages : 4
• Afficher la méta du message : NON

Module de curseur de poste de conception

Maintenant que le contenu du curseur de publication est en place, mettez à jour les paramètres de conception comme suit :

• Alignement du texte : à gauche
• Police du titre : Ubuntu
• Hauteur de la ligne de titre : 1,3 em
• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 16px
• Couleur d'arrière-plan du bouton : #985e6d
• Largeur de la bordure du bouton : 0px
• Police des boutons : Ubuntu

• Box Shadow : voir capture d'écran
• Boîte Ombre flou Force: 70px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : rgba (25,34,49,0,3)

Créer un module de blog avec une mise en page pleine largeur

Dans la colonne de droite, nous pouvons ajouter un autre module de blog avec une disposition pleine largeur au lieu d'une disposition en grille. Cela nous permettra de fournir une autre zone d'affichage unique pour nos publications de catégorie.

Ajouter un module de blog

Pour gagner du temps, copions le module de blog existant dans la rangée du bas et collons-le dans la colonne de droite à côté du curseur de publication.

Mettre à jour les paramètres du module de blog en double

Ouvrez les paramètres du module de blog en double et mettez à jour les éléments suivants :

• Messages pour la page actuelle : OUI
• Nombre de messages : 3
• Longueur de l'extrait : 120
• Afficher l'image en vedette : NON (au moins pour l'instant)
• Afficher la pagination : NON

• Disposition : Pleine largeur :
• Box Shadow : aucun

Résultat à ce jour

Jusqu'à présent, le résultat est un affichage minimal des trois articles de blog.

Mais si nous voulons aller plus loin, nous pouvons ajouter quelques petites images en vedette à gauche de chacun des extraits de publication.

Utilisez des CSS personnalisés pour créer des images plus petites qui flottent à gauche du contenu de l'extrait de publication.

Pour ajouter quelques petites images en vedette à gauche des extraits d'articles de blog, nous devons ajouter du CSS personnalisé.

Donner une classe CSS personnalisée au module de blog

Pour commencer, nous devons ajouter une classe CSS personnalisée au module Blog. Ouvrez les paramètres du blog et, sous l'onglet Avancé, saisissez ce qui suit :

• Classe CSS : left-blog-image

Ajouter du code CSS avec un module de code

Étant donné que nous ajoutons simplement un petit extrait CSS à ce modèle, nous pouvons utiliser un module de code. Ajoutez un module de code sous le module de blog.

Insérer le code CSS

Saisissez ensuite le CSS suivant dans la zone de contenu du code :

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

Mettre à jour les paramètres du module de blog pour inclure l'image en vedette

Maintenant, nous pouvons rajouter l'image sélectionnée afin qu'elle s'affiche dans la nouvelle position sur la gauche grâce à l'extrait CSS.

Style supplémentaire au modèle

Avant de conclure, faisons quelques retouches mineures à la conception.

Ajouter et styliser un séparateur sous le titre de l'archive

Ajoutez un module de séparation directement sous le titre de la page d'archive en haut du modèle.

Mettez ensuite à jour les paramètres du diviseur comme suit :

• Couleur de la ligne : #985e6d
• Poids du diviseur : 3px
• Largeur maximale : 200 px

Ajouter un séparateur de section à la mise en page

Ouvrez les paramètres de section et ajoutez un séparateur de section comme suit :

• Style de séparateur supérieur : voir capture d'écran
• Couleur du séparateur supérieur : rgba (73,78,107,0,07)
• Hauteur du diviseur: 90vw
• Diviseur Flip : horizontal et vertical

Utilisez le numéro de décalage de poste avec chaque module pour éviter les affichages de poste en double

À l'heure actuelle, tous nos modules tirent le même contenu de publication pour la page de catégorie actuelle. Afin d'empêcher ces modules d'afficher des doublons, nous pouvons utiliser l'option Numéro de décalage de publication pour « ignorer » un certain nombre de publications affichant le flux de publication.

Décalage de poste de module de blog pleine largeur

Étant donné que notre curseur de publication affiche déjà la première publication (la plus récente) de la page de catégorie actuelle, nous pouvons décaler cette publication sur le module de blog adjacent. Ouvrez les paramètres du module de blog à droite du curseur de publication et mettez à jour le numéro de décalage de publication comme suit :

• Numéro de compensation de poste : 1

Maintenant, le module commencera avec le deuxième message le plus récent pour la page de catégorie actuelle.

Décalage de poste de module de blog de grille

Une fois que le premier décalage de publication du module de blog est en place, nous devons compenser les publications dans le module de blog principal au bas du modèle. Ouvrez ce module de blog et mettez à jour le numéro de décalage de publication comme suit :

• Numéro de compensation de poste : 4

Nous devons définir le numéro de décalage sur 4 pour tenir compte des 4 messages déjà affichés ci-dessus. Le module reprendra maintenant là où les autres modules s'étaient arrêtés et commencera avec le cinquième message le plus récent.

Résultats finaux

Pour afficher le résultat final, accédez au tableau de bord WordPress et accédez à Articles > Catégories. Cliquez ensuite pour afficher l'une des catégories existantes.

Voici le résultat final.

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

Dernières pensées

Espérons que cet article vous aidera à respirer un peu plus facilement face au défi de créer une conception de page de catégorie pour votre site Web. Le Divi Theme Builder le rend extrêmement facile à faire, en particulier avec le module de blog ayant désormais la possibilité d'afficher les articles de la page actuelle. Et l'option de décalage de publication vous permet de combiner plusieurs modules de blog (ou même des modules de curseur de publication) sans jamais voir les publications en double s'afficher.

Comment le Divi Theme Builder vous a-t-il aidé à créer des pages de catégories ?

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

À votre santé!