Marque et couleurs

Donnez une identité visuelle cohérente à votre site : palette de couleurs, navbar, favicon et pied de page.

L’onglet Marque des paramètres du site web regroupe tout ce qui touche à l’apparence visuelle de votre site : style de la barre de navigation, palette de couleurs, favicon et pied de page. Accédez-y depuis le module Site web en cliquant sur l’icône Settings, puis en choisissant l’onglet Marque.


Style de la barre de navigation

La première section vous permet de personnaliser entièrement la barre de navigation de votre site.

Onglet Marque – style de la barre de navigation

Couleurs disponibles :

  • Arrière-plan – la couleur de fond de la navbar.
  • Bordure inférieure – une ligne de séparation optionnelle sous la navbar.
  • Texte des liens – la couleur des liens de navigation.
  • Arrière-plan du CTA – la couleur de fond du bouton de connexion.
  • Texte du CTA – la couleur du texte dans le bouton de connexion.
  • Arrière-plan menu mobile – le fond du menu déroulant sur mobile.
  • Texte menu mobile – la couleur des liens dans le menu mobile.

Typographie et taille :

  • Taille de police – petite, moyenne (par défaut) ou grande.
  • Graisse de la police – de léger à gras.
  • Hauteur – la hauteur totale de la barre de navigation.
  • Hauteur du logo – contrôle la taille d’affichage de votre logo dans la navbar.
  • Coins du bouton CTA – de carré à très arrondi.

Un aperçu en direct s’affiche en bas de la section pour voir vos changements avant de les enregistrer.


Identité visuelle et palette de couleurs

La section Identité visuelle vous permet de définir votre favicon et de configurer une palette de 6 couleurs réutilisables sur l’ensemble de votre site.

Identité visuelle – favicon et palette de couleurs

Les polices se configurent dans les Paramètres de l’application et s’appliquent à tous les modules. Le lien Paramètres de l’application vous y amène directement.

Favicon : téléversez une image carrée (PNG, ICO, SVG ou WebP). Taille recommandée : 32x32 px ou 64x64 px pour les écrans haute résolution. Le favicon apparaît dans l’onglet du navigateur.

Palette de couleurs : définissez jusqu’à 6 paires de couleurs. Chaque palette comprend une couleur de fond et une couleur de texte, ainsi qu’un libellé libre pour vous y retrouver (ex. : “Primaire”, “Accentuation”, “Neutre clair”). Ces couleurs sont utilisées via des variables CSS et se propagent instantanément sur toutes vos pages.

Couleurs de palette dans l’éditeur de page

Une fois vos palettes définies, elles sont directement accessibles dans le panneau de propriétés de chaque élément lorsque vous éditez une page.

Panneau de propriétés d’un élément – sélection des couleurs de palette

La section Couleur affiche vos 6 palettes sous forme de boutons de sélection rapide, en plus de l’option Personnalisé pour saisir une valeur hexadécimale libre. Cela vous permet de maintenir une identité cohérente sur toutes vos pages sans avoir à mémoriser vos codes de couleur.


Style du pied de page

La section Style du pied de page contrôle l’apparence du bas de page affiché sur toutes vos pages.

Style du pied de page avec aperçu

Options disponibles :

  • Arrière-plan – la couleur de fond du pied de page.
  • Texte – la couleur du texte de copyright et autres informations.
  • Liens – la couleur des liens listés dans le pied de page.
  • Disposition des liens – centré, aligné à gauche ou à droite.
  • Afficher le nom de l’app – affiche le nom de votre application dans le copyright.

Un aperçu en direct du pied de page s’affiche sous les options. Cliquez sur Enregistrer pour appliquer tous les changements de l’onglet Marque.