Le bloc Menu de Navigation vous permet d'intégrer des menus de navigation sur vos pages de destination et modèles de site SeedProd. Vous avez la possibilité de créer un menu personnalisé simple directement dans le constructeur, ou de connecter un menu WordPress existant de votre site.
Le bloc prend en charge les mises en page horizontales et verticales, un basculeur de menu mobile rétractable, des sous-menus avec un contrôle de style complet, et des paramètres de lien par élément — ce qui en fait une solution de navigation flexible pour les en-têtes, les pieds de page et les barres latérales.
Ajouter le bloc Menu de Navigation à vos pages
Suivez ces étapes pour ajouter un bloc Menu de Navigation à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Menu de Navigation dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Menu de Navigation pour ouvrir ses paramètres. Dans l'onglet Contenu, commencez par sélectionner votre type de menu sous la section Paramètres.
Type de menu :
- Simple : Créez un menu personnalisé directement dans SeedProd en ajoutant manuellement des éléments. Chaque élément peut être déplacé pour réorganiser, dupliquer ou supprimer. Cliquez sur n'importe quel élément pour développer ses paramètres et configurer le Texte (l'étiquette du lien visible), le Lien URL (l'URL de destination), Ouvrir dans une nouvelle fenêtre et les options No Follow. Cliquez sur + Ajouter un nouvel élément pour ajouter d'autres liens au menu.
- Menu WordPress : Connectez un menu WordPress existant à ce bloc. Sélectionnez un menu dans la liste déroulante des menus enregistrés sur votre site. Un lien vers l'écran des Menus WordPress est fourni pour créer ou gérer les menus si nécessaire.
Paramètres :
- Taille de la police : Définissez la taille de la police des liens des éléments de menu de 10 à 72 px.
- Espace entre : Définissez l'espacement entre les éléments de menu de 1 à 100 px.
- Séparateur : Entrez un caractère ou une chaîne de caractères à utiliser comme séparateur visuel entre les éléments de menu (par exemple,
|). - Alignement : Définissez l'alignement horizontal du menu — Gauche, Centre ou Droite. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Menu mobile : Activez pour activer un menu hamburger rétractable sur les appareils mobiles, remplaçant le menu complet par un bouton basculeur compact sur les petits écrans.
Le basculeur du menu mobile affiche une icône de menu hamburger sur les appareils mobiles. Lorsqu'il est tapé, il se développe pour afficher le menu complet.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser la typographie, les couleurs, le style du sous-menu et l'espacement de votre bloc Menu de Navigation.
Styles avancés :
- Mise en page de la liste : Choisissez si les éléments de menu s'affichent dans une mise en page Verticale (empilée) ou Horizontale (côte à côte).
- Typographie : Affinez la famille de polices, le poids de la police, la taille, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour les liens des éléments de menu. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Couleur du texte actif : Définissez la couleur du lien de l'élément de menu actuellement actif.
- Couleur du texte au survol : Définissez la couleur des liens des éléments de menu au survol.
- Ombre du texte : Ajoutez une ombre au texte des liens du menu. Choisissez parmi Aucune, Fine, Petite, Moyenne, Grande, Très grande ou Extrêmement grande.
Sous-menu :
- Couleur d'arrière-plan du sous-menu : Définissez la couleur d'arrière-plan des panneaux de sous-menu déroulants.
- Couleur du texte du sous-menu : Définissez la couleur du texte des liens du sous-menu.
- Couleur de survol du sous-menu : Définissez la couleur du texte au survol des liens du sous-menu.
- Rayon de bordure du sous-menu : Définissez le rayon des coins des panneaux de sous-menu de 1 à 50px.
- Hauteur de ligne du sous-menu : Définissez la hauteur de ligne des éléments du sous-menu de 1 à 60px.
- Largeur de bordure du sous-menu : Définissez la largeur de bordure des panneaux de sous-menu de 1 à 60px.
- Couleur de bordure du sous-menu : Définissez la couleur de bordure des panneaux de sous-menu.
- Ombre du sous-menu : Ajoutez une ombre portée aux panneaux de sous-menu.
- Marge intérieure du sous-menu : Définissez la marge intérieure du panneau de sous-menu (Haut, Droite, Bas, Gauche).
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de menu de navigation (Haut, Droite, Bas, Gauche). Cela détermine l'espace entre le menu et les éléments environnants de la page.
- Marge intérieure : Ajustez l'espacement intérieur de votre bloc de menu de navigation (Haut, Droite, Bas, Gauche). Cela crée un espace entre les liens du menu et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc de menu de navigation. Cet ID est créé automatiquement par SeedProd pour le style personnalisé ou le ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc de menu de navigation sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc de menu de navigation sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc de menu de navigation sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc de menu de navigation défile dans la vue. Les options incluent Rebond, Fondu, Zoom avant, Rotation avant, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc de menu de navigation et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc de menu de navigation à votre page ! Un menu de navigation bien placé aide les visiteurs à trouver rapidement ce qu'ils cherchent et les maintient engagés sur votre site. Utilisez le type de menu Simple pour des listes de liens personnalisés rapides, ou connectez un menu WordPress pour maintenir la cohérence de votre navigation avec le reste de votre site.