Menus de navigation et de sous-navigation

Les menus de navigation et de sous-navigation sont des liens vers des pages internes de votre site Web. Nous créons ces menus automatiquement à partir des pages que vous avez créées, et la disposition du menu est susceptible de varier un peu d'un modèle à l'autre. Un menu de navigation bien structuré aide les visiteurs de votre site à trouver les informations qu'ils cherchent.

Construction du menu

Ajoutez le widget Navigation links (Liens de navigation) sur le site et choisissez l'une des options permettant de renseigner la liste de liens.

 

  • Site page (Page du site) - Remplissez le contenu des liens de navigation avec les pages du site, les dossiers de navigation et les points d'ancrage. Ce menu sera généré automatiquement en fonction de l'onglet Pages du site. C'est un moyen rapide de placer la navigation de base sur votre site. 
  • Custom links (Liens personnalisés) - Créez votre propre menu avec des liens personnalisés. Cette option offre une grande flexibilité dans la création de barres de navigation rapides pour ajouter une navigation de page intérieure, une navigation de pied de page se limitant aux liens les plus utiles, un menu regroupant vos comptes de réseaux sociaux, etc.

navigation13_en-US.png

Après avoir sélectionné l'option Custom links (Liens personnalisés), l'éditeur vous invite à renseigner la liste des liens avec des éléments personnalisés, de la même manière que vous utiliseriez le sélecteur de liens. Il suffit d’ajouter des éléments et de les relier à des pages externes ou internes, et à des points d'ancrage.

Application d'un style au menu

Modifiez la conception de la navigation en effectuant un clic droit sur la navigation et en sélectionnant Edit Design (Modifier la conception).

Disposition

La section Layout (Disposition) vous permet de choisir facilement parmi les nombreuses présentations de la barre de navigation. N'oubliez pas que vous pouvez changer le design de ces dispositions. Choisissez-en donc une qui ressemble à ce que vous souhaitez, puis consultez les prochaines Sections prédéfinies de cet article pour aller plus loin dans la personnalisation.

nav2_en-US.png

Pour utiliser les fonctionnalités de navigation (publiées ou non publiées), les utilisateurs doivent changer activement une disposition. La nouvelle navigation utilise divers sélecteurs CSS de façon à ce que le changement de la disposition réinitialise la personnalisation de la navigation et permette à l'utilisateur de la personnaliser à nouveau. Un clic sur le bouton Undo (Annuler) restaure l'ancienne navigation.

Si votre site contient des sous-pages, vous aurez également accès à une section Sub Navigation Layout (Disposition de la sous-navigation). Depuis cette section, vous pouvez choisir une disposition pour l'apparence des sous-pages sur votre site. Comme pour la disposition de la navigation principale, vous pouvez également modifier la disposition de la sous-navigation dans les Sections prédéfinies suivantes.

nav3_en-US.png

Si vous voulez placer le logo de votre site entre les éléments de navigation sans avoir à créer deux ensembles de navigation distincts, vous pouvez le faire en sélectionnant l'orientation « Horizontal with logo » (Horizontale avec logo).

nav4_en-US.png

Cette option divise les liens de navigation en deux et les aligne à égale distance des deux côtés du logo. La fonction Center logo (Logo centré) tient compte du nombre d'éléments de navigation. De ce fait, si vous continuez d'ajouter des pages, les éléments de navigation s'organisent automatiquement.

Si le nombre d'éléments de navigation est impair, le côté droit en contiendra plus (il est impossible de changer cela).

Pages

L'onglet Pages vous permet de personnaliser :

  • le style des barres de navigation individuelles (couleur d'arrière-plan, couleur au passage du curseur et espace vide, ainsi que style du texte) ;
  • le sens de la navigation (de gauche à droite ou de droite à gauche) ;
  • le nombre d'éléments de navigation visibles ;
  • Le type de séparation que vous voulez entre les pages de navigation, si vous en voulez une
  • L'activation ou non de la navigation rapide (découvrez-en plus à ce sujet dans la section Remarques) 

Si vous cliquez sur « Link Text » (Texte de lien), vous pouvez changer les options pour :

  • Le type de police
  • La taille de police
  • La couleur du texte
  • Le soulignement, le gras et l'italique

Page sélectionnée et survol

En bas de la section Pages, vous pouvez personnaliser le style de la navigation sélectionnée et les effets de survol pour celle-ci. Faites votre choix parmi les nombreux effets de « survol » pour personnaliser davantage votre site.

nav7_en-US.png

Vous pouvez également modifier la couleur de l'élément de navigation lorsque vous passez dessus avec la souris, ainsi que le gras, le soulignement et l'italique dans les options « Link Text » (Texte de lien).

Sous-pages

L'onglet Subpages (Sous-pages) vous permet de personnaliser le style de la sous-navigation :

  • La couleur d'arrière-plan
  • L'ombrage
  • L'espacement entre les éléments de sous-navigation
  • Le type de séparation
  • La couleur d'arrière-plan de la page sélectionnée

nav9_en-US.png

Les options « Link Text » (Texte de lien) des sous-pages vous permettent aussi de spécifier l'apparence des sous-pages. Notamment :

  • Le style de police
  • La taille de police
  • La couleur du texte
  • Le gras, le soulignement et l'italique
  • L'orientation du texte de la droite vers la gauche ou de la gauche vers la droite
  • La couleur du texte de la page sélectionnée
  • Le gras, le soulignement et l'italique de la page sélectionnée

Espacement

L'onglet Spacing (Espacement) vous permet de personnaliser l'espacement de la barre de navigation.

 

Ressources

  • Pour savoir comment ajouter ce widget sur votre page, consultez notre guide sur Ajout de widgets.
  • Pour en savoir plus sur la modification des widgets, consultez notre guide sur Modification des widgets.