Lors de la création d’un titre global, il est probable qu’il contient un élément de menu blog. S’il n’y a pas beaucoup de catégories de blogs sur votre site, il suffit de sélectionner un élément de menu blog. Cependant, si vous avez de nombreuses catégories différentes et que vous voulez mettre en évidence chacune d’elles, vous devrez peut – être essayer différentes méthodes, comme l’affichage visuel de chaque catégorie de blog dans le menu déroulant. Dans ce tutoriel, nous vous expliquerons comment créer en utilisant le générateur de thème Divi. Nous utiliserons les éléments et options intégrés de Divi pour créer des menus déroulants et les combiner avec le Code qui nous permet de placer les menus déroulants dans les éléments du menu blog. Vous pouvez également télécharger gratuitement le fichier json!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et obtenir
Er sera redirigé vers l’éditeur de modèles. La section couleur de fond est définie dans l’éditeur de modèle et vous remarquerez une section. Ouvrez la section et appliquez une couleur de fond blanche. Couleur de fond: # FFFFFF L’espacement passe à l’onglet conception et supprime toutes les écoutilles par défaut en haut et en bas. Remplissage supérieur: 0px remplissage inférieur: 0px Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes en utilisant la structure de colonne suivante:
Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et modifier les paramètres de taille en conséquence: utiliser la largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 95% largeur maximale: 100% Espacement ensuite, supprimez tous les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Ajoutez un module de menu à la ligne select menu, puis ajoutez un module de menu et sélectionnez le menu que vous avez modifié dans la première partie de ce tutoriel. Télécharger le logo télécharger le logo suivant. Les paramètres du texte du menu passent à l’onglet conception et changent les paramètres du texte du menu comme suit:
Police de menu: roboto mono menu font style: capital menu text color: # 000000 menu text size: 18px menu letter Spacing: – 1px Les paramètres du menu déroulant changent également la couleur des lignes du menu déroulant. Couleur de la ligne de menu déroulant: # FFFFFF Les paramètres de l’icône changent ensuite la couleur de l’icône du menu hamburger dans les paramètres de l’icône. Couleur de l’icône du menu Hamburger: # 000000 La classe CSS e complète la configuration du module en ajoutant une classe CSS. Classe CSS: Menu catégorie 3. Créer une conception déroulante pour la structure de colonne de la ligne d’ajout de blog # 2 une fois que la ligne contenant le module de menu est en place, vous pouvez utiliser
Titre de catégorie de la boîte de contenu. Liens ajoutés à la catégorie liens ajoutés à la catégorie suivante. Fond de la rampe puis appliquer le fond de la rampe suivant: couleur 1: rgba (0,0,0,0,08) couleur 2: # 0a0a position de départ: 60% position finale: 60% place la rampe au – dessus de l’image de fond: Oui Téléchargez l’image de fond que vous avez sélectionnée. Si vous souhaitez obtenir les mêmes résultats que ce tutoriel, Téléchargez l’une des illustrations que vous avez trouvées dans le dossier que vous avez téléchargé au début de cet article. Taille de l’image de fond: taille réelle répéter l’image de fond: répéter X (horizontal) Paramètres de texte passer à l’onglet conception du module et modifier les paramètres de texte en conséquence: police de texte: Robot mono poids de la police de texte: gras couleur du texte: # FFFFFF taille du texte: 1,9vw (bureau), 3vw (tablette), 3,5vw (téléphone mobile) espacement des lettres de texte: – 0,1vw hauteur de la ligne de texte: 1EM Redimensionner modifie le prochain réglage de redimensionnement. Largeur: 99% alignement du module: à gauche L’espacement modifie également les paramètres d’espacement. Marge inférieure: 10px marge droite: 1% (tablette et téléphone mobile) Marge supérieure: 60% (bureau), 40% (tablette et téléphone mobile) marge inférieure: 4% marge gauche: 2% L’élément principal CSS e complète la configuration du module en ajoutant une ligne de code CSS à l’élément principal du module. Curseur: pointeur; Une fois que vous avez cloné un module texte et placé une copie dans la colonne 2 pour compléter le premier module texte, clonez le formulaire et placez la copie dans la colonne 2. Modifier le formulaire texte dans la colonne 2 modifier le nom et le lien de la catégorie modifier le titre et le lien de la catégorie dans le formulaire dupliqué. Changer l’image de fond change également l’image de fond. Vous pouvez trouver les illustrations dans le dossier de téléchargement. Je répète.
Image de fond: pas de répétition Changez de taille changez l’alignement du formulaire dans le prochain réglage de taille. Alignement des formulaires: Oui Une fois que vous avez cloné deux modules à la fois (un dans chaque colonne), vous pouvez cloner les deux modules en même temps. Changez le nom de la catégorie et le lien changez le nom de la catégorie et le lien dans le formulaire en double. Changez l’image de fond avec l’image de fond. Vous pouvez trouver de nouvelles illustrations dans le dossier téléchargé au début de ce billet. Taille de l’image de fond: duplication appropriée de l’image de fond: aucune duplication Taille de l’image de fond: emplacement approprié de l’image de fond: coin inférieur droit 4. Après avoir complété l’ajout du code CSS sous le module de menu de la ligne 1 et de la ligne contenant le nom de la catégorie dans le menu déroulant du module d’ajout de code jquery, ajouter le module de code directement sous le module de menu de la première ligne de cette section. Ajouter un code CSS ajoute les lignes de code CSS suivantes au formulaire de code:
Lorsque vous avez terminé d’éditer le menu, activez la classe suivante
\ *
– Oui. Menu déroulant
Visibilité: cachée;
} * \
– Oui. Menu catégories. Et _ pb Menu menu. Menu déroulant
Visibilité: cachée;
Opacité: 0;
– transition webkit: 300ms full Cubic Bessel (0.4, 0.2, 1);
Transformation MOZ: bezier cubique complet de 300 MS (0,4,0,2,1);
O transition: trois Bessel complets de 300 MS (0,4, 0,2, 1);
MS transition: 300 MS full three Bessel (0.4, 0.2, 1);
Transition: trois Bessel complets de 300 MS (0,4, 0,2, 1);
}
– Oui. Menu catégories. Et \ u pb \ u Menu \ u menu Li. Premier niveau: vol stationnaire. Menu déroulant
Visibilité: visible;
Opacité: 1;
}
– Oui. Menu catégories. Et _ pb Menu menu li {
En haut de la marge: 0px! Important
}
– Oui. Menu catégories. Et \ u pb \ u Menu \ u menu li > A {
En haut de la marge: 0px! Important
Remplissage: 30px 20px! Important
}
– Oui. Menu catégories. Et \ u pb \ u Menu \ u menu Li. 1er étage > A: vol stationnaire {
Couleur de fond: # 00c995;
}
– Oui. Catégorie hommes
U Et _ mobile menu. Menu déroulant
Couleur de fond: blanc;
Haut de remplissage: 25px;
Fond de remplissage: 5px;
}
– Oui. Menu catégories. Et _ mobile menu li > A {
Couleur de fond: transparente;
Position: relative;
}
– Oui. Menu catégories. Et _ mobile menu. Niveau 1 > A: après {
Famille de polices: \
Contenu: \
Couleur: noir;
Taille de la police: normale;
Position: absolue;
Taille de la police: 16px;
En haut: 13px;
Droite: 10px;
}
– Oui. Menu catégories. Et _ mobile menu. Niveau 1 >. Basculement des icônes: après {
Contenu: \
Couleur: # c9c9c9;
}
– Oui. Menu catégories. Et _ mobile menu. Menu déroulant
Affichage: aucun;
Visibilité: visible;
}
– Oui. Menu catégories. Et _ mobile menu. Menu déroulant. Afficher les éléments
Affichage: blocs;
}
Ajoutez le Code jquery et certains coe jquery, qui vous aideront à placer des lignes contenant des catégories dans l’élément de menu du journal. Assurez – vous d’insérer le Code jquery dans l’étiquette du script, comme indiqué sur l’écran d’impression ci – dessous. Jquery (fonction ($)
USD (file). Ready (Function () {
$(\
I = i + 1;
Variable $drop – down = $(‘drop – down menu -‘ + i);
Variable $mainmenuitem = $(‘first level -‘ + I + ‘> A’);
$liste déroulante. Après insertion ($mainmenuitem);
});
Variable $first level = $(‘et _ mobile menu.first level > A’);
Var $alldropdows = $(\
$niveau 1. Fermez (cliquez). Cliquez sur (fonction () {
$(this). Attribut (‘href’, ‘#’);
Var $this drop – down = $(this). Frères et sœurs ();
$cette liste déroulante. Glissement ();
$(this). Toggleclass (\
Was drop – down = $all drop – down lists. Non ($cette liste déroulante);
Menu déroulant. Slidelp ();
Variable $thisfirstlevel = $(BEN);
Pour $first level Brothers and Sisters = first level. Non ($this first level);
Frères et sœurs du premier degré. Supprimer la classe (\
});
});
}); Activer la classe CSS une fois que vous avez terminé la personnalisation des éléments déroulants du blog une fois que vous avez terminé la personnalisation de tous les éléments déroulants, il y a une autre chose à faire: masquer inclure
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et obtenir
Er sera redirigé vers l’éditeur de modèles.
Police de menu: roboto mono menu font style: capital menu text color: # 000000 menu text size: 18px menu letter Spacing: – 1px
Titre de catégorie de la boîte de contenu.
Image de fond: pas de répétition
Lorsque vous avez terminé d’éditer le menu, activez la classe suivante
\ *
– Oui. Menu déroulant
Visibilité: cachée;
} * \
– Oui. Menu catégories. Et _ pb Menu menu. Menu déroulant
Visibilité: cachée;
Opacité: 0;
– transition webkit: 300ms full Cubic Bessel (0.4, 0.2, 1);
Transformation MOZ: bezier cubique complet de 300 MS (0,4,0,2,1);
O transition: trois Bessel complets de 300 MS (0,4, 0,2, 1);
MS transition: 300 MS full three Bessel (0.4, 0.2, 1);
Transition: trois Bessel complets de 300 MS (0,4, 0,2, 1);
}
– Oui. Menu catégories. Et \ u pb \ u Menu \ u menu Li. Premier niveau: vol stationnaire. Menu déroulant
Visibilité: visible;
Opacité: 1;
}
– Oui. Menu catégories. Et _ pb Menu menu li {
En haut de la marge: 0px! Important
}
– Oui. Menu catégories. Et \ u pb \ u Menu \ u menu li > A {
En haut de la marge: 0px! Important
Remplissage: 30px 20px! Important
}
– Oui. Menu catégories. Et \ u pb \ u Menu \ u menu Li. 1er étage > A: vol stationnaire {
Couleur de fond: # 00c995;
}
– Oui. Catégorie hommes
U Et _ mobile menu. Menu déroulant
Couleur de fond: blanc;
Haut de remplissage: 25px;
Fond de remplissage: 5px;
}
– Oui. Menu catégories. Et _ mobile menu li > A {
Couleur de fond: transparente;
Position: relative;
}
– Oui. Menu catégories. Et _ mobile menu. Niveau 1 > A: après {
Famille de polices: \
Contenu: \
Couleur: noir;
Taille de la police: normale;
Position: absolue;
Taille de la police: 16px;
En haut: 13px;
Droite: 10px;
}
– Oui. Menu catégories. Et _ mobile menu. Niveau 1 >. Basculement des icônes: après {
Contenu: \
Couleur: # c9c9c9;
}
– Oui. Menu catégories. Et _ mobile menu. Menu déroulant
Affichage: aucun;
Visibilité: visible;
}
– Oui. Menu catégories. Et _ mobile menu. Menu déroulant. Afficher les éléments
Affichage: blocs;
}
USD (file). Ready (Function () {
$(\
I = i + 1;
Variable $drop – down = $(‘drop – down menu -‘ + i);
Variable $mainmenuitem = $(‘first level -‘ + I + ‘> A’);
$liste déroulante. Après insertion ($mainmenuitem);
});
Variable $first level = $(‘et _ mobile menu.first level > A’);
Var $alldropdows = $(\
$niveau 1. Fermez (cliquez). Cliquez sur (fonction () {
$(this). Attribut (‘href’, ‘#’);
Var $this drop – down = $(this). Frères et sœurs ();
$cette liste déroulante. Glissement ();
$(this). Toggleclass (\
Was drop – down = $all drop – down lists. Non ($cette liste déroulante);
Menu déroulant. Slidelp ();
Variable $thisfirstlevel = $(BEN);
Pour $first level Brothers and Sisters = first level. Non ($this first level);
Frères et sœurs du premier degré. Supprimer la classe (\
});
});
});