Vous êtes ici:   Sommaire / Le Design De L'App / Design Général

Logo & Titre

La zone de titre (logo et titre) est la partie supérieure de l'application qui est toujours visible et accessible sur toutes les sections.

La zone de titre a 4 fonctions :

  • afficher l'identité de votre application
  • donner un titre à la section
  • afficher les raccourcis 
  • naviguer dans l'application
Pour configurer votre logo et votre titre :

1. Allez dans le menu de gauche Contenu et Design > Design > Design général
2. Cliquez sur "Logo et titre " dans le panneau de droite.

Pour accéder aux paramètres avancés décrits ci-dessous, cliquez sur le bouton "Avancé" dans le coin supérieur droit du panneau.


1

Hauteur de la zone de titre

Paramètres généraux de votre zone de titre

Sélectionnez la hauteur de votre zone de titre entre 3 modèles :
- Petite* : affiche le titre ou l'image du logo.
- Moyenne : affiche le titre ou l'image du logo (disponible uniquement pour les sections dans la navigation principale du panneau droit de votre back office)
- Grande : affiche le titre ou l'image du logo + la description courte (seulement disponible pour les sections dans la navigation principale du panneau droit de votre back office)

picture

* Les autres sections du panel droit de votre back office + les sections listées ci-dessous affichent toujours la Petite Template de la zone de titre:
- Vue du panier
- Profile + détails
- Toutes les pages de détails
- Not found
- Page de login
- Template tabBar
- Liste de commentaires (blog)
- Commentaires (Blog)
- Section recherche 
- Toutes les templates minimal
- Paramètres
- Section CSG

Les sections HTML utiliseront toujours une petite template.


2

1. La partie centrale de la zone de titre vous permet de donner un titre à votre application ou à une section. Ce titre peut être affiché sous la forme d'un texte ou d'un logo (image). 
- Texte : cliquez sur le texte pour le modifier. 
- Logo : cliquez sur le bouton "Logo" pour ajouter une image* à la place du texte.
*Respectez la taille minimale requise de 800 x 200 px.

2. Sélectionnez la couleur et la police de votre titre

3. Alignement : Positionnez votre logo ou votre titre à gauche ou au centre de la zone de titre.
Remarque : dans les pages checkout, panier, Ajouter une adresse, Ajouter une carte et Modifier le mot de passe, le logo/titre sera toujours centré.


3

Paramètres avancés - Description courte

Dans le menu Logo, si vous avez sélectionné une template Grande, vous avez la possibilité de définir une courte description qui s'affiche dans votre zone de titre au-dessus du logo de votre application.
Remplissez la brève description de votre zone de titre et définissez la police et la couleur du texte.


4

Paramètre avancés - Actions dans la zone de titre

Dans le menu Logo, vous pouvez définir les options d'affichage du titre. Cette option définit la stratégie d'affichage de la zone de titre.
1. Sélectionnez "Logo uniquement" pour afficher systématiquement le logo défini dans votre en-tête général sur toutes vos pages d'application.
ou
2. Sélectionnez "Titre et description de la section" (hauteur de la zone de titre grande) ou "Titre de la section" (hauteur de la zone de titre petite et moyenne) : Mettez à jour le titre de votre zone de titre en fonction de la page de votre application qui est affichée, pour utiliser automatiquement le titre de la section concernée.

Pour définir la description d'une section si vous utilisez un Grande Template :
- Allez dans le menu Contenu et design > Sections .
- Ouvrez les paramètres de la section concernée

Remarque : Dans la navigation principale de votre application, la première section de votre liste utilisera toujours le titre/la description de la zone de titre générale.

picture

5

Paramètre avancés - Icônes du Menu & Retour

La partie gauche de la zone de titre est utilisée pour afficher les actions de navigation.

Définissez le design du bouton "Menu" (icône + couleur).
Les menus de navigation Swipe, Little Swipe, Grid, Slate fournissent un bouton de menu affiché dans la zone de titre et permettant d'accéder au contenu.
Dans le menu de navigation TabBar, ce bouton n'apparaîtra pas.

Définir le design du bouton "Retour" (icône + couleur)
Ce bouton est utilisé pour revenir aux sections précédentes dans votre application.

picture

6

Paramètre avancés - Fond de la zone de titre

Sélectionnez les couleurs du fond de la zone de titre.
Définissez une image de fond (1242 x 192 px) pour le fond de votre zone de titre (disponible uniquement pour la Template Petite).


7

Paramètres avancés - Effet lors du défilement

Lorsque vous faites défiler les pages de votre application, vous pouvez définir différents effets pour votre zone de titre.
Aucun effet : disponible pour les modèles Petite, Moyenne et Grande.
Disparition : disponible pour les modèles Petite, Moyenne et Grande ; la zone de titre est masquée lorsque vous faites défiler la page.
Redimensionnement : disponible pour les modèles Moyenne et Grande ; la zone de titre devient plus petit lorsque vous faites défiler la page.


8

Paramètres avancés - Actions dans la zone de titre

Un raccourci vers le panier est automatiquement ajouté sur le côté droit de la zone de titre.
1. Cliquez dessus pour modifier sa couleur et son icône.
2. Vous pouvez afficher un titre pour le raccourci pour l'iPad et le bureau et afficher le raccourci sous la forme d'un bouton pour le bureau uniquement.
3. Définissez le design de l'icône qui s'affichera après l'ajout de produits au panier (couleur du numéro et de l'icône de fond).

Pour ajouter une nouvelle action, cliquez sur l'icône verte + et sélectionnez dans le menu déroulant du lien la page vers laquelle vos utilisateurs seront redirigés lorsqu'ils cliqueront sur cette action.

picture

Note : Seuls 2 raccourcis sont affichés dans l'en-tête, si vous ajoutez des raccourcis supplémentaires, ils seront accessibles à partir du second raccourci (menu supplémentaire) pour vos utilisateurs.