Plateforme/PWA - Design

Intégrez les éléments de design global de votre app ou plateforme (typographie, couleurs, logo...)

Pour accéder à la configuration du design de la plateforme, il vous suffit de cliquer sur le module Config puis aller dans l'onglet Design.

Dans cet onglet, vous pouvez paramétrer :

  • Couleurs principales et secondaires
  • Logos
  • Favicon
  • Style du menu
  • Fond desktop et mobile
  • Typographies
  • Design de la page login

Global

L'onglet global permet de paramétrer les éléments de design généraux

Couleurs

  • Couleur principale : la couleur principale est utilisée pour la mise en avant des différents actions
  • Couleur secondaire : la couleur secondaire vient compléter la couleur principale

Vous pouvez intégrer vos couleurs directement avec le code hexadécimale
Si vous ne connaissez pas l'hexadécimale, vous pouvez cliquer sur le cadre de couleur pour accéder à plus d'options :

Images et logos

Dans la partie images & logos, vous pouvez ajouter vos logos ainsi que les fonds mobile et desktop

Logos & favicon

  • Logo : logo principale de votre événement, qui s'affiche au dessus du menu et sur la version mobile
  • Logo secondaire : si vous avez un menu secondaire, il faut intégrer le logo dans la partie logo secondaire
  • Favicon : la favicon est le petit logo qui s'affiche sur le navigateur quand l'onglet du site est ouvert

Exemple favicon :

Image de fond

Image à afficher par défaut sur toutes les pages. Il est possible par la suite de mettre une image différente par page

  • Image de fond par défaut : image desktop pour toute la plateforme. Dimensions conseillées : 1920x1080
  • Image de fond par défaut sur mobile : image de fond pour toute l'application. Dimensions conseillées : 1080x1920

Image d'accueil

L'image d'accueil permet d'afficher une image à la 1ere connexion pour les participants
Cette image ne s'affichera qu'à la 1ere connexion et ne sera plus visible par la suite
Dimensions conseillées : 750x1334

Menu

Style de menu

  • Position du logo : vous pouvez choisir de positionner le logo en haut, ou en haut à gauche
  • Style des boutons : classic, tabs ou buttons. cela vous permet de choisir entre 3 affichages différents pour vos onglets sur votre plateforme
  • Centrer les items : permet de centrer tous les onglets du menu

Style des boutons

Le style ne s'affiche qu'en desktop, cela n'est pas pris en compte sur mobile

  • Bouton de deconnexion : cette case à cocher permet d'afficherles initiales du participants

image.png

CSS

L'onglet CSS permet d'ajouter du CSS au global sur la plateforme

Généralement, cette partie est gérée par votre chef de projets
Cependant, si vous savez faire du CSS, vous pouvez le faire ici

Merci de ne rien supprimer !

Fonts

L'onglet fonts vous permet d'ajouter vos typographies spécifiques

Police

  • Nom de la police : entrez ici le nom de votre typographie
  • Police de secours : dans le cas ou votre police ne serait pas acceptée chez certains participants

Police personnalisée

Vous pouvez ici intégrée vos fichiers de typo en normal / italic / bold / bold italic
Une fois intégrée, la typographie s'applique sur toute votre plateforme !

Login

L'onglet login vous permet de personnaliser la page de connexion de votre plateforme / application

Vous pouvez ici ajouter plusieurs éléments de design :

  • Logo : permet d'ajouter le logo de votre événement
  • Bannière : permet d'ajouter la bannière de votre événement
  • Image de fond : permet d'ajouter une image de fond desktop
  • Image de fond spécifique au login sur mobile : permet d'ajouter une image de fond mobile
  • Vidéo de fond : permet d'ajouter une vidéo en fond de page sur la login
  • Video de fond spécifique au login sur mobile : permet d'ajouter une vidéo de fond mobile