Tutoriel Kadence : Créer des structures de navigation flexibles avec les blocs de navigation avancés de Kadence

Blocs Kadenceest un puissant constructeur de pages qui offre aux utilisateurs un riche ensemble de blocs de personnalisation. Parmi eux, le bloc Navigation Adv est conçu pour être utilisé dans la sectionWordPressUn module important conçu pour construire des menus de navigation flexibles dans l'éditeur, qui non seulement prend en charge l'architecture classique du site, mais s'adapte aussi parfaitement au mode Full Site Editor (FSE).

Cet article vous donnera une vue d'ensemble des fonctions avancées de lanavigateurCe que fait ce bloc, comment il est configuré et comment il peut être utilisé de concert avec le bloc d'en-tête avancé pour vous aider à obtenir un menu de navigation hautement personnalisable sur votre site web.

I. Présentation du bloc de navigation avancée

Le bloc de navigation avancée estKadenceFait partie du système d'en-tête avancé qui fonctionne en tandem avec le bloc d'en-tête (Adv) et le bloc de liens de navigation. Vous pouvez ajouter des liens de navigation à n'importe quel endroit d'une page ou d'un modèle, sans se limiter à la zone d'en-tête.

La navigation est bonne :

• Ajouter et configurer directement dans l'éditeur de blocs
• Gestion centralisée à partir du tableau de bord Kadence
• Prise en charge de l'importation et de la conversion des menus classiques en structures de navigation avancées

II. comment ajouter et gérer la navigation avancée

Création de la navigation dans l'éditeur

Vous pouvez insérer le bloc "Navigation (Adv)" dans l'éditeur de pages et sélectionner une navigation existante ou en créer une nouvelle à partir des options contextuelles. Une fois le bloc ajouté, vous pouvez immédiatement accéder au générateur de navigation pour ajouter des pages, des catégories ou des liens personnalisés.

Gérer la navigation dans le back office

faire passer (un projet de loi, une inspection, etc.) Tableau de bord WordPress → Kadence → NavigationsVous pouvez gérer de manière centralisée tous lesnavigateurCliquez sur "Add New Kadence Navigation" pour créer une nouvelle navigation. Cliquez sur "Add New Kadence Navigation" pour créer une nouvelle navigation.

Prise en charge du constructeur de navigation :

• Ajouter des articles, des pages, des produits ou d'autres types personnalisés
• Générer des éléments de menu à l'aide de catégories (par exemple, catégories d'articles, catégories de produits)
• Tri et hiérarchie par glisser-déposer

Troisièmement, prise en charge de l'importation du menu classique de WordPress

KadenceIl est possible de combiner le système classique existantWordPressLes menus sont importés en tant que navigation avancée. Après l'importation, le menu d'origine n'est pas modifié, mais il est automatiquement converti en menu de navigation avancée pour d'autres paramètres d'amélioration visuelle et interactive.

Quatrièmement, les paramètres de navigation en détail

Paramètres généraux

• Sélectionner la navigation: Permet de faire basculer l'affichage de l'image en cours.navigateurélément
• Créer une nouvelle navigationCréation d'une nouvelle navigation et modification directement à l'intérieur du bloc

• Ouvrir le constructeurCliquez pour un accès rapide à l'outil de navigation.

• orientation du menuL'orientation de l'appareil peut se faire en mode portrait ou paysage.
• espacement des menusLes éléments de navigation horizontaux et verticaux peuvent être réglés séparément.

• Mise en évidence de l'élément d'activation du parentLes pages du menu parent sont automatiquement mises en surbrillance lorsqu'une page enfant est visitée.

Options de mise en page

• disposition horizontaleLes options suivantes sont disponibles : Standard, Stretch et Grid.
• disposition verticaleMenu en accordéon : Le comportement expansion/réduction peut être activé, ce qui permet de développer les éléments du menu en accordéon.

Paramètres de mise en page horizontale

Lorsque vous utilisez des mises en page horizontales, vous avez le choix entre trois mises en page - Standard, Étiré et Grille - chacune offrant des effets de présentation et des paramètres d'optimisation différents :

Disposition standard

La présentation standard convient aux menus de navigation de style traditionnel, où un espacement fixe est maintenu entre les éléments de navigation, et convient aux présentations de menu simples.

Mise en page de la traction

La mise en page étirée étend les éléments de navigation sur toute la largeur du conteneur, ce qui permet une répartition plus homogène des éléments de menu.

Comportement d'étirement: :

• normeLes liens de navigation : ajoutez de l'espace entre les liens de navigation afin de répartir uniformément les éléments du menu dans l'espace disponible.

• Remplir et centrerAjuster la zone de texte en augmentant l'espacement afin que le texte de chaque élément de navigation soit centré et aligné. Les paramètres d'alignement du texte peuvent être personnalisés dans les paramètres du bloc de style de l'élément de navigation.

Disposition de la grille

La disposition en grille permet d'organiser les éléments de navigation dans une grille structurée, ce qui donne une forme plus organisée aux menus de navigation.

• Colonnes de la grille horizontaleLes liens de navigation seront alignés à l'intérieur des colonnes définies et circuleront de gauche à droite à la manière d'une grille.

Ces options de mise en page vous permettent d'adapter l'apparence et le comportement du menu de navigation à différents besoins de conception.

Paramètres de mise en page verticale

Lors de l'utilisation d'une mise en page verticale, leKadence Le bloc Navigation avancée offre les deux fonctionnalités suivantes pour améliorer l'interaction avec l'utilisateur :

Développer les sous-menus verticaux dans l'ensemble du projet

Lorsque cette option est activée, les utilisateurs peuvent cliquer sur toute la largeur d'un élément de menu vertical pour développer le sous-menu, et pas seulement la zone de texte ou d'icône.

Réduire le sous-menu vertical

Cette option permet de définir le sous-menu vertical sur "accordéon"C'est une façon de montrer.

Ces deux paramètres peuvent être utilisés indépendamment ou en combinaison pour améliorer efficacement la convivialité et la hiérarchie visuelle de la navigation verticale.

V. Fonction d'activation du lien d'ancrage

Prise en charge des liens d'ancrage qui s'activent automatiquement lorsque l'on fait défiler la page jusqu'à la zone cible. Vous pouvez définir le décalage d'activation en fonction des différentes mises en page et des hauteurs d'en-tête fixes pour une activation plus précise.

VI. paramètres du style d'apparence

Modèles de style

• formulaire standard

• Style de soulignement

• Style pleine hauteur

• Style de soulignement sur toute la hauteur

Style de lien

le soutien àRoutine, survol, activationLes trois états définissent la couleur, l'arrière-plan, la bordure, les coins arrondis, l'ombre et d'autres styles.

Paramètres de police

Paramètres globaux pour la taille des polices des éléments de menu, la hauteur des lignes, la graisse des polices, l'espacement des polices, la casse des lettres, etc. Il est également possible d'effectuer des modifications pour les liens de navigation individuels.

Réglage du séparateur

Insère des séparateurs entre les éléments du menu, dont la couleur et la largeur sont réglables.

VII. style des sous-menus et des méga-menus (Pro)

Paramètres du conteneur de sous-menu

• La sélection d'un sous-menu est animée (fondu entrant, fondu sortant, etc.).

• Réglage de l'alignement et de la largeur du menu déroulant

• Personnalisation des polices, des couleurs, de l'espacement, des bordures, des ombres, etc. pour les éléments des sous-menus

Paramètres des liens de sous-menus

Le style des liens de sous-menus vous permet de contrôler uniformément l'apparence de tous les éléments du menu déroulant dans la navigation avancée de la manière suivante :

couleur

La définition des couleurs des liens de navigation dans le sous-menu prend en charge les trois états suivants de manière indépendante :

• état normal
• état de survol
• statut actif

diviseur

Ajoutez une ligne de séparation entre chaque élément du sous-menu pour améliorer la hiérarchie et la lisibilité. Vous pouvez personnaliser la couleur et la largeur de la ligne de séparation.

Marges et rembourrages des liens

Définissez uniformément les marges intérieures et extérieures des liens de navigation dans le sous-menu afin de garantir un espacement cohérent du contenu et de donner au menu un aspect plus net et plus régulier.

alignement

Définit l'alignement du texte des éléments du sous-menu, facultatif :

• justification à gauche

• aligné au centre

• aligné à droite

Ce paramètre peut être configuré séparément pour différents types d'appareils afin d'activer la conception réactive.

typographique

Ajustez le style de texte des éléments des sous-menus, y compris :

• taille de la police
• votre taille (honorifique)
• La casse des lettres (par exemple, toutes les majuscules)
• Familles de polices (par exemple, polices système, polices personnalisées)
• l'épaisseur de la police
• espacement des lettres

Ces paramètres vous aident à créer un système de sous-menus visuellement unifié et interactif, particulièrement adapté aux menus à plusieurs niveaux ou aux conceptions de navigation de sites web qui doivent afficher les sous-éléments de manière esthétique.

Description du sous-menu Réglage du style

Le sous-menu décrit lesRéglages du stylePermet d'ajuster l'apparence des descriptions des liens de navigation afin de les harmoniser avec le contenu des éléments du menu principal et d'améliorer l'expérience de l'utilisateur. Les paramètres spécifiques sont les suivants

espacement des tabulations

Ajustez l'espacement entre les étiquettes de navigation et le texte de description afin de rendre la typographie entre la description et les étiquettes plus claire et plus confortable.

couleur

Le sous-menu Paramètres décrit les couleurs dans les différents états et permet des réglages indépendants pour les trois états suivants :

• état normal
• état de survol
• statut actif

typographique

Ajustez le style de police des descriptions des sous-menus, y compris :

• taille de la police
• votre taille (honorifique)
• Cas alphabétique (par exemple, auto-capitalisation)
• Famille de polices (par exemple, sélectionner des polices personnalisées)
• l'épaisseur de la police
• espacement des lettres

Style de la description de la navigation de haut niveau

Vous pouvez également ajuster la partie supérieurenavigateurLe style de la description dans le bloc (Advanced Header Block), qui contribue à nouveau à améliorer la cohérence de la conception générale et la lisibilité du site.

espacement des tabulations

Définissez l'espacement entre les étiquettes des liens de navigation supérieurs et le texte de la description pour vous assurer qu'ils restent correctement séparés visuellement.

couleur

Définit la couleur de la description du lien de navigation de premier niveau, qui prend en charge les états suivants :

• état normal
• état de survol
• statut actif

typographique

Ajuster le style de police de la description du niveau supérieur de la navigation :

• taille de la police
• votre taille (honorifique)
• majuscules et minuscules
• Série de polices
• l'épaisseur de la police
• espacement des lettres

Ces paramètres de style de description vous permettent de mieux contrôler l'apparence et l'espacement du texte dans vos liens de navigation, ce qui rend l'ensemble du système de navigation plus propre, plus lisible et plus orienté vers la conception.

VIII. options de personnalisation avancées

• Ajout de marges et de marges intérieures à des blocs de navigation entiers ou à des éléments de lien individuels

• Définition des ancres HTML (#ID)

• Ajouter des classes CSS pour prendre en charge les styles personnalisés

IX. gestion de la navigation avancée

Vous pouvez facilement gérer toute la navigation avancée sur votre site web :

• Accès au tableau de bord: en WordPress Dans le tableau de bord, cliquez sur Kadence Le menu.
• Sélectionner la page de navigationDans le menu Kadence, sélectionnez navigateur Page.
• Modifier, créer ou supprimer la navigation: :
  • Navigation éditorialeVous pouvez sélectionner la navigation avancée existante pour la modifier et l'ajuster.
  • Créer une nouvelle navigation: cliquez "Ajouter une nouvelle navigation Kadence"pour créer une nouvelle navigation avancée.
  • Supprimer la navigationSi vous n'avez plus besoin d'une navigation, vous pouvez la supprimer de la liste des navigations.

Cette page d'administration vous permet de gérer de manière centralisée toutes les fonctions de navigation avancées afin de les modifier et de les optimiser facilement.

résumés

KadenceAdvanced Navigation Block ne se contente pas d'améliorer la beauté et la fonctionnalité du menu de navigation, il vous libère également des limites des paramètres de menu traditionnels. Que vous créiez un site web à défilement sur une seule page ou une plateforme de commerce électronique complexe à plusieurs niveaux, l'utilisation de blocs de navigation avancés peut rendre votre conception plus flexible et l'interaction plus fluide.

Pour une personnalisation plus poussée, vous pouvez également combiner le plug-in Kadence Custom Fonts, le CSS personnalisé et d'autres moyens d'obtenir des effets de conception plus avancés.

Il est recommandé de mener des études approfondies en liaison avec les éléments suivants :