Description : Cet outil permet de définir l'identité visuelle et le style graphique (couleurs, polices, mise en page) de votre système complet Framework360, garantissant la cohérence entre le site web et les communications.
À quoi ça sert ? (Exemples pratiques)
Utilisez-le pour :
- Assurer que tous les éléments graphiques (boutons, titres, liens) respectent les couleurs et la marque de l'entreprise.
- Définir la typographie (police et tailles) pour améliorer la lisibilité du site et des communications.
- Définir rapidement l'apparence du système via la génération automatique de styles basée sur l'Intelligence Artificielle.
Fonctionnalités principales
1. Génération de Style par AI
Il est possible de générer automatiquement un ensemble de couleurs et styles de base en cliquant sur le bouton "Genera stile tramite AI". Le système vous guidera à travers un processus de création rapide et vous permettra de visualiser un aperçu avant d'appliquer le design.
2. Paramètres Généraux
- Conteneur : Définit la largeur maximale du contenu (en pixels) pour différentes tailles d'écran (Extra Large, Large, Medium, Small).
- Couleurs : Permet de définir la palette de couleurs par défaut du système (ex. Primario, Secondario, Successo, Errore) via un outil de sélection des couleurs. Ces couleurs seront disponibles pour une utilisation dans tout le système.
3. Typographie et Styles
- Titres (H1-H6) : Permet de définir une police spécifique, la couleur, la hauteur des lignes et la taille (en pixels) pour chaque niveau de titre, de H1 à H6.
- Corps de Page : Définit la police principale, la taille et la hauteur des lignes pour le texte standard, ainsi que la couleur du texte et la couleur d'arrière-plan de la page.
- Logo : Permet de définir une largeur prédéfinie (en pixels) pour le logo d'entreprise.
- Liens : Définit la couleur des liens hypertextes ainsi que celle qu'ils prennent lorsque l'utilisateur passe dessus avec la souris (état "hover").
4. Gestion du Fond
Si vous choisissez d'utiliser une image d'arrière-plan pour le corps de la page, il est possible de configurer des options avancées :
- Image d'arrière-plan : Chargement d'un fichier image.
- Taille : Mode d'affichage de l'image (ex.
cover,contain,auto). - Répétition : Si l'image doit être répétée (verticalement, horizontalement ou pour remplir l'espace).
- Position : Où l'image doit être ancrée dans la page (ex. centre, en haut à gauche).
- Fixation : Si l'image doit défiler avec la page (
scroll) ou rester fixe (fixed).
5. Polices Personnalisées
Vous pouvez charger vos propres polices d'entreprise (au format .ttf ou .otf). Une fois chargées, ces polices seront immédiatement disponibles dans le sélecteur de polices pour les titres et le corps de page.
6. Styles des Boutons
Cette section avancée permet de personnaliser l'apparence de tous les boutons prédéfinis du système (basés sur les couleurs définies dans la section "Couleurs"). Il est possible d'utiliser un éditeur visuel pour définir en détail le style (bordures, ombres, couleurs d'arrière-plan et du texte) pour chaque type de bouton.
Comment configurer
Tous les paramètres sont organisés en sections au sein du module d'édition. Après avoir effectué les modifications, il faut cliquer sur le bouton standard d'enregistrement du système.
| Section | Option de Configuration | Description |
|---|---|---|
| Général | Largeur Conteneur | Définit la taille maximale du contenu selon les dispositifs (Extra Large, Large, Medium, Small). |
| Général | Couleurs (Primario, Successo etc.) | Définition de la palette chromatique principale du système. |
| Titres (H1-H6) | Police, Couleur, Taille | Choix du caractère et des propriétés visuelles pour tous les titres. |
| Corps de Page | Police, Taille, Couleur | Paramètres pour le texte principal de la page. |
| Corps de Page | Fond et Image | Définition de la couleur d'arrière-plan et chargement/gestion d'une image d'arrière-plan. |
| Logo | Largeur prédéfinie | Taille standard du logo en pixels. |
| Liens | Couleur et Couleur Hover | Définition des couleurs des liens hypertextes en état normal et au survol souris. |
| Polices Personnalisées | Chargement Police | Chargement des fichiers .ttf/.otf pour usage dans le système. |
| Boutons | Style par type | Personnalisation avancée de l'apparence pour chaque style de bouton (ex. Bouton Primario, Bouton di Avviso). |
Intégrations automatiques
Cohérence dans les Emails Transactionnels
Les paramètres de style et couleur définis dans ce module sont automatiquement appliqués pour formater les emails envoyés par le système (comme les notifications ou les modèles de communication). Cela garantit que les emails conservent le même aspect graphique que votre site web.
