Modulo:
Personalizzazione > Preferenze tema
Descrizione: Questo strumento permette di definire l'identità visiva e lo stile grafico (colori, font, layout) del tuo intero sistema Framework360, garantendo coerenza tra sito web e comunicazioni.
A cosa serve? (Esempi pratici)
Usalo per:
- Assicurare che tutti gli elementi grafici (pulsanti, titoli, link) rispettino i colori e il brand aziendale.
- Impostare la tipografia (font e dimensioni) per migliorare la leggibilità del sito e delle comunicazioni.
- Definire rapidamente l'aspetto del sistema attraverso la generazione automatica di stili basata sull'Intelligenza Artificiale.
Funzionalità principali
1. Generazione Stile tramite AI
È possibile generare automaticamente un set di colori e stili di base cliccando sul pulsante "Genera stile tramite AI". Il sistema ti guiderà attraverso un processo di creazione rapida e ti permetterà di visualizzare un'anteprima prima di applicare il design.
2. Impostazioni Generali
- Contenitore: Definisce la larghezza massima del contenuto (in pixel) per le diverse dimensioni dello schermo (Extra Large, Large, Medium, Small).
- Colori: Permette di impostare la palette di colori predefinita del sistema (es. Primario, Secondario, Successo, Errore) tramite uno strumento di selezione colore. Questi colori saranno disponibili per l'uso in tutto il sistema.
3. Tipografia e Stili
- Titoli (H1-H6): Consente di definire un font specifico, il colore, l'altezza delle linee e la dimensione (in pixel) per ogni livello di titolo, da H1 a H6.
- Corpo Pagina: Imposta il font principale, la dimensione e l'altezza delle linee per il testo standard, oltre al colore del testo e il colore di sfondo della pagina.
- Logo: Permette di impostare una larghezza predefinita (in pixel) per il logo aziendale.
- Link: Definisce il colore dei collegamenti ipertestuali e il colore che assumono quando l'utente ci passa sopra con il mouse (stato "hover").
4. Gestione Sfondo
Se si sceglie di utilizzare un'immagine di sfondo per il corpo della pagina, è possibile configurare opzioni avanzate:
- Immagine di sfondo: Caricamento di un file immagine.
- Dimensione: Modalità di visualizzazione dell'immagine (es.
cover,contain,auto). - Ripeti: Se l'immagine deve essere ripetuta (verticalmente, orizzontalmente o per riempire lo spazio).
- Posizione: Dove l'immagine deve essere ancorata all'interno della pagina (es. centro, in alto a sinistra).
- Attaccamento: Se l'immagine deve scorrere con la pagina (
scroll) o rimanere fissa (fixed).
5. Caratteri Personalizzati
È possibile caricare i propri font aziendali (in formato .ttf o .otf). Una volta caricati, questi font saranno immediatamente disponibili nel selettore di font per i titoli e il corpo pagina.
6. Stili dei Pulsanti
Questa sezione avanzata permette di personalizzare l'aspetto di tutti i pulsanti predefiniti del sistema (basati sui colori definiti nella sezione "Colori"). È possibile usare un editor visuale per definire in dettaglio lo stile (bordi, ombre, colori di sfondo e testo) per ogni tipo di pulsante.
Come si configura
Tutte le impostazioni sono organizzate in sezioni all'interno del modulo di modifica. Dopo aver apportato le modifiche, è necessario cliccare sul pulsante di salvataggio standard del sistema.
| Sezione | Opzione di Configurazione | Descrizione |
|---|---|---|
| Generali | Larghezza Contenitore | Imposta la dimensione massima del contenuto per i dispositivi (Extra Large, Large, Medium, Small). |
| Generali | Colori (Primario, Successo, etc.) | Definizione della palette cromatica principale del sistema. |
| Titoli (H1-H6) | Font, Colore, Dimensione | Scelta del carattere e delle proprietà visive per tutti i titoli. |
| Corpo Pagina | Font, Dimensione, Colore | Impostazioni per il testo principale della pagina. |
| Corpo Pagina | Sfondo e Immagine | Definizione del colore di sfondo e caricamento/gestione di un'immagine di sfondo. |
| Logo | Larghezza predefinita | Dimensione standard del logo in pixel. |
| Link | Colore e Colore Hover | Definizione del colore dei collegamenti ipertestuali in stato normale e al passaggio del mouse. |
| Caratteri Personalizzati | Caricamento Font | Caricamento di file .ttf/.otf per l'uso nel sistema. |
| Pulsanti | Stile per tipo | Personalizzazione avanzata dell'aspetto di ogni stile di pulsante (es. Pulsante Primario, Pulsante di Avviso). |
Integrazioni automatiche
Coerenza nelle Email Transazionali
Le impostazioni di stile e colore definite in questo modulo vengono automaticamente applicate per formattare le email inviate dal sistema (come le notifiche o i template di comunicazione). Questo assicura che le email mantengano lo stesso aspetto grafico del tuo sito web.
