Comment présenter visuellement les catégories d'articles de blog dans votre en-tête Divi

Lors de la création de votre en-tête global, il y a de fortes chances que vous incluez un élément de menu de blog. Si vous n'avez pas beaucoup de catégories d'articles de blog sur votre site Web, un seul élément de menu de blog peut suffire. Cependant, si vous disposez d'un ensemble de catégories différentes et que vous souhaitez mettre en évidence chacune d'entre elles, vous pouvez essayer une approche différente, telle que la présentation visuelle de chaque catégorie de blog dans un menu déroulant.

Dans ce tutoriel, nous allons vous montrer exactement comment faire cela à l'aide de Theme Builder de Divi. Nous construirons le menu déroulant à l'aide des éléments et options intégrés de Divi et nous le combinerons avec du code qui nous permettra de placer le menu déroulant dans l'élément de menu du blog. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez The Global Header GRATUITEMENT

Pour mettre la main sur l'en-tête global gratuit, 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 !

Comment télécharger le fichier JSON

Décompressez le dossier zippé que vous avez pu télécharger ci-dessus. Ensuite, accédez à votre site Web WordPress> Divi> Bibliothèque Divi et téléchargez le JSON.

Une fois votre mise en page enregistrée dans la bibliothèque Divi, vous pouvez accéder au Divi Theme Builder et importer la mise en page enregistrée en cliquant sur « Ajouter un en-tête global » ou « Ajouter un en-tête personnalisé » et en sélectionnant « Créer un en-tête global/personnalisé ». Accédez à l'onglet « Vos mises en page enregistrées » dans la bibliothèque Divi, sélectionnez la mise en page que vous avez téléchargée à l'étape précédente et enregistrez toutes les modifications du générateur de thème Divi.

Pour avoir un menu fonctionnel dès le départ, vous devrez parcourir la première partie de ce didacticiel ci-dessous; ajouter les classes CSS aux éléments de menu à un niveau individuel. Vous devrez également activer l'une des classes CSS à l'intérieur du module de code, comme indiqué dans la partie 5 de ce didacticiel.

1. Ajouter une classe CSS à l'élément de menu du blog

Aller aux menus dans l'apparence

Dans la première partie de ce didacticiel, nous ajouterons deux classes CSS personnalisées à l'élément de menu de la page de blog dans le menu WordPress. Pour ce faire, accédez aux menus de votre tableau de bord WordPress.

Activer l'option de classe CSS

En haut de la page, assurez-vous d'activer l'option classes CSS dans l'option screen.

Ajouter des classes CSS à l'élément de menu du blog

Ensuite, recherchez l'élément de menu de votre blog et ajoutez-y deux classes CSS. Assurez-vous de laisser un espace entre les classes CSS.

• Classes CSS : premier niveau premier niveau-1

2. Créez un en-tête personnalisé avec le générateur de thème de Divi

Aller à Divi Theme Builder

Une fois que les classes CSS de l'élément de menu sont en place, il est temps de passer à Divi. Accédez à Divi Theme Builder et sélectionnez « Ajouter un en-tête global/personnalisé ».

Commencer à créer un en-tête global

Ensuite, sélectionnez 'Build Global Header' pour être redirigé vers l'éditeur de modèles.

Paramètres de section

Couleur de l'arrière plan

Dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et appliquez une couleur de fond blanc.

• Couleur d'arrière-plan : #FFFFFF

Espacement

Passez à l'onglet Conception et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 95%
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter un module de menu à la ligne

Sélectionnez le menu

Ensuite, ajoutez un module de menu et sélectionnez le menu que vous avez modifié dans la première partie de ce didacticiel.

Télécharger le logo

Téléchargez un logo ensuite.

Paramètres du texte du menu

Passez à l'onglet Conception et modifiez les paramètres du texte du menu comme suit :

• Police du menu : Roboto Mono
• Style de police du menu : majuscule
• Couleur du texte du menu : #000000
• Taille du texte du menu : 18 px
• Espacement des lettres du menu : -1px

Paramètres du menu déroulant

Modifiez également la couleur de la ligne du menu déroulant.

• Couleur de la ligne du menu déroulant : #FFFFFF

Paramètres des icônes

Ensuite, modifiez la couleur de l'icône du menu hamburger dans les paramètres des icônes.

• Couleur de l'icône du menu Hamburger : #000000

Classe CSS

Et complétez les paramètres du module en ajoutant une classe CSS.

• Classe CSS : menu-catégorie

3. Créer un design de liste déroulante de blog

Ajouter la ligne n° 2

Structure des colonnes

Une fois que votre ligne, contenant le module de menu, est en place, il est temps de créer le menu déroulant contenant les catégories de blogs visuels. Pour ce faire, ajoutez une nouvelle ligne avec deux colonnes de taille égale. La ligne entière sera notre menu déroulant pour l'élément de menu du blog.

Couleur de l'arrière plan

Ouvrez les paramètres de ligne et utilisez une couleur d'arrière-plan blanche.

• Couleur d'arrière-plan : #FFFFFF

Dimensionnement

Passez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 80 vw (ordinateur de bureau), 100 % (tablette et téléphone)
• Largeur maximale : 50 vw (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

Modifiez ensuite les valeurs de remplissage.

• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px
• Rembourrage gauche : 10px
• Rembourrage inférieur : 10px

Boîte ombre

Nous utilisons également une ombre de boîte subtile.

• Force du flou d'ombre de la boîte : 30px
• Couleur de l'ombre : rgba(0,0,0,0.13) (bureau), rgba(0,0,0,0) (tablette et téléphone)

Classe CSS

Ensuite, nous ajouterons deux classes CSS à notre ligne. Ces classes CSS (en combinaison avec du code plus tard) nous aideront à placer l'intégralité du conteneur de lignes dans l'élément de menu du blog sous forme de liste déroulante.

• Classe CSS : dropdown-menu dropdown-menu-1

Position

Passez à l'onglet avancé et repositionnez également la ligne.

• Position : absolue (ordinateur de bureau), relative (tablette et téléphone)
• Emplacement : en haut à droite
• Décalage vertical : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Indice Z : 11

Élément principal des deux colonnes

Enfin, complétez les paramètres de ligne en ajoutant une ligne de code CSS à l'élément principal de chaque colonne. Cela nous aidera à conserver la structure des colonnes sur des écrans de plus petite taille.

width: 50% !important;

Ajouter un module de texte à la colonne 1

Ajouter un nom de catégorie

Il est temps d'afficher visuellement nos catégories de blogs ! Ajoutez un premier module de texte à la colonne 1 et ajoutez le titre de la catégorie à la zone de contenu.

Ajouter un lien de catégorie

Ajoutez ensuite un lien vers votre catégorie.

Fond dégradé

Ensuite, appliquez le fond dégradé suivant :

• Couleur 1 : rgba(0,0,0,0.08)
• Couleur 2: #0a0a0a
• Position de départ : 60 %
• Position finale : 60 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Téléchargez une image de fond de votre choix. Si vous voulez exactement le même résultat que dans ce tutoriel, téléchargez l'une des illustrations que vous pouvez trouver dans le dossier que vous avez pu télécharger au début de cet article.

• Taille de l'image d'arrière-plan : taille réelle
• Répétition de l'image d'arrière-plan : Répéter X (horizontal)

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police du texte : Roboto Mono
• Poids de la police de texte : gras
• Couleur du texte : #ffffff
• Taille du texte : 1.9vw (ordinateur de bureau), 3vw (tablette), 3.5vw (téléphone)
• Espacement des lettres du texte : -0.1vw
• Hauteur de la ligne de texte : 1 em

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur : 99%
• Alignement du module : à gauche

Espacement

Modifiez également les paramètres d'espacement.

• Marge inférieure : 10px
• Marge droite : 1 % (tablette et téléphone)
• Rembourrage supérieur : 60 % (ordinateur de bureau), 40 % (tablette et téléphone)
• Rembourrage inférieur : 4%
• Rembourrage gauche : 2%

Élément principal CSS

Et complétez les paramètres du module en ajoutant une ligne de code CSS à l'élément principal du module.

cursor: pointer;

Cloner le module de texte et placer le doublon dans la colonne 2

Une fois que vous avez terminé le premier module de texte, clonez le module et placez le doublon dans la colonne 2.

Modifier le module de texte dans la colonne 2

Modifier le nom et le lien de la catégorie

Modifiez le titre et le lien de la catégorie dans le module en double.

Changer l'image d'arrière-plan

Modifiez également l'image d'arrière-plan. Vous pouvez trouver l'illustration dans le dossier de téléchargement.

• Répétition de l'image d'arrière-plan : aucune répétition

Modifier la taille

Modifiez ensuite l'alignement du module dans les paramètres de dimensionnement.

• Alignement du module : à droite

Cloner les deux modules une fois

Une fois que vous avez terminé les deux modules (un dans chaque colonne), vous pouvez les cloner tous les deux une fois.

Modifier les noms de catégorie et les liens

Modifiez les noms de catégorie et les liens à l'intérieur des modules en double.

Changer les images d'arrière-plan

Avec les images de fond. Vous pouvez trouver les nouvelles illustrations dans le dossier que vous avez pu télécharger au début de cet article.

• Taille de l'image d'arrière-plan : Ajuster
• Répétition de l'image d'arrière-plan : aucune répétition

• Taille de l'image d'arrière-plan : Ajuster
• Position de l'image d'arrière-plan : en bas à droite

4. Ajouter du code CSS et JQuery

Ajoutez le module de code sous le module de menu dans la rangée n° 1

Une fois que vous avez rempli la ligne contenant les noms des catégories du menu déroulant, ajoutez un module de code à la première ligne de votre section, juste en dessous du module de menu.

Ajouter un code CSS

Ajoutez les lignes de code CSS suivantes au module de code :

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

Ajouter du code JQuery

Avec un peu de code JQuery qui aidera à placer la ligne contenant des catégories dans l'élément de menu de votre blog. Assurez-vous de placer le code JQuery entre les balises de script comme vous pouvez le remarquer dans l'écran d'impression ci-dessous.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Activez la classe CSS une fois que vous avez terminé de personnaliser les éléments du menu déroulant du blog

Dès que vous aurez fini de personnaliser tous les éléments du menu déroulant, il ne vous restera qu'une chose à faire : masquer toute la ligne contenant les éléments du menu déroulant. Ceci, en combinaison avec une fonction de chargement dans notre code, empêchera le menu déroulant de s'afficher lors du chargement de la page. Une fois que vous avez activé cette classe CSS, vous ne verrez plus la deuxième ligne dans Visual Builder, mais vous pourrez y accéder en mode filaire et/ou désactiver temporairement la classe CSS lorsque vous apporterez des modifications à votre menu déroulant. Pour activer la classe, supprimez les crochets '/* */' au début et à la fin de la classe CSS.

6. Ajouter plus de listes déroulantes de catégories de publication

Cloner la ligne de catégorie de blog

Si vous cherchez à ajouter plus de listes déroulantes de catégories, vous pouvez cloner toute la ligne de liste déroulante que vous avez créée.

Accéder à la ligne en double dans le panneau Calques

Étant donné que nous utilisons le positionnement absolu sur le bureau, les lignes seront placées les unes sur les autres. Pour accéder aux lignes individuellement, ouvrez le panneau des calques dans votre Divi Builder et ouvrez les paramètres de la ligne en double.

Modifier la classe CSS de ligne en double

Modifiez la deuxième classe CSS dans votre ligne en double. Assurez-vous que le numéro que vous utilisez est consécutif.

• Classe CSS : menu déroulant dropdown-menu-2

Ajouter des classes CSS aux éléments de menu dans l'apparence

Ensuite, revenez à votre menu WordPress dans votre tableau de bord et ajoutez les classes CSS suivantes à un autre élément de menu et vous avez terminé :

• Classes CSS : premier niveau premier niveau-2

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec votre en-tête Divi et l'élément de menu du blog. Plus précisément, nous vous avons montré comment inclure visuellement des catégories de blogs en tant qu'éléments de menu déroulant qui ont fière allure sur toutes les tailles d'écran. Cette approche vous aidera à mettre en évidence chaque catégorie de blog différente tout en conservant une apparence minimale à première vue. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.