Comment donner à vos pages d'archives Divi une mise en page de maçonnerie
Publié: 2021-09-15Pour donner à vos pages d'archives une mise en page de maçonnerie personnalisée, nous pouvons utiliser le générateur de thème Divi pour concevoir un modèle de page d'archive dynamique personnalisé. 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 d'archive, puis sur le style du modèle de page uniquement avec du CSS externe. Cela a rendu la création d'une disposition en maçonnerie beaucoup plus difficile. Mais maintenant, avec le Divi Theme Builder, ce processus est devenu facile et agréable !
Dans ce didacticiel, nous allons vous montrer comment créer un modèle de page d'archive qui affiche dynamiquement le titre, le sous-titre et les articles de blog de la page d'archive. Et, en utilisant le module de publication de blog, nous pouvons facilement afficher nos archives de publication dans une disposition en grille de maçonnerie.
Commençons!
Aperçu
Voici un aperçu du modèle de page d'archive que nous allons concevoir ensemble dans ce didacticiel. Dans cette image, il est utilisé pour afficher tous les articles de la catégorie « WordPress ».
Téléchargez GRATUITEMENT le modèle de page d'archive
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 « réinscrit » ni ne recevrez d'e-mails supplémentaires.
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.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- 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).
- Étant donné que nous allons créer un modèle de page d'archive, vous aurez besoin d'avoir déjà créé des articles de blog sur votre site Web avec des auteurs, des catégories et/ou des balises qui leur sont attribués si vous souhaitez voir les résultats.
Après cela, vous êtes prêt à partir.
Comprendre les modules et le contenu dynamique disponibles pour les modèles de page d'archive
Lors de la création d'un modèle de page d'archive pour un site 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 d'archive, nous souhaitons surtout afficher les publications de la page actuelle chaque fois qu'un utilisateur visite une page d'archive. 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 des options intégrées pour simplifier l'affichage de contenu dynamique sur un modèle.
Le module Blogue
Le module Blog est le module principal qui doit être utilisé pour afficher les modèles de pages d'archives. 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 d'archive et afficher correctement les messages de cette page actuelle.
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 d'archive, passons à l'action et créons-en un ensemble.
Comment créer un modèle de page d'archive Divi avec une disposition en maçonnerie
Pour créer un modèle de page d'archive avec une mise en page en maçonnerie, il vous suffit de concevoir un nouveau modèle pour toutes les pages d'archive à l'aide du générateur de thème.
Création et attribution d'un modèle personnalisé pour toutes les pages d'archive
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 d'archive.
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, mettez à jour les paramètres de section par défaut avec une couleur d'arrière-plan.
- Couleur de fond : #eeeeee
Créez ensuite une nouvelle ligne à une colonne à l'intérieur de la section régulière.
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:
</h1>
Nous devons envelopper le titre dans une balise H1 à des fins de référencement.
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 : Mulish
- Police de titre : Poids : lourd
- Alignement du texte d'en-tête : Centre
- Couleur du texte du titre : #3a405a
- Taille du texte de l'en-tête : 70 pixels (ordinateur de bureau), 40 pixels (tablette et téléphone)
Ajouter le texte du sous-titre de l'archive dynamique
Étant donné que nous pouvons envelopper le titre de notre page d'archive dynamique avec du code HTML personnalisé, nous pouvons ajouter un sous-titre qui extrait le titre de la page d'archive dynamique dans le texte du sous-titre.
Pour ce faire, créez un nouveau module de texte sous le module de texte précédent avec le titre.
Supprimez le corps du texte par défaut et ajoutez le contenu dynamique du titre de la publication/de l'archive au corps (comme nous l'avons fait précédemment).
Ouvrez les paramètres de titre de publication/archive et ajoutez le contenu suivant avant et après.
Avant:
<h3>Here are the articles on
Après:
</h3>
Maintenant, le titre sera affiché en ligne avec la ligne de texte précédente.
Style Titre de l'archive dynamique
Une fois le contenu dynamique en place, nous pouvons styliser en mettant à jour les paramètres H3 suivants :
- Police du titre 3 : Mulish
- Alignement du texte de l'en-tête 3 : Centre
Utilisation du module Blog pour afficher dynamiquement les articles de la page actuelle
Une fois le titre de la page d'archive dynamique en place, nous devons ajouter le module de blog pour afficher les articles de la page d'archive actuelle.
Ajouter une nouvelle section
Avant d'ajouter le module de blog, ajoutons une nouvelle section à la page.
Ajouter une nouvelle ligne à une colonne
Ensuite, ajoutez une nouvelle ligne à une colonne à la nouvelle section.
Ensuite, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
- Utiliser une largeur de gouttière personnalisée : OUI
- Largeur de gouttière : 2 ;
- Largeur : 95%
Ajouter un module de blog pour afficher dynamiquement les articles de la page actuelle
Nous devons maintenant ajouter un module de blog à la ligne.
N'oubliez pas que nous devons nous assurer que les publications pour la page actuelle sont activées pour que la page archvie extrait la bonne archive de publication. Mettez à jour les options de contenu comme suit :
- Messages pour la page actuelle : OUI
Module de blog de conception
Une fois les paramètres de contenu en place, apportons quelques modifications à la conception. Sous l'onglet Conception, mettez à jour la mise en page comme suit :
- Disposition : Grille
Revenez maintenant à l'onglet contenu et ajoutez la couleur d'arrière-plan suivante aux éléments de la grille :
- Couleur de fond : #3a405a
Mettre à jour les styles de texte de titre
- Police du titre : Mulish
- Poids de la police du titre : gras
- Couleur du texte du titre : #eee
- Taille du texte du titre : 34 px
- Hauteur de la ligne de titre : 1,3 em
Mettre à jour les styles de corps de texte
- Police de caractère : Montserrat
- Couleur du corps du texte : #ffffff
- Hauteur de la ligne du corps : 2 em
Mettre à jour les styles de méta-texte
- Police Meta : Montserrat
- Couleur du méta-texte : #ffb100
Mettre à jour les styles de pagination
- Poids de la police de pagination : gras
- Couleur du texte de pagination : #3a405a
À ce stade, notre modèle de page d'archive est opérationnel, avec le titre de la page et les articles de blog (dans une mise en page en maçonnerie) qui afficheront dynamiquement les articles de la page d'archive actuelle.
Résultat final
Pour tester les résultats, visitez les différents types de pages d'archives sur votre site.
Voici un exemple de modèle de page d'archive de catégorie affichant tous les articles de la catégorie « WordPress ».
Voici un modèle de page d'archive d'auteur affichant tous les articles d'un auteur spécifique.
Voici une page d'archive de balises affichant tous les articles avec la balise « Actualités ».
Et voici un modèle de page d'archive de date affichant tous les articles du mois d'octobre 2019.
Dernières pensées
Une fois que vous savez comment créer un nouveau modèle d'archive avec le générateur de thème de Divi, il est facile d'ajouter une disposition de maçonnerie pour les publications. L'astuce consiste à utiliser les options intégrées de Divi pour afficher le titre de la page d'archive en tant que contenu dynamique, puis à utiliser le module de blog pour afficher dynamiquement la publication de la page actuelle dans une disposition en grille de maçonnerie. Espérons que cela contribuera à améliorer la conception globale de votre site Web en ciblant les pages d'archives qui peuvent facilement être négligées.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!