Vous êtes ici:   Sommaire / Le Design De L'App / Menu De Navigation & Home Page

Le mode de navigation

Le mode de navigation permet d'afficher le menu principal de votre application.

Il permet de créer des liens pour diriger l'utilisateur vers le contenu de votre application et/ou vos actions.
Lorsque vous créez une nouvelle section dans votre application, un lien ouvrant cette page est automatiquement créé dans votre menu de navigation.

Pour paramétrer votre menu de navigation :
1. Cliquez sur "Menu de navigation " dans le menu déroulant de gauche Contenu & Design > Design
 

picture

1

Choix du template

1. Cliquez sur Sélectionner sous le modèle de votre choix dans la colonne de droite de votre back-office.
Le modèle appliqué est affiché en vert.

Il existe 5 modes de navigation différents :
- Swipe, Little Swipe, Grid et Slate sont accessibles depuis un bouton dans le header de l'application.
Ce bouton est affiché sur les pages de contenu accessible depuis votre menu de navigation (sauf si vous avez paramétré votre menu pour s'ouvrir au lancement de l'app, ou bien toujours affiché sur la web app selon les options disponibles).
- TabBar est affichée en bas de page sur les apps natives, et comme bannière en dessous du header sur la web app.
Elle est également affiché sur les pages de contenu accessible depuis votre menu de navigation.

picture

2

Construction du menu

  1. Cliquez sur Modifier sous le modèle choisi ou sélectionnez un nouveau modèle
  2. Cliquez sur l'icône verte "+Ajouter un élément" pour ajouter un élément dans votre menu
*Les éléments
- Séparateur : élément de design pour marquer une séparation
- Title break : élément permettant d'insérer un titre
- Lien : entrée vers une page, une action ou un lien externe
- Raccourci : groupe de liens 
- Logo : élément permettant de titrer ou d'afficher une image 
- Copyright : élément permettant d'afficher une information statique


En fonction du mode de navigation choisi, les éléments pourront êtres placés dans différentes zones du menu.

Swipe, Little Swipe, Grid, Slate
Ces modes de navigation sont découpés en 3 zones qui peuvent accueillir des éléments.
- Header : il est utilisé placer un logo sur la page de navigation, afficher des raccourcis ou des séparateurs. 
- Navigation principale : c'est la zone principale du mode de navigation. Il contient les sections que vous avez choisi d'afficher, les séparateurs ou title break
- Footer : en bas de page, il s'utilise pour afficher le copyright, des liens et des raccourcis

TabBar
Ce mode de navigation est découpé en 2 zones qui peuvent accueillir des éléments.
- Navigation Principale : ajoutez ici jusqu'à 5 liens 
- Menu "Autres" : Au delà de 5 liens dans le menu, la dernière position de la Navigation Principale devient le Menu "Autres". Il permet d'accéder à des liens supplémentaires

A noter : vous pouvez gérer l'affichage de vos collections dans le menu directement depuis la page de votre collection. Référez-vous à cette aide .

picture

3

Lien vers vos sections dans le menu de navigation

  1. Le menu Contenu & Design > Contenu > Sections  
  2. Glissez/déposez votre section dans la "Navigation principale" ou dans le menu plus bas "Autres sections".

Le menu principal Sections - Accessible à partir de la navigation principale contient la liste des sections qui sont affichées dans le menu de navigation principal de votre application. L'ordre des sections sera le même que pour votre menu: 
-Classez vos sections à partir des paramètres du menu de navigation ou de votre liste de sections par glisser-déposer.

Le menu du bas Autres sections - Non accessible depuis la navigation principale contient la liste du reste de vos sections, celles-ci n'apparaissent pas dans le menu de navigation principal de l'application.
 

picture

4

Créer des liens dans le menu de navigation

Pour créer un lien dans la partie Navigation principale de votre menu de navigation:

  1. Rendez-vous dans le menu de gauche Contenu & Design > Contenu > Sections
  2. Ajoutez une section Click-to, qui se comporte de la même manière qu'un lien. 
Pour créer un lien dans le footer de votre menu de navigation :
1. Cliquez sur "Menu de navigation " dans le menu déroulant de gauche Contenu & Design > Design
2. Cliquez sur le template de votre menu de navigation
3. Cliquez sur le bouton vert "+Ajouter un élément". 
4. Choisissez l'élément "Raccourci" dans le popup qui va apparaître.
Une fois le lien ajouté à votre menu, cliquez dessus pour le configurer :
- Titre : c'est le texte qui apparaît dans votre menu
- Lien : c'est la destination vers laquelle votre lien pointe
- Icône : c'est l'image qui apparaît dans votre menu
- Mettre en avant ce lien : cette option vous permet d'appliquer une couleur et police spécifique au lien

picture

5

Paramètres d'affichage

Gérez les options d'affichage dans chacune des zones de votre menu de navigation.
1. Allez dans le menu Contenu & Design > Design > Navigation menu
2. Cliquez sur le template de votre menu de navigation
3. Cliquez sur l'onglet "Paramètres ".
4. Modifier vos réglages (Alignement, images, polices, couleurs et autres)
 

picture

6

Tutoriel vidéo