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

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 l’exemple du 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, cliquez sur l’icône v située à côté du nom de chaque ajustement et ouvrez son menu déroulant. 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 la zone de texte. Pour en savoir plus, consultez l’article Modifier les couleurs.

Astuce : certains modèles disposent de couleurs supplémentaires pouvant s’afficher lorsqu’un visiteur survole ou clique sur un lien

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 si 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 dans la même position, 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

Voici comment la navigation principale s’affiche dans chaque modèle. Les modèles sont regroupés par famille.

Remarque : 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.

Modèle

Disposition

Adirondack

Horizontale, centrée en haut

Avenue

Horizontale, gauche/centre/droite en haut

Famille Aviator

Aubrey, Aviator

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

Famille Bedford

Anya, Bedford, Bryant, Hayden

Horizontale, en haut à droite

Famille Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

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

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

Famille Farro

Farro, Haute

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 le pied de page

Famille Montauk

Julia, Kent, Montauk, Om

Horizontale, gauche/centre/droite en haut

Native

Horizontale, centrée en haut

Famille Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

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

Famille Skye

Foundry, Indigo, Ready, Tudor, Skye

Verticale, dans une superposition

Supply

Verticale, barre latérale gauche

Famille Tremont

Camino, Carson, Henson, Tremont

Horizontale, en haut à gauche/droite

Wells

Verticale, barre latérale gauche

Wexley

Horizontale, gauche/centre/droite en haut

Famille York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, 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 : 52 sur 248
Mise en forme de votre navigation