Disclaimer: Alcuni contenuti di questo articolo mostrano dettagli disponibili solo con la nuova pagina del corso. In qualità di Superadmin, è possibile attivare l'anteprima della nuova pagina del corso solo per il proprio utente, testarla e quindi attivarla per tutti gli utenti. Maggiori dettagli sulla transizione alla nuova pagina dei corsi.

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.

Scopri di più su DoceboU

Ulteriori informazioni su come personalizzare l'aspetto della piattaforma? Segui il corso, Configurare l'Aspetto e il Branding della Piattaforma (si apre in una nuova tab) su DoceboU!

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 tab dedicata alla configurazione desktop come default. Scorrere le sezioni della pagina di configurazione per personalizzare il tema a proprio piacimento.

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 tab 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 tab 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, 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 Sing 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, tab 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.

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 tab).

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 tab, 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 è identificato 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.

Pagina di inizio corso

Attenzione! Questa sezione non è disponibile quando è attiva la nuova pagina dei corsi.

In questa sezione, scegliere se attivare a livello globale la pagina di presentazione del corso, per tutti i corsi.

La pagina di presentazione è opzionale per i corsi e-learning, ma obbligatoria per i corsi ILT e VILT, per cui la pagina è visualizzata indipendentemente dall’opzione selezionata in questa sezione. 

Quando la pagina di presentazione è attiva, tutti i widget del corso sono visualizzati in questa pagina, e non sulla pagina del player del corso, mentre il contenuto del corso è visualizzato nella tab Contenuto. Questa configurazione aiuta gli studenti a focalizzarsi sul contenuto del corso, collocando le informazioni aggiuntive in un'altra pagina.

Visualizzazione di default dell'indice

Definire ora la visibilità di default dell'indice, selezionando se mostrarlo o nasconderlo quando gli utenti accedono al corso. 

La visibilità dell'indice è anche gestita direttamente dagli studenti utilizzando il pulsante dedicato nella pagina del player del corso, grazie al quale possono scegliere fra le seguenti opzioni:

• Visibilità completa: l'indice completo è visualizzato a destra del player
• Visibilità ridotta: l'indice è visualizzato sotto il player del corso
• Visibilità compatta: l'indice visualizza solo le icone dei materiali didattici che compongono il corso, a destra del player. Questa modalità di visualizzazione non è disponibile quando i materiali didattici sono organizzati in cartelle, o quando il loro contenuto include contenuto multi-capitolo.

Immagine di sfondo

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.

Modalità lightbox

Definire se attivare i pulsanti di navigazione per i materiali didattici visualizzati in modalità Lightbox.

Questa opzione può essere definita anche localmente, a livello di corso, nell'area di Configurazione.

Aspetto del player del corso

Attenzione! Questa sezione è disponibile solo quando è attiva la nuova pagina dei corsi.

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 del corso è 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

Attenzione! Questa sezione è disponibile solo quando è attiva la nuova pagina dei corsi.

Layout dell'intestazione

La sezione Layout dell'intestazione permette 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 tab Proprietà del corso e a livello di piano formativo dalla tab 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.

E-learning starting view (Visualizzazione iniziale e-learning)

Utilizzare questa sezione per definire se gli studenti atterreranno direttamente sulla pagina del player del corso o su una pagina introduttiva di presentazione del 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.