Le bloc Menu de navigation vous permet d'intégrer des menus de navigation à vos pages d'accueil SeedProd et à vos modèles de site web. Vous avez la possibilité de créer un menu personnalisé simple directement dans le constructeur ou de connecter n'importe quel menu WordPress existant de votre site.
Le bloc prend en charge les dispositions horizontales et verticales, un menu mobile repliable, des sous-menus avec contrôle total du style 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 et déposez 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 dans la section Paramètres.
Type de menu :
- C'est simple : créez un menu personnalisé directement dans SeedProd en ajoutant des éléments manuellement. Chaque élément peut être déplacé pour être réorganisé, dupliqué ou supprimé. Cliquez sur n'importe quel élément pour développer ses paramètres et configurer les options Texte (le libellé visible du lien), Lien URL (l'URL de destination), Ouvrir dans une nouvelle fenêtre et 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 Menus WordPress est fourni pour créer ou gérer des menus si nécessaire.
Paramètres :
- Taille de la police : définissez la taille de la police des liens des éléments de menu entre 10 et 72 pixels.
- Espacement : définissez l'espacement entre les éléments du menu de 1 à 100 pixels.
- Séparateur : Entrez un caractère ou une chaîne à utiliser comme séparateur visuel entre les éléments du menu (par exemple,
|). - Alignement : définissez l'alignement horizontal du menu : à gauche, au centre ou à droite. Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Menu mobile : activez cette option pour afficher un menu hamburger repliable sur les appareils mobiles, remplaçant ainsi le menu complet par un bouton compact sur les écrans plus petits.
Le bouton Mobile Menu affiche une icône de menu hamburger sur les appareils mobiles. Lorsque vous appuyez dessus, il s'agrandit pour afficher le menu complet.
Étape 3 : Personnalisez 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 :
- Disposition de la liste : choisissez si les éléments du menu doivent être affichés dans une disposition verticale (empilée) ou horizontale (côte à côte).
- Typographie : ajustez la police, l'épaisseur, la taille, l'interligne, 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 les ordinateurs de bureau, les tablettes et les mobiles.
- Couleur du texte actif : définit la couleur du lien de l'élément de menu actuellement actif.
- Couleur du texte au survol : définit la couleur des liens des éléments de menu au survol.
- Ombre du texte : ajoutez une ombre au texte du lien du menu. Choisissez parmi Aucune, Fine, Petite, Moyenne, Grande, Très grande ou Très très grande.
Sous-menu :
- Couleur d'arrière-plan du sous-menu : définissez la couleur d'arrière-plan des panneaux du sous-menu déroulant.
- Couleur du texte du sous-menu : définissez la couleur du texte des liens du sous-menu.
- Couleur du 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 du sous-menu entre 1 et 50 pixels.
- Hauteur de ligne du sous-menu : définissez la hauteur de ligne des éléments du sous-menu entre 1 et 60 pixels.
- Largeur de la bordure du sous-menu : définissez la largeur de la bordure des panneaux du sous-menu entre 1 et 60 pixels.
- Couleur de la bordure du sous-menu : définit la couleur de la bordure des panneaux du sous-menu.
- Ombre du sous-menu : ajoutez une ombre portée aux panneaux du sous-menu.
- Remplissage du sous-menu : définissez le remplissage interne du panneau du sous-menu (haut, droite, bas, gauche).
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Menu de navigation (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre le menu et les éléments environnants sur la page.
- Remplissage : ajustez l'espacement intérieur dans votre bloc Menu de navigation (haut, droite, bas, gauche). Cela crée un espace entre les liens du menu et les bords du bloc.
Attributs :
- Identifiant CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Menu de navigation. Cet identifiant est créé automatiquement par SeedProd pour le personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur.
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Menu de navigation sur les écrans de bureau.
- Masquer sur tablette : masque le bloc Menu de navigation sur les tablettes.
- Masquer sur mobile : masquer le bloc Menu de navigation sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Menu de navigation apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation vers l'intérieur, et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Menu de navigation et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Menu de navigation à votre page ! Un menu de navigation bien placé aide les visiteurs à trouver rapidement ce qu'ils recherchent et les incite à rester sur votre site. Utilisez le type de menu Simple pour créer rapidement des listes de liens personnalisés, ou connectez un menu WordPress pour que votre navigation reste cohérente avec le reste de votre site.