Tutoriel Kadence : Comment créer un menu déroulant géant avec les thèmes Kadence

Que diriez-vous d'obtenir votreWordPressLe site web renforce l'interactivité tout en présentant un contenu plus diversifié grâce à la technologie de l'Internet.KadencethématiqueCaractéristiques du Mega Menuest un bon choix. Aujourd'hui, nous allons vous apprendre à mettre en place un menu déroulant géant avec le thème Kadence pour apporter une meilleure expérience de navigation à vos utilisateurs.

1) Installer et activer les plug-ins nécessaires

Tout d'abord, nous devons installer le logicielKadenceVersion payante du thème

et activer les fonctions suivantes :

• Menu ultime
• Éléments accrochés

Ces deux fonctionnalités vous permettront de personnaliser le menu de manière plus puissante, ce qui rendra les paramètres du méga-menu plus flexibles.

2. configuration du méga-menu

entrer dansWordPresscoulissesétat extérieur > menusélectionnez l'élément de menu que vous souhaitez configurer en tant que méga-menu. Après avoir cliqué sur le bouton correspondant, vous accéderez à l'écran de configuration de l'élément de menu. Vous pouvez y effectuer les réglages suivants :

• Réglage des icônesAjouter une icône pour l'élément de menu et définir la position d'affichage de l'icône, vous pouvez choisir de la placer à gauche ou à droite.

• Ajuster la couleur et la taille des icônesLes icônes peuvent être modifiées en fonction de leur couleur et de leur taille afin de les adapter au style de conception de votre site web.

• Réglage de la largeur du méga-menuLe mode pleine largeur permet au menu de s'étendre de gauche à droite afin d'obtenir un effet visuel qui aligne le contenu de la page sur le menu.

3. définir le nombre de colonnes du Mega Menu et la couleur d'arrière-plan

en ce qui concerneMéga menuDans le cas présent, j'ai choisi une disposition en une colonne, mais elle est en fait obtenue en plaçant six éléments de contenu. Vous pouvez adapter le nombre de colonnes à vos besoins.

La couleur d'arrière-plan peut être définie comme une couleur d'arrière-plan globale afin d'assurer la cohérence avec la conception générale du site.

Pour supprimer l'excès d'espacement, vous pouvez également fixer l'espacement interne à zéro.

N'oubliez pas d'enregistrer les modifications une fois que vous avez terminé les réglages ci-dessus.

4. créer le contenu du menu à l'aide de shortcodes

Ensuite, nous devons ajouter l'élémentKadence(utilisé comme expression nominale)élément d'un ensemblepour créer un contenu de menu spécifique. Saisissez leétat extérieur > Kadence > élément d'un ensemblevous verrez que j'ai créé deux éléments. Cliquez sur l'un d'eux pour voir comment ajouter six catégories de produits.

en raison deKadenceLe thème ne fournit pas de blocs visuels pour les éléments de catégorisation des produits, nous pouvons utiliser la fonctionWooCommerceLa fonction du shortcode pour mettre en œuvre la fonction

Le numéro dans le shortcode indique l'ID de la catégorie de produits, que vous pouvez obtenir en suivant les étapes ci-dessous :

• Allez dans le backend de l'applicationoffres > catégorisationcliquez pour modifier la catégorie dont vous avez besoin.

• Vérifiez l'URL dans la barre d'adresse de votre navigateur, où le numéro est l'ID de la catégorie de produits.

Une fois l'identifiant obtenu, saisissez-le dans le shortcode au format suivant :

commandant en chef (militaire)IDRemplacer par l'identifiant de classification réel.

5. ajouter des shortcodes et ajuster les éléments de menu

Sur la page de l'élément, cliquez sur le bouton "Ajouter".

Sélectionnez Paramètres par défaut et saisissez un titre pour vous assurer que l'élément peut être affiché sur l'ensemble du site et qu'il est visible par tous les utilisateurs.

Pour ajouter du contenu, cliquez sur le signe plus, sélectionnez le format de mise en page en six colonnes, puis collez le code court que vous avez obtenu précédemment.

Ajustez la valeur de l'ID dans le shortcode si nécessaire. S'il y a plusieurs shortcodes à ajouter, vous pouvez utiliser des raccourcis pour accélérer le processus.

Si vous devez modifier l'ordre des éléments du menu, vous pouvez déverrouiller l'ordre des colonnes. Après avoir cliqué sur le bouton de déverrouillage, vous pouvez librement faire glisser les colonnes pour modifier leur ordre.

Lorsque vous avez terminé, enregistrez et publiez l'élément.

6. ajouter des éléments de sous-menu

Retourne le backend duétat extérieur > menuajoutez un sous-élément au méga-menu. Vous pouvez nommer ce sous-élément comme vous le souhaitez, car il sert uniquement à héberger le contenu du méga-menu et ne sera pas affiché sur la page.

Faites-en un sous-article du premier menu.

Actualisez la page après l'avoir sauvegardée et vous verrez que les nouveaux éléments du menu sont apparus. Cliquez pour développer le menu et le nouvel élément de contenu affichera six contenus. Veillez à ce que la largeur et la structure des éléments de menu soient conformes à la largeur maximale du thème.

7. vérifier l'effet et ajuster la mise en page

Actualisez la page d'accueil pour voir à quoi ressemble le menu. Il se peut que vous deviez procéder à quelques ajustements finaux du menu pour vous assurer qu'il s'affiche correctement et qu'il répond à vos exigences en matière de conception.

résumés

Avec les étapes ci-dessus, vous pouvez facilement faire de laKadenceCréez un méga menu déroulant dans le thème. En utilisant la fonction Mega Menu, vous pouvez fournir aux utilisateurs un menu plus clair et plus dynamique afin qu'ils puissent trouver rapidement ce dont ils ont besoin.

Si vous avez réussi à mettre en place Mega Menu, n'hésitez pas à partager votre expérience dans la section des commentaires !

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.