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

Style Global

Le Style global permet de gérer le design général de votre application à partir d'un seul menu.
Les couleurs, les polices et les effets choisis dans ce menu sont appliqués à chacune des sections de l'application.

ATTENTION, très important: Lorsque vous appliquez le style global à votre app, si vous aviez personnalisé le design de certaines de vos sections au préalable, ces paramètres seront écrasés pour être remplacés par ceux du Style Global.
Chaque modification faite à partir de ce menu sera appliquée à toutes les sections de votre app.

Pour configurer votre Style Global:
1. Allez dans le menu de gauche Mon app > Design > Design général
2. Cliquez sur "Style Global" dans le menu de droite.

Pour modifier le design d'une section spécifique, pour la personnaliser de manière approfondie, lisez cette aide en ligne .

picture

1

Thème de couleurs

Un thème de couleurs* est une combinaison de couleurs qui s'accordent harmonieusement. Le Style Global propose une bibliothèque de thème de couleurs.  
1. Sélectionnez un thème de couleurs parmi les choix proposés
2 Pour modifier un thème de couleur existant, lisez [le point 7]goto:1 de cette aide en ligne

*Lorsque vous choisissez un thème de couleurs, les couleurs qui le composent sont appliquées aux différents éléments de votre application.  
Une fois le thème de couleur choisi, il est appliqué partout dans l'application.

picture

2

Typographie

Il existe une hiérarchie pour l'affichage du texte dans l'application. 8 niveaux sont utilisés pour afficher les titres, les sous-titres et le texte des paragraphes:
1. Définissez la taille du texte en utilisant le curseur
Style Global calcule automatiquement la taille de chaque niveau afin de respecter la hiérarchie. 
2. Sélectionnez la police pour chacun des niveaux
Toutes les polices de la bibliothèque Google Font sont proposées, ainsi que les polices natives disponibles par défaut sur les appareils de vos utilisateurs. 
3. Pour chaque police, choisissez l'épaisseur

picture

3

Boutons

Pour les pages de votre app qui invitent les utilisateurs à effectuer une action, il existe 3 niveaux de boutons.
Chaque niveau correspond à une action différente dans les différentes Sections / Widget sur la home.
GoodBarber attribue automatiquement le bon niveau, en fonction de l'action et d'où est affiché dans l'app le bouton.

Niveau 1 du design des boutons, affiche toujours une couleur de fond
Niveau 2 du design des boutons, affiche une bordure
Niveau 3 du design des boutons, affiche un lien sur du texte

1. Paramétrez la forme du bouton dans le Style Global

Attention:
- La couleur des bouton est basée sur le thème de couleur, vous pouvez modifier les couleurs des boutons dans chaque spanel de design des sections  ou dans les paramètres des widgets .
- Le niveau attribué au bouton ne peut être modifié.

picture

4

Effets de survol (PWA desktop uniquement)

1. Choisissez les effets qui apparaissent au survol de la souris sur un élément.
Ils sont appliqués sur les images et sur les liens hypertextes.

picture

5

1. Sélectionnez le design des onglets affichés dans les sections : Recherche, Profil, Utilisateurs et Carte de fidélité.

picture

6

Eléments additionnels

1. Sélectionnez l'icône du menu qui apparait dans le header de l'application
2. Sélectionnez l'icône du bouton retour qui apparait dans le header de l'application 

picture

7

Modifier un thème de couleurs

Créez jusqu'à 3 thèmes de couleur personnalisés.
1. Cliquez sur Modifier au-dessus de votre thème actuel :

picture

2. Allez en bas de page
3. Cliquez sur "Créer un thème de couleurs"

picture

4. Editez le nom de votre thème personnalisé en cliquant sur l'icône en forme de crayon.
5. Définissez les couleurs de votre thème personnalisé par zone:
Zone de titre
Ces couleurs seront appliquées à votre header .
Couleurs principales
Ces couleurs seront appliquées à la partie principale de votre application (titre, texte et arrière-plan des pages de vos articles, ou couleur du texte dans votre mode de navigation par exemple)
Couleurs secondaires
Ces couleurs seront appliquées lorsqu'il y a des bordures ou des séparateurs pour la couleur de gauche, la couleur de droite sera appliquée comme couleur de fond ou comme arrière-plan d'onglets par exemple.
Arrière-plan de l'app et du menu
Ces couleurs seront appliquées à votre application et la couleur d'arrière-plan du menu
Boutons
Ces couleurs seront appliquées au texte et à la couleur de fond de vos boutons.

picture

6. Cliquez sur "Appliquer"* pour appliquer votre nouveau style global personnalisé.

*Chaque modification effectuée dans ce menu sera appliquée à toutes les sections de votre application.
Faites très attention, lorsque vous appliquez votre style global à votre application, si vous avez préalablement défini certains paramètres de design dans une section particulière de votre application, ces paramètres seront perdus pour être remplacés par les nouveaux définis dans votre style global personnalisé.


8

Tutoriel vidéo