Configurare l'aspetto e il branding della piattaforma

Introduzione

L’aspetto della piattaforma è composto da un set di elementi che insieme formano l'interfaccia della piattaforma, e che il Superadmin può personalizzare al fine di ottimizzare l’esperienza formativa e di utilizzo della piattaforma desktop e mobile. Questi elementi possono essere configurati a livello globale, o per i singoli domini dei clienti Extended Enterprise. Includono l'intestazione e i footer, CSS personalizzati, i pulsanti visualizzati nella pagina di login, e molto altro.

Questo articolo descrive la configurazione dell'aspetto e del branding delle piattaforme desktop. Ulteriori informazioni sulla configurazione per i dispositivi mobili.

Accedere alla configurazione dell’aspetto

Per raggiungere l’area di gestione dell’aspetto della piattaforma, accedere al Menu amministrazione dall’icona ingranaggio in alto a destra, quindi premere Configurazione aspetto e branding nella sezione Impostazioni. La pagina mostra la scheda dedicata alla configurazione desktop come default. Scorrere le sezioni della pagina di configurazione per personalizzare il tema a proprio piacimento.

Note sulle immagini o sui media caricati

In molte impostazioni relative all'aspetto della piattaforma è possibile caricare immagini o altri file multimediali. Tra questi, il logo e la favicon nell'intestazione, l'immagine di sfondo o il video per la pagina di login, lo sfondo del player del corso e l'immagine di copertina della pagina di presentazione del corso.

Una volta caricato un file, vedrà un'icona a forma di cestino che permetterà di rimuoverlo se necessario. Si noti che questa operazione eliminerà immediatamente l'immagine, anche se non si salvano le modifiche.

Personalizzare l'intestazione

La sezione Intestazione permette di personalizzare il titolo, il logo, il messaggio di intestazione e il favicon della piattaforma. È possibile creare i campi di testo di questa sezione in più lingue utilizzando il selettore multilingua, accessibile dall'icona globo in alto a destra della sezione. Ulteriori informazioni sul selettore multilingua.

Iniziare definendo il Titolo della pagina nel campo di testo dedicato. Il titolo è visualizzato nella scheda del browser e nella barra in alto della homepage della piattaforma. Questo campo di testo ha un limite di 1000 caratteri, oltre i quali sarà troncato da un'ellipsis.

Selezionare l'opzione per abilitare il messaggio dell'intestazione nella sezione corrispondente. Abilitando questa opzione, sarà possibile digitare il messaggio dell'intestazione nel campo di testo che segue. Questo testo potrebbe mostrare lo slogan o la vision dell'azienda. Il testo è modificabile utilizzando la barra degli strumenti nella parte superiore della finestra di testo. Il messaggio dell'intestazione sarà visualizzato sotto il logo della piattaforma e nella pagina di login. Il limite di lunghezza del testo di questo campo è di 340 caratteri, oltre i quali sarà troncato da un'ellipsis.

Nella sezione Logo, selezionare Carica il tuo logo per caricare un'immagine. Al fine di garantire delle buone performance per il caricamento delle pagine, e di evitare problemi con funzionalità come i report, la dimensione massima consigliata per l'immagine del logo è di 380x72px, l'altezza minima consigliata è di 36px. La dimensione massima dell'immagine è di 2MB, i formati supportati sono JPG, PNG, JPEG e GIF. Il logo è visualizzato nell'angolo in alto a sinistra della piattaforma. Da questa schermata è possibile caricare una favicon personalizzata nella sezione corrispondente: l'icona è visualizzata nelle schede del browser e nella barra superiore. Cliccare Carica la tua favicon, e selezionare un'immagine PNG o JPG 16×16 dal proprio dispositivo. Quando si utilizza Safari, è possibile riscontrare problemi nella visualizzazione della favicon dovuti alle limitazioni di Safari sul caricamento dinamico delle favicon.

Attenzione! Utilizzare l'icona globo in alto a destra della sezione per creare il Messaggio dell'Intestazione in diverse lingue utilizzando lo strumento multilingua della piattaforma. Il Titolo della Pagina, invece, può essere aggiunto in una sola lingua.

Personalizzare la pagina di login

Nella sezione Sfondo della Pagina di login, selezionare il tipo di sfondo. Per impostare un colore di sfondo, selezionare il colore usando lo strumento visualizzato sotto l'area di riferimento, o inserire il codice HEX corrispondente.

Per utilizzare un'immagine di sfondo a tutta larghezza, caricarla cliccando Carica la tua immagine. I formati supportati sono JPG e PNG. La risoluzione consigliata per le immagini è di 1280×720 px, e la dimensione massima è 10 MB. Per eliminare l'immagine, cliccare l'icona cestino.

Attenzione! Se si è attivato un catalogo pubblico nella scheda Catalogo corsi del menu Configurazione, si noti che sono disponibili il colore di sfondo e l'immagine di sfondo, mentre il video di sfondo non è disponibile. Se è attivo (o si desidera attivare) un catalogo pubblico in piattaforma, consigliamo di utilizzare un'immagine più piccola, in quanto l'area dedicata all'immagine di background è parzialmente nascosta dall'area del catalogo.

Per caricare un video di sfondo a tutta larghezza, cliccare Carica il tuo video. I formati video supportati sono MP4 e H264. Le specifiche suggerite per il file sono: dimensione consigliata: 1.5 - 2 MB;  bitrate: 500-800 kbps; risoluzione minima: 1280x720 px; dimensione massima: 50MB.

È possibile inserire un'immagine di riserva che verrà visualizzata nel caso in cui il video non sia supportato o non sia caricato correttamente. Per eliminare il video o l'immagine, selezionare l'icona cestino.

Nella sezione Modulo di login, selezionare l'opzione per nascondere il modulo di login standard della piattaforma e mostrare solo i pulsanti di Single Sign On (Gmail, OKTA, LinkedIn, ecc.), sia su desktop che su mobile. L'integrazione SSO deve essere configurata e testata correttamente prima di abilitare questa opzione.

Quando si attiva questa opzione, l’opzione Impedisci agli utenti di modificare la propria password nel menu di Configurazione della piattaforma, scheda Utenti, è abilitata di default, e non può essere disabilitata a meno che non lo sia anche l'opzione Mostra solo i pulsanti SSO e nascondi il modulo di login. Questa configurazione impedisce agli utenti di modificare la propria password in piattaforma (sia su desktop che su mobile), e di perdere la sincronizzazione con la password definita nell’Identity provider.

Personalizzare i colori

La sezione Colori permette di selezionare i colori dei font. Definire i codici HEX nei campi di testo corrispondenti, o selezionare i colori con le ruote dei colori.

Personalizzare i Colori Il codice HEX corretto può essere recuperato in diversi modi. Nel caso in cui non si disponga di software grafici dedicati è possibile utilizzare questo strumento gratuito di selezione dei colori HTML (si apre in una nuova scheda).

Suggerimento per l'accessibilità: Tenere in considerazione l'accessibilità quando si configura l'interfaccia della piattaforma sfruttando i colori accessibili inclusi nel tema predefinito di Docebo Learn.

Stili personalizzati

Per chi ha dimestichezza con la gestione dei CSS, è possibile personalizzare il layout della piattaforma desktop ad alto livello. Utilizzare le aree CSS in questa sezione per personalizzare gli elementi della piattaforma desktop: font, dimensioni, stili, ecc. Identificare l’elemento che si desidera modificare con i relativi attributi. Le aree di testo CSS dispongono di un editor di codice, in modo che sia possibile utilizzare tutte le opzioni messe a disposizione da questo strumento.

Ecco alcuni suggerimenti di personalizzazione:

• Salvare la configurazione in uso in un documento, o in un file, in modo che sia possibile recuperarla facilmente.
• Provare le modifiche nell’inspector del browser prima di applicarle all’ambiente live.
• Mantenere due schede, o due finestre, aperte. Una per modificare il codice in questa area e una in incognito (o in un altro browser) per visualizzare le modifiche.

Inoltre, è possibile personalizzare attraverso i CSS il layout di ogni pagina e widget desktop: ogni pagina e ogni widget della piattaforma sono identificati da un ID univoco nel HTML del CSS, automaticamente assegnato dalla piattaforma.

Attenzione! I CSS personalizzati potrebbero essere impattati da nuovi rilasci. In questo caso, la retrocompatibilità non è garantita.

Personalizzare il player del corso

La sezione Player del corso permette di personalizzare le impostazioni del player per tutti i corsi della piattaforma, ma è possibile definire impostazioni specifiche del player per ogni corso in piattaforma.

Modalità concentrazione

Quest'area permette di configurare l'impostazione di default della modalità concentrazione per il player di tutti i corsi e piani formativi.

Quando la modalità concentrazione è attiva, il player del corso si apre di default a schermo intero, e:

• I widget dei corso sono raggruppati per area e nascosti dal player, ma gli studenti possono sempre accedervi cliccando sul nome del gruppo di widget in fondo alla pagina.
• Quando gli studenti chiudono il player, sono sempre reindirizzati alla pagina in cui hanno avviato il corso, sia che si tratti di una pagina che include il widget Corsi e piani formativi o la pagina I miei corsi e piani formativi.
• Quando il corso include un solo materiale didattico, le impostazioni di visibilità del programma del corso e di navigazione in modalità teatro sono ignorate per massimizzare lo spazio per i contenuti. Ciò significa che il programma non è visualizzato e i pulsanti di navigazione per i materiali didattici riprodotti in modalità teatro sono nascosti.
• La riproduzione automatica del corso si attiva automaticamente.
• Se il corso contiene più materiali didattici, i pulsanti Lezione successiva e Lezione precedente sono mostrati sul lato destro dell'intestazione, facilitando la navigazione tra le lezioni e migliorando l'esperienza di apprendimento. Quando si passa il mouse su questi pulsanti, un tooltip mostra il titolo della lezione successiva.
• Per i corsi all'interno di un piano formativo, la navigazione è dinamica e offre un modo semplice e intuitivo per spostarsi tra i contenuti del corso e tra i altri corsi del piano. Quando gli studenti completano la lezione finale di un corso, il pulsante Lezione successiva cambia in Corso successivo, rendendo più facile la navigazione nel piano formativo.
• La modalità concentrazione è disponibile per i corsi ILT (formazione con istruttore) per aiutare a focalizzare l'attenzione degli studenti sul contenuto più importante: l'evento della sessione successiva. Se gli studenti non sono iscritti a nessuna sessione, possono navigare e iscriversi alle sessioni disponibili senza lasciare la pagina.
• Per i Superadmin, i Power User e gli istruttori, il pulsante di gestione nell'intestazione della pagina del corso è ridotto a un pulsante a forma di ingranaggio senza testo,
• Gli studenti sono informati dei certificati e delle certificazioni rilasciate per il contenuto che stanno visualizzando attraverso il pulsante Traguardi in cima alla pagina del contenuto.

Questa configurazione è ottimale per un'esperienza di apprendimento immersiva e riduce al minimo le distrazioni.

Il comportamento di default della modalità concentrazione può essere modificato a livello di corso (scheda Proprietà > Player) e a livello di piano formativo (scheda Proprietà > Player). L'impostazione della modalità concentrazione scelta a livello di piano formativo è applicata di default a tutti i corsi del piano, sovrascrivendo qualsiasi configurazione a livello di corso al fine di garantire una navigazione coerente.

Visibilità del programma

Da questa sezione è possibile personalizzare la visibilità di default del programma del corso per tutti i corsi, definendo se mostrarlo o nasconderlo quando lo studente accede al corso.

La visibilità del programma del corso può anche essere gestita direttamente dagli studenti utilizzando il pulsante pannello nella pagina del player del corso, utilizzando i pulsanti Mostra il programma del corso - Chiudi il programma del corso nella parte superiore dell'area del programma.

Quando la modalità concentrazione è attiva, il programma del corso è nascosto di default, ma gli studenti possono comunque scegliere di visualizzarlo manualmente.

Navigazione in modalità teatro

Definire se mostrare o nascondere i pulsanti di navigazione per i materiali didattici visualizzati in modalità teatro per tutti i corsi.

Quando si attiva la modalità concentrazione, la configurazione di navigazione in modalità teatro è automaticamente disattivata.

Immagine di sfondo del player

La sezione Immagine di sfondo permette di caricare un'immagine che sarà visualizzata come background del player del corso.

Dopo aver caricato l'immagine, selezionare se adattare l'immagine alla pagina o se mantenere le proporzioni e centrare l'immagine nella pagina del player del corso.

Aspetto del player del corso

Utilizzare quest'area per impostare l'aspetto predefinito del player dei corsi per tutti i corsi: modalità scura o modalità chiara. L'impostazione può essere sovrascritta a livello di corso nelle proprietà del corso. Questa impostazione regola il colore del testo, dell'intestazione del corso e dell'area del programma del corso per tutti gli studenti.

Se sono state configurate regole CSS personalizzate per il player nella sezione CSS per il materiale didattico pagina HTML, queste personalizzazioni prevalgono su questa impostazione.

Di default, il player è visualizzato in modalità scura.

CSS per il materiale didattico pagina HTML

Infine, è possibile aggiungere CSS personalizzati per il materiale didattico pagina HTML.

Copiare ed incollare le proprie classi CSS. Saranno applicate automaticamente a tutti i materiali didattici di tipo pagina HTML.

Personalizzare la pagina di presentazione del corso

Layout dell'intestazione

La sezione Layout dell'intestazionepermette di configurare un'intestazione di default per tutte le pagine dei corsi e dei piani formativi nei cataloghi. È possibile sovrascrivere questa configurazione di default a livello di corso dalla sezione Layout dell'Intestazione della scheda Proprietà del corso, e a livello di piano formativo dalla scheda Dettagli.

Le opzioni disponibili sono:

• Layout a tinta unita: utilizzare un colore a tinta unita per enfatizzare i colori del proprio marchio. Inserire il codice HEX del colore nell'area Codice Colore o selezionare un colore utilizzando la ruota dei colori. Il colore selezionato è sempre ombreggiato di nero.
• Layout Immagine di Copertina: utilizzare un'immagine per l'intestazione del corso ha un forte impatto sulla pagina del corso. Maggiori dettagli sulla gestione delle immagini di intestazione dei corsi.
• Layout pagina essenziale: Selezionare questa opzione per ottenere un layout di intestazione minimale e pulito, senza immagini e colori.

Visualizzazione iniziale e-learning

Utilizzare questa sezione per definire se gli studenti atterreranno direttamente sulla pagina del player o su una pagina introduttiva sul corso prima di accedere al player, per tutti i corsi e-learning. La configurazione di questa opzione può essere modificata a livello di corso dalle proprietà del corso, scheda Player, sezione Visualizzazione iniziale.

La pagina di presentazione è visualizzata prima del player del corso e mostra dettagli relativi al corso e all'iscrizione. Ha lo scopo di aiutare gli studenti a concentrarsi solo sul contenuto del corso quando accedono al player, che sarà l'elemento principale della pagina.

Le informazioni visualizzate dalla pagina di presentazione del corso variano in base alla configurazione del corso e dello stato di iscrizione dello studente. Lo scopo della pagina è quello di fornire maggiori dettagli su cosa aspettarsi dal corso.

I widget del corso sono sempre visualizzati sotto il player del corso e non nella pagina di presentazione, indipendentemente dal fatto che la pagina di presentazione sia attiva o meno.

Consigli d’utilizzo

Seguono alcuni consigli per gli utenti che non sono grafici:

• Seguire il look and feel del proprio sito web ufficiale. Utilizzare il più possibile la stessa struttura e gli stessi colori.
• Renderlo leggibile. Controllare sempre il contrasto testo/sfondo e logo/background. Quando si modifica la dimensione del font, assicurarsi che sia leggibile sui dispositivi utilizzati dagli utenti.
• Meno può significare più. Se non si dispone di linee guida sullo stile, iniziare dai colori del logo.