Design
  • 2 Minutes to read
  • PDF

Design

  • PDF

Article summary

Capture d’écran 2024-02-08 à 16.26.28.png{height="" width=""}## Général

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

Capture d’écran 2023-01-11 à 15.59.07.png

Global

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

image.png

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

image.png

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 :

image.png

Images et logos

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

image.png

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

image.png

Exemple favicon :

image.png

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.png

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
image.png

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

image.png

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 !

image.png

Fonts

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

image.png

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

image.png

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

image.png

Capture d’écran 2024-02-08 à 16.27.57.png


What's Next