Image de marque
L'onglet Paramètres → Image de marque est l'endroit où vous définissez le logo, le favicon, les couleurs primaire et d'accentuation, la typographie et le texte de pied de page. Tout ce que vous changez ici apparaît dans l'en-tête de la barre latérale, l'onglet du navigateur, l'écran de connexion, les e-mails transactionnels et le formulaire visiteur public.
Ouvrir l'onglet Image de marque
Depuis la barre latérale, cliquez sur Paramètres. Le premier onglet — Image de marque — est sélectionné par défaut. Le formulaire est divisé en quatre sections : Typographie, Logo & Images, Couleurs et Pied de page.
Typographie
Titre de la plateforme
Le texte qui apparaît à côté du logo dans l'en-tête de la barre latérale et l'onglet du navigateur. La plupart des églises utilisent leur nom de marque — « Église Communauté de Grâce », « Hope City », « Eschatos ». Gardez-le court ; les titres longs s'enroulent maladroitement dans la barre latérale mobile.
Sous-titre
Une deuxième ligne sous le titre dans la barre latérale — utile pour « Colombie », « Siège social » ou tout ce qui différencie cette organisation des autres. Laissez vide si vous ne voulez pas de deuxième ligne.
Logo et images
Logo
Cliquez sur Téléverser pour choisir un fichier depuis votre ordinateur, ou Bibliothèque média pour réutiliser une image déjà dans le stockage. Dans les deux cas, l'image passe par une boîte de dialogue de recadrage carré avant d'être sauvegardée — glissez le cadre de recadrage pour centrer votre logo et cliquez sur Appliquer.
TIP
Utilisez un PNG transparent ou un SVG. Le PNG est plus compatible (tous les navigateurs, tous les clients e-mail) ; le SVG est plus net sur les écrans Retina mais certains anciens clients e-mail l'affichent comme une icône d'image cassée. En cas de doute, téléversez un PNG.
Taille recommandée : au moins 256×256. La barre latérale affiche le logo à 14×14 (unités Tailwind, ~56 px) ; l'en-tête d'e-mail utilise 80×80. Tout ce qui est plus petit que 128 px devient flou sur les écrans Retina.
Favicon
Même flux de téléversement, mais recadré à 32×32 ou 64×64. Le favicon est ce qui s'affiche dans les onglets et marque-pages du navigateur. C'est aussi ce qu'iOS utilise comme icône d'écran d'accueil si le manifeste PWA n'est pas configuré — voir Configuration PWA pour la meilleure réponse.
Formats acceptés : PNG, ICO, SVG. La boîte de dialogue de recadrage plafonne la sortie à 192 px pour que le fichier reste petit.
Couleurs
Couleur primaire
La couleur utilisée pour les boutons, les liens, l'élément actif de la barre latérale et les onglets actifs. Choisissez quelque chose qui contraste bien avec du texte blanc — les libellés de boutons sont blancs à un poids de police d'environ 14 px, donc les couleurs primaires très pâles échoueront aux contrôles d'accessibilité.
Couleur d'accentuation
Une couleur secondaire pour les badges, les états de survol de la barre latérale et les boutons d'action non primaires. Souvent une nuance plus claire de la primaire — par exemple primaire #3563a8 avec accentuation #6b94d6. L'aperçu en direct en bas de la section Couleurs affiche les deux côte à côte pour que vous puissiez vérifier la paire.
Vous pouvez taper un code hex directement ou utiliser le pastille du sélecteur de couleurs. Les deux champs restent synchronisés.
Aperçu en direct
Une petite carte en bas de la section Couleurs affiche un bouton primaire, un bouton d'accentuation et deux cercles remplis en utilisant ce qui se trouve dans les entrées. Elle se met à jour au fur et à mesure que vous tapez — aucune sauvegarde requise pour prévisualiser.
Pied de page
Le pied de page apparaît en bas de chaque page de l'application admin et dans certains e-mails transactionnels. Il y a quatre champs :
| Champ | Exemple | Notes |
|---|---|---|
| Ligne de copyright | « © Y Tous droits réservés. » | Y est remplacé automatiquement par l'année en cours. |
| Préfixe « Conçu par » | « Conçu par » | Le texte d'introduction avant le nom de votre entreprise. |
| Nom de l'entreprise | « Genio Del Comercio Digital SAS » | Affiché comme un lien hypertexte. |
| URL de l'entreprise | https://geniodelcomerciodigital.com/ | Où le nom de l'entreprise mène. Ouvre dans un nouvel onglet. |
La plupart des églises laissent la ligne « Conçu par » par défaut de GCM pour créditer la plateforme. Si vous faites du white-label, remplacez-la par votre propre cabinet de conseil ou omettez-la en vidant les quatre champs.
Sauvegarder et voir le changement
Cliquez sur Sauvegarder l'image de marque en bas de la carte Image de marque. Le toast confirme ; la barre latérale se met à jour immédiatement pour vous, mais les autres onglets et les autres utilisateurs ne voient le changement qu'après un rechargement forcé (le toast vous le dit). Le navigateur met le favicon en cache de façon agressive, il peut donc s'écouler quelques minutes avant que la nouvelle icône n'apparaisse dans l'onglet de tout le monde.
Ce qui est sauvegardé où
Toutes les valeurs d'image de marque atterrissent dans app_settings sous les clés brand_* et footer_* :
brand_title,brand_subtitlebrand_logo,brand_favicon(chemins de stockage)brand_primary_color,brand_accent_colorfooter_line1,footer_line2_prefix,footer_link_text,footer_link_url
Le frontend les lit via BrandingContext au démarrage de l'application, ce qui signifie qu'un nouvel onglet s'ouvre déjà avec votre image de marque appliquée — pas de flash de contenu non stylé.
Image de marque du site public
Le constructeur de site web a son propre logo et sa propre palette de couleurs, séparés de l'image de marque de l'application admin. Voir Image de marque du Website Builder pour les définir — ils sont intentionnellement séparés pour que votre site visible par les membres puisse avoir une apparence différente de votre admin visible par le personnel.
Pièges courants
« J'ai téléversé un nouveau logo et l'ancien s'affiche encore. » Rechargez la page de force (Cmd+Maj+R / Ctrl+Maj+R). Le navigateur met en cache l'image du logo ; l'URL change quand vous en téléversez un nouveau mais les pages en cache gardent l'ancien jusqu'au rafraîchissement.
« Ma couleur primaire est difficile à lire sur fond clair. » L'application admin utilise votre primaire comme fond de bouton avec du texte blanc. Si le ratio de contraste est inférieur à 4,5:1, les utilisateurs de lecteurs d'écran et toute personne en plein soleil auront du mal. Faites passer votre couleur dans un vérificateur de contraste avant de sauvegarder.
« Le favicon ne se met jamais à jour. » Les navigateurs mettent les favicons en cache de façon agressive — parfois pendant des jours. Essayez une fenêtre privée pour vérifier que le nouveau favicon est bien en ligne avant de supposer que la sauvegarde a échoué.
Étapes suivantes
- Bases de l'organisation — définissez la locale avant l'image de marque pour que la bonne langue s'affiche.
- Configuration PWA — l'application installable a son propre schéma de couleurs.
- Image de marque du Website Builder — couleurs du site public.