Comment ajouter un menu de catégorie collante à vos modèles de blog dans Divi

Les menus de catégorie sont un ajout délicieux à tout blog. Ils donnent aux blogueurs l'occasion de présenter les différents types de sujets disponibles afin que les lecteurs puissent accéder rapidement et facilement aux sujets qui les intéressent. Il est donc important que vous disposiez d'un menu de catégories bien conçu sur tous les modèles liés au blog de votre site Web.

Dans ce tutoriel, nous allons vous montrer comment ajouter un menu de catégorie collante à votre blog avec Theme Builder de Divi. Nous verrons comment créer le menu des catégories persistantes à l'aide de Divi Builder et également comment ajouter les menus des catégories aux différents modèles de votre site qui composent votre blog.

Commençons.

Aperçu

Voici le menu de catégorie collante ajouté au modèle de publication

Voici le menu des catégories collantes du bas sur mobile.

Voici le menu de catégorie sur le modèle de page de catégorie.

Et voici un modèle de blog rapide et facile que nous allons créer avec le menu des catégories collantes commençant sous le curseur de publication et restant en haut de la page lors du défilement.

Téléchargez le(s) modèle(s) GRATUITEMENT

Pour mettre la main sur les modèles avec le menu des catégories collantes de ce tutoriel, vous devrez 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 abonné et ne recevrez pas 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 sur votre page, extrayez simplement le fichier zip et ajoutez l'un des fichiers json dans le générateur de thème Divi à l'aide de l'option Portabilité du 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 thème Divi.
2. Téléchargez Theme Builder Pack #6 pour commencer le nouveau design.

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

Abonnez-vous à notre chaîne Youtube

Ajout d'un menu de catégorie secondaire collant à vos modèles de blog

Téléchargement du pack de création de thèmes #6

Pour ce tutoriel, nous allons utiliser le Theme Builder Pack #6. Une fois que vous avez téléchargé le pack à partir de l'article de blog, accédez au tableau de bord WordPress et accédez à Divi > Theme Builder.

Cliquez ensuite sur l'icône de portabilité en haut à droite. Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier Divi-Theme-Builder-Pack-6-All.json. Cliquez ensuite sur le bouton « Importer des modèles de générateur de thème Divi ».

Cela importera tous les modèles dans le générateur de thèmes.

Nous sommes maintenant prêts à commencer à créer notre menu de catégorie.

Créer un nouveau menu de catégorie dans WordPress

Un menu de catégorie peut être créé comme un menu normal dans WordPress. Depuis le tableau de bord WordPress, accédez à Apparence > Menus. Cliquez sur le lien Créer un nouveau menu, donnez un nom au menu et cliquez sur le bouton "Créer un menu".

Sous les éléments de menu, ouvrez la bascule Catégories et sélectionnez toutes les catégories/pages que vous souhaitez ajouter au menu. Assurez-vous d'avoir déjà créé des catégories pour que les éléments de catégorie apparaissent dans le basculement des catégories. Les éléments du menu de catégorie seront redirigés vers la page de catégorie pour une catégorie de publication spécifique.

Conception d'un menu de catégorie collante dans la zone du corps du modèle de publication.

Une fois le menu des catégories créé, il est temps de concevoir notre menu des catégories. Pour ce faire, nous devrons l'ajouter à une zone du corps de l'un des modèles. Nous ajouterons éventuellement le menu des catégories à d'autres modèles liés au Blog, mais pour l'instant, ajoutons-le au modèle pour tous les articles (ou modèle d'article).

Ouvrir l'éditeur de mise en page du modèle de zone du corps

Dans l'interface Theme Builder, recherchez le modèle déjà attribué à "Tous les messages" et cliquez sur l'icône de modification dans la zone de corps personnalisée.

Ajouter une nouvelle section et une nouvelle ligne en haut du modèle

Dans l'éditeur de mise en page de modèle, créez une nouvelle section avec une ligne à une colonne et faites-la glisser tout en haut de la mise en page.

Personnaliser la section

Avant d'ajouter un module, ouvrez les paramètres de la section et donnez-lui un arrière-plan et un peu de remplissage comme suit :

• Couleur d'arrière-plan : #f92c8b
• Rembourrage : 1vw haut, 1vw bas

Personnaliser la ligne

Ensuite, mettez à jour les paramètres de ligne comme suit :

• Couleur d'arrière-plan du dégradé de gauche : #f92c8b
• Dégradé d'arrière-plan à droite : #ffd625
• Direction du gradient : 90 degrés
• Remplissage : 0px en haut, 0px en bas
• Coins arrondis : 20px

Ajouter un module de menus

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

Ensuite, sélectionnez le menu de catégorie que vous avez créé précédemment dans le menu déroulant. Une fois sélectionnés, vos éléments de menu apparaîtront dans le menu.

Module de menu de conception pour correspondre au modèle

Supprimez la couleur d'arrière-plan par défaut pour que la couleur d'arrière-plan de la ligne s'affiche.

La mise à jour des paramètres de conception suivants :

• Style : centré
• Police du menu : Ubuntu
• Poids de la police du menu : gras
• Style de police du menu : TT (en majuscule)
• Couleur du texte du menu : #ffffff
• Espacement des lettres du menu : 2px
• Hauteur de la ligne de menu : 2 em
• Couleur d'arrière-plan du menu déroulant : #ffffff
• Couleur de la ligne du menu déroulant : #f92c8b

• Couleur du texte du menu déroulant : #222222
• Couleur du texte du menu mobile : #222222
• Couleur de l'icône du menu Hamburger : #ffffff
• Police de l'icône du menu hamburger : 40px
• Largeur: 90%
• Alignement du module : Centre

Visibilité des sections et des lignes

Afin d'éviter que les menus déroulants ne soient masqués, nous devons nous assurer et définir la visibilité de notre section et de notre ligne sur visible. De plus, nous devrons également donner à l'index z un nombre élevé pour que l'ensemble du menu reste au-dessus de tout autre contenu de la page. Cela sera nécessaire pour maximiser la visibilité du menu déroulant sur mobile et également pour le menu collant.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Débordement horizontal : Visible
• Débordement vertical : visible
• Indice Z : 999

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Débordement horizontal : Visible
• Débordement vertical : visible

Rendre la section (contenant le menu) collante

Ceci est facultatif bien sûr, mais pour créer un menu de catégorie persistant, ouvrez les paramètres de la section et ajoutez le CSS personnalisé suivant à l'élément principal :

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

Dupliquer la section pour créer le menu de la catégorie inférieure

Pour une meilleure expérience utilisateur sur mobile, nous pouvons créer un autre menu de catégorie qui restera en bas de la page. Pour créer le menu, il suffit de dupliquer la section contenant le menu que vous venez de créer.

Optimiser le menu collant inférieur pour mobile

Mettez à jour Sticky CSS avec le positionnement en bas.

Étant donné que nous n'aurons besoin que de ce menu pour « coller » sur le mobile, ouvrez les paramètres de la section et supprimez le CSS personnalisé pour le bureau. Ajoutez ensuite le CSS personnalisé suivant sous l'onglet tablette.

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

Changer la direction du menu déroulant pour le menu de catégorie inférieur

Étant donné que le menu s'affichera en bas de l'écran sur mobile, changez la direction du menu déroulant :

• Direction du menu déroulant : vers le haut

Ajouter une étiquette de menu « Catégories »

Pour ajouter une étiquette à côté de l'icône du menu mobile, sous l'onglet Avancé des Paramètres du menu, ajoutez le CSS personnalisé suivant à l'élément Avant :

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

Voici à quoi ressemble le menu jusqu'à présent sur mobile.

Masquer le menu supérieur sur mobile

Pour éviter de surcharger l'en-tête sur mobile, désactivez le menu supérieur sur téléphone et tablette. Cela n'affichera que le menu collant supérieur sur le bureau.

Enregistrez les deux menus/lignes dans la bibliothèque Divi.

Nous avons fini de créer les deux menus de catégorie pour la mise en page. Pour faciliter leur ajout à d'autres modèles, nous pouvons les enregistrer dans notre bibliothèque Divi. Pour enregistrer le menu du haut, sélectionnez l'icône « Ajouter à la bibliothèque » dans le menu de la section. Donnez ensuite un nom à la mise en page et cliquez sur le bouton « Enregistrer dans la bibliothèque ».

Répétez le même processus pour enregistrer également le menu du bas dans la bibliothèque. Assurez-vous simplement de lui donner un nom dont vous vous souviendrez.

Résultat final du modèle d'article de blog

Voyons à quoi ressemble une publication en direct avec notre nouveau menu de catégories persistantes en place.

Vue du bureau (menu supérieur)

Vue mobile (menu du bas)

Ajout du menu de catégorie secondaire collante au modèle de page de catégorie

Étant donné que nos sections de menu ont été ajoutées à la bibliothèque Divi, nous pouvons les ajouter à n'importe quelle disposition de modèle. Le modèle suivant auquel nous allons ajouter les menus de catégorie est le modèle de page de catégorie.

Modifier la zone du corps du modèle de page de catégorie

Recherchez le modèle attribué à « Toutes les pages de catégorie » et cliquez sur l'icône de modification dans la zone de corps personnalisée.

Ajouter le menu de catégorie supérieur de la bibliothèque

Dans l'éditeur de mise en page de modèle, cliquez sur l'icône bleue plus pour ajouter une nouvelle section. Ensuite, choisissez l'onglet Ajouter à partir de la bibliothèque et sélectionnez le menu de catégorie supérieure dans la liste.

Déplacez ensuite la section en haut de la mise en page du modèle.

Ajouter le menu Catégorie inférieur de la bibliothèque

Ensuite, cliquez pour ajouter une nouvelle section tout en bas de la mise en page. Ajoutez ensuite le menu de la catégorie inférieure de la bibliothèque.

Mettre à jour la couleur du lien actif pour le menu

Pour ce modèle, il est judicieux de mettre à jour la couleur du lien actif, car les éléments de menu contiendront des liens vers les pages de catégorie utilisant ce modèle. Ouvrez les paramètres du menu supérieur et mettez à jour les éléments suivants :

• Couleur du lien actif : #4160fd

Désormais, lorsque vous visitez une page de catégorie, le lien actif apparaît en bleu.

Résultat final du modèle de page de catégorie

Ajout du menu de catégorie collante à un modèle de page de blog

Nous pouvons également ajouter notre menu de catégories collantes à la page de blog de notre site Web. Une page de blog est essentiellement la page d'accueil de votre blog et affiche généralement un flux de tous vos articles de blog. Avec le Divi Theme Builder, nous pouvons créer un modèle pour la page de blog et ajouter facilement le menu des catégories.

Création du modèle de blog

Tout d'abord, dupliquez le modèle de page de catégorie.

Attribuez ensuite le modèle en double au blog.

Modifiez le corps personnalisé du modèle de blog.

Personnaliser la mise en page du modèle de blog

Utilisez l'éditeur de mise en page de modèle pour concevoir le modèle de blog. Pour l'instant, donnons-lui simplement un joli curseur de publication pleine largeur en haut de la page. Pour ce faire, créez une nouvelle section pleine largeur.

Ajouter un curseur de publication pleine largeur

Ajoutez ensuite un module Post Slider pleine largeur à la section.

Définissez le contenu pour extraire les « messages de la page actuelle ». Ensuite, assurez-vous qu'il tire le bon contenu dynamique pour la page de blog.

Mettez à jour les paramètres du curseur de publication pleine largeur comme suit :

• Police du titre : Ubuntu
• Poids de la police du titre : moyen
• Police du corps : Ubuntu

Déplacer le menu sous le curseur de publication

Pour cette mise en page, faisons glisser le curseur de publication vers le haut de la page afin que le menu de la catégorie collante supérieure soit situé sous le curseur.

Créer et attribuer la page des articles (ou blog)

Assurez-vous d'avoir une page de blog désignée dans WordPress. Pour ce faire, allez dans Paramètres > Lecture. Ensuite, pour les affichages de la page d'accueil, sélectionnez une page statique. Sélectionnez ensuite la page que vous souhaitez utiliser pour la page Publications.

Résultat final du modèle de page de blog

Remarquez comment le menu des catégories devient collant lorsqu'il atteint le haut de la page.

Dernières pensées

Un menu de catégorie collante peut vraiment faire passer votre blog au niveau supérieur. Construire un c'est vraiment simplement utiliser le Divi Builder. Et le générateur de thèmes permet d'ajouter facilement le menu où vous le souhaitez sur votre site. De plus, vous pouvez même créer un menu collant séparé pour mobile afin d'offrir à vos utilisateurs la meilleure expérience. Espérons que cela vous sera utile sur votre propre blog ou votre prochain projet.

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

À votre santé!