Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Mise en forme de votre navigation

La navigation de votre site est un ensemble de liens qui redirigent les visiteurs vers le contenu du site. En général, la navigation est affichée en haut de votre site, mais certains modèles acceptent une navigation dans le pied de page ou dans la barre latérale.

Tous les modèles comportent des options Styles du site qui permettent de modifier la police, la couleur et la taille des liens de votre navigation. Plusieurs modèles proposent des options supplémentaires. Consultez ce guide pour découvrir comment personnaliser votre navigation.

nav-links.png

Ces étapes concernent la version 7.0. Si votre site utilise la version 7.1, consultez l’article Options de style et de design de la version 7.1 pour en savoir plus.

Avant de commencer

Trouver les ajustements de navigation dans le panneau Styles du site

Chaque famille de modèles possédant ses propres Styles du site, la modification de vos liens de navigation n’obéit pas à une règle unique. Suivez ces conseils pour trouver les options de style proposées par votre modèle :

  • Pour ouvrir le panneau Styles du site à partir du Menu principal, cliquez sur Design, puis sur Styles du site.
  • Recherchez les ajustements qui y sont associés en parcourant les ajustements disponibles à gauche. Les ajustements comportent généralement le mot Navigation.
  • Vous pouvez également survoler les liens de navigation de votre site dans l’aperçu du site situé à droite. Lorsque des zones en surbrillance bleue apparaissent autour d’un lien de navigation, vous pouvez cliquer dessus. Cette action permet d’ignorer les ajustements qui n’affectent pas les liens de navigation. Lorsque vous avez terminé, cliquez sur Tout afficher pour revenir à l’affichage principal.

Voici un exemple des ajustements de navigation dans le modèle Thorne, qui fait partie de la famille Brine :

thorne_site_styles.gif

Modifier la police et la taille

Pour modifier la police de vos menus de navigation, ouvrez le menu déroulant de l’ajustement souhaité en cliquant sur l’icône v située à côté de son nom. Voir l’image ci-dessous (le nom de votre ajustement peut être différent).

navigation_font_options.jpg

À cet endroit, vous pouvez également modifier :

  • le nom des polices ;
  • Style
  • Taille
  • la hauteur de ligne ;
  • l’espacement entre les lettres.

Pour en savoir plus, consultez l’article Modifier les polices de caractères.

Modifier la couleur

Pour modifier la couleur des liens, cliquez sur un ajustement de couleur. Pour choisir une nouvelle couleur, cliquez sur la couleur en haut du sélecteur et sélectionnez une nuance dans le carré. Vous pouvez également saisir une valeur précise dans le champ de texte. Pour en savoir plus, consultez l’article Modifier les couleurs.

Astuce : certains modèles disposent de couleurs supplémentaires qui peuvent s’afficher lorsqu’un visiteur survole un lien ou clique dessus.

Modifier la position

Dans certains modèles, vous pouvez modifier la position des liens. Par exemple, vous pouvez les déplacer du centre vers la gauche.

Dans le panneau Styles du site, recherchez les ajustements appelés Position de la navigation, Alignement de la navigation ou portant un nom similaire. Pour découvrir les positions disponibles dans votre modèle, consultez le tableau Affichage de la navigation par modèle ci-dessous.

Voici un exemple de cet affichage dans le panneau Styles du site :

five_-_navigation_style_options.jpg

Astuce : dans la famille Brine, recherchez les sections En-tête : navigation principale et En-tête : navigation secondaire.

Modifier l’espacement entre les liens et autour des liens

Pour modifier l’espacement autour des liens de navigation, recherchez dans le panneau Styles du site les ajustements permettant de modifier votre en-tête, votre bannière ou votre navigation. Bien que les ajustements varient selon le modèle, les ajustements d’espacement des liens comportent généralement des mots comme ceux-ci :

  • Padding (Étalonnage)
  • Espacement
  • Largeur

Voici comment ces options peuvent se présenter dans le panneau Styles du site :

avenue_sizes_and_values.jpg

Les options Actif et Survol

Certains modèles proposent des options supplémentaires pour les liens de navigation, selon que l’on clique dessus ou non (leur « état » ou leur « phase »). Les ajustements variant selon le modèle, recherchez les mots suivants :

  • Survol – Le lien change lorsque les visiteurs le survolent.
  • Actif – Lorsque les visiteurs consultent une page de votre navigation, le style de son lien change.

Si vous avez besoin d’aide pour l’utilisation de votre modèle, consultez le guide correspondant ou la liste des ajustements du panneau Styles du site.

Astuce : les liens de navigation externes n’afficheront pas les styles actifs, même s’ils renvoient vers une page de votre site.

Navigation mobile

Dans la plupart des modèles, les menus de navigation sont réduits derrière une icône de menu lors de leur affichage sur un appareil mobile. Ceci facilite l’utilisation de votre site et améliore son ergonomie.

Souvent, la navigation mobile hérite des styles de la version bureau du site. Votre image de marque reste ainsi cohérente quel que soit le support. Certains modèles proposent des options de style mobile avancées qui vous donnent plus de contrôle sur le design. Pour découvrir les options de style mobile de votre site, consultez le guide Structure et style de votre modèle.

Pour découvrir les ajustements qui affectent votre navigation mobile, ouvrez votre navigation en mode smartphone avant d’ouvrir le panneau Styles du site. Vous verrez ainsi les modifications apportées au fur et à mesure.

  1. Accédez à l’affichage par appareil et sélectionnez Smartphone.
  2. Cliquez sur le lien de navigation (généralement le symbole ☰) pour afficher votre navigation mobile.
  3. Dans le Menu principal, cliquez sur Design, puis sur Styles du site. La navigation mobile restera ouverte.
Remarque : si votre barre de navigation n’est pas visible sur la version de votre site pour mobile, vérifiez si la couleur d’arrière-plan ou d’en-tête n’est pas la même que celle du texte de votre barre de navigation. Il se peut que les liens s’affichent dans cette couleur dans la version pour mobile.

Barre de navigation fixe

La barre de navigation fixe ou « sticky » reste au même endroit, en haut du navigateur, lorsque vous faites défiler la page vers le bas. Cette option est disponible dans certains modèles.

Affichage de la navigation par modèle

Sur la plupart des appareils mobiles, la navigation du site est masquée derrière une icône menu ou derrière un lien. Les appareils mobiles qui possèdent un écran suffisamment grand (comme les tablettes) peuvent afficher les styles de la version bureau. Pour en savoir plus, consultez l’article Icônes du menu de navigation.

Voici comment la navigation principale s’affiche dans ces familles de modèles :

Modèle Disposition

Adirondack

Horizontale, centrée en haut

Avenue

Horizontale, gauche/centre/droite en haut

Aviator

Verticale, en haut à gauche (carte de visite/offset) ou horizontale, centrée en haut (affiche)

Bedford

Horizontale, en haut à droite

Brine

Horizontale, gauche/centre/droite en haut, peut être masquée

Dans le panneau Pages, c’est la Navigation principale.

Farro

Horizontale, gauche/centre/droite en haut, peut être masquée 

Five

Verticale, dans une barre latérale (Position de navigation supérieure : aucune) ou horizontale, gauche/centre/droite en haut (au-dessus de la bannière, en dessous de la bannière)

Flatiron

Horizontale, en haut à gauche

Forte

Horizontale, en haut à droite

Galapagos

Horizontale, centrée en haut

Ishimoto

Horizontale, gauche/centre/droite en haut

Momentum

Horizontale, dans la barre de navigation

Montauk

Horizontale, gauche/centre/droite en haut

Native

Horizontale, centrée en haut

Pacific

Horizontale, centrée en haut, peut être répartie autour du titre du site.

Skye

Verticale, dans une superposition

Supply

Verticale, barre latérale gauche

Tremont

Horizontale, en haut à gauche/droite

Wells

Verticale, barre latérale gauche

Wexley

Horizontale, gauche/centre/droite en haut

York

Horizontale, gauche/centre/droite en haut, peut être masquée

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 62 sur 340
Mise en forme de votre navigation