Configurare l’Aspetto e il Branding della Piattaforma

Definire l’aspetto e il branding della piattaforma utilizzando i temi

Ultimo Aggiornamento

Luglio 26th, 2019

Tempo di Lettura

7 min

Livello Utente

Introduzione e Preavviso di Dismissione

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. Questi elementi possono essere configurati a livello globale, o per i singoli domini dei clienti Multidomain. Includono l’header e i footer, CSS personalizzati, i pulsanti visualizzati nella pagina di login, e molto altro.

Se la piattaforma è stata attivata dopo il 2 Ottobre 2018, è possibile personalizzarne alcuni elementi (il tema 7.0 di Docebo). Si tratta del tema più recente di Docebo, che offre agli studenti la possibilità di utilizzare l’interfaccia e le funzionalità più aggiornate. Se la piattaforma è stata attivata prima del 2 Ottobre 2018, è possibile selezionare il tema 6.9 o il tema 7.0, ma consigliamo vivamente di utilizzare il tema 7.0.

Attenzione: Il tema 6.9 sarà dismesso nel prossimo futuro. Se si sta utilizzando questo tema, consigliamo vivamente di iniziare a migrare al tema 7.0, che offre un’interfaccia e delle funzionalità più aggiornate, per una migliore esperienza formativa in piattaforma. Contattare il proprio Customer Success Manager o l’Help Desk dal Centro Comunicazioni della piattaforma in caso di domande riguardo la migrazione. A breve sarà disponibile una guida dedicata.

Attenzione: in caso di passaggio dal tema 6.9 al tema 7.0, non sarà possibile tornare al tema 6.9. È possibile utilizzare la modalità Anteprima per visualizzare il tema 7.0 prima di attivarlo.

Questo articolo ha lo scopo di descrivere come configurare gli elementi del tema 7.0.

Accedere alla Configurazione dell’Aspetto

Se la piattaforma è stata attivata il o dopo il 16 Ottobre 2018

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 Configurazione del Tema.

Se la piattaforma è stata attivata prima del 16 Ottobre 2018

Per raggiungere l’area dei temi della piattaforma, accedere al Menu Amministrazione dall’icona ingranaggio in alto a destra, e premere Gestione Temi nella parte superiore della piattaforma. Questa pagina mostra due temi: Docebo 6.9 e Docebo 7.0. Il tema Docebo 6.9 è la vecchia interfaccia, mentre il tema Docebo 7.0 è l’interfaccia rilasciata con Docebo 7.0 e rilasci successivi.

Per attivare un tema, premere il pulsante Attiva nella card del tema. La sezione Gestione Temi non sarà visualizzata se il tema 7.0 è già attivo in piattaforma. Per personalizzare un tema, premere l’icona ingranaggio nella card del tema. Le configurazioni eseguite ad un tema saranno applicate solo se il tema è quello attivo della piattaforma. Scorrere le sezioni della pagina di configurazione per personalizzare il tema a proprio piacimento.

Personalizzare l’Header

La sezione Header permette di personalizzare il titolo, il logo, il messaggio di intestazione e il favicon dell’LMS. È 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. Fare riferimento a questo articolo per ulteriori informazioni sull’utilizzo di questo strumento.

Iniziare definendo il Titolo della Pagina nel campo di testo dedicato. Il titolo è visualizzato nel tab del browser e nella barra in alto della homepage dell’LMS. 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.

aspetto e branding header

Nella sezione Logo, selezionare Clicca qui per scegliere un file per caricare un’immagine. La dimensione massima del logo è di 200 MB. 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 16×16 dal proprio dispositivo.

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 Pagina di Login, definire se visualizzare il modulo di login o la pagina dei corsi pubblici. La sezione Sfondo della Pagina di Login, permette di 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. La dimensione minima consigliata per le immagini è di 1280×720 px. Per eliminare l’immagine, cliccare l’icona cestino rosso.

Per caricare un video di sfondo, cliccare Carica il tuo video. I formati video supportati sono MP4 e H264. La dimensione consigliata è da 1,5 a 2 MB, il bitrate da 500 a 800 kbps, la risoluzione 1280 × 720 px (minimo). È 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 rosso.

Nella sezione Modulo di Accesso, selezionare l’opzione per nascondere il modulo di login standard dell’LMS e mostrare solo i pulsanti di SSO (Gmail, OKTA, LindedIn, ecc.). L’integrazione SSO deve essere configurata e testata correttamente prima di abilitare questa opzione.

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 sito web.

Stili Personalizzati

Chi ha conoscenze di base di CSS può personalizzare il layout dell’LMS ad alto livello. Grazie ai campi di testo CSS di questa sezione è possibile personalizzare ogni elemento della piattaforma: font, dimensioni, stile, ecc. Indicare l’elemento da modificare e i relativi attributi. Gli utenti del tema 7.0 possono accedere al CSS personalizzati sia dal tema 6.9 che dal tema 7.0 senza attivare il tema 6.9 per modificare i CSS 6.9. Utilizzare il link disponibile in alto a destra dei campi di testo per visualizzare le differenze fra l’interfaccia con tema 6.9 e l’interfaccia con tema 7.0.

Configurazione Aspetto e Branding stili

È possibile utilizzare quest’area per avere pieno accesso ai CSS della piattaforma. Leggere le seguenti linee guida prima di iniziare:

  • Salvare la configurazione corrente in un documento o in un file, in modo che sia semplice recuperarla in caso di bisogno;
  • Testare le modifiche nell’inspector del browser prima di applicarle sull’ambiente in uso;
  • Mantenere due tab o due finestra aperte, una per inserire le proprie modifiche e l’altra per visualizzare le modifiche in modalità incognito o con un altro browser.

Attenzione: I CSS personalizzati potrebbero essere soggetti a nuovi rilasci. In questo caso, la retrocompatibilità non è garantita.

Personalizzare il Player del Corso

La sezione Player del Corso permette di personalizzare le impostazioni globali del player dei corsi. Tutte le impostazioni configurate in questa sezione l’opzione predefinita per tutti i corsi, ma è possibile definire specifiche impostazioni per i singoli corsi nel menu Configurazione o durante la modifica dei materiale di formazione.

Nella prima sezione, scegliere se attivare a livello globale la Pagina di Presentazione del corso, per tutti i corsi. E’ possibile definire la Pagina di Presentazione per tutti e tre i tipi di corsi: E-Learning, ILT e Webinar; la pagina è facoltativa per i corsi di E-learning, ma obbligatoria per i corsi in aula/ILT e per i Webinar. La Pagina di Presentazione sarà quindi visualizzata per i corsi in aula/ILT e per i Webinar, indipendentemente dalla scelta operata in questa sezione.

aspetto e branding player del corso

Definire se l’indice è visualizzato di default quando gli utenti accedono alla pagina del player. L’indice può essere gestito direttamente dall’utente con il tasto del pannello sulla pagina 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.

Definire se attivare i pulsanti di navigazione per i materiali didattici visualizzati in modalità Lightbox. Questa modalità si applica solo al tema 7.0. Questa opzione può essere definita anche localmente, a livello di corso, nell’area di Configurazione.

Infine, è possibile aggiungere CSS personalizzati per la pagina HTML dei materiali didattici. In questa sezione, è possible copiare ed incollare le proprie classi CSS. Saranno applicate automaticamente a tutte le pagine HTML dei materiali didattici.

Personalizzare le Schede

La sezione Schede permette di selezionare la dimensione delle thumbnail dei contributi e dei corsi. Per chi utilizza la nuova interfaccia di Docebo (tema 7.0), la dimensione di default delle thumbnail sarà rettangolare.

aspetto e branding schede

Attenzione: le thumbnail quadrate vengono utilizzate solo per i cataloghi e per la pagina I Miei Corsi e Piani Formativi. Di conseguenza, ci saranno thumbnail quadrate soltanto in queste pagine della piattaforma, mentre in tutte le altre pagine della piattaforma ci saranno thumbnail rettangolari. Tenere presente che l’opzione che consente di selezionare thumbnail quadrate verrà rimossa nella stessa data fissata per la Fine Vita del tema 6.9, fissata per il mese di luglio 2019. Se si stanno utilizzando thumbnail quadrate, si consiglia di iniziare a modificarle nelle versioni rettangolari.

Anteprima dei Temi

È possibile visualizzare un’anteprima del tema 7.0 di Docebo prima di attivarlo in piattaforma. Premere Anteprima nella scheda del tema nella pagina Gestione Temi. L’anteprima permette di visualizzare il tema in anteprima in piattaforma. Gli altri utenti continueranno a visualizzare il tema correntemente selezionato, e non il tema in anteprima.

La barra di anteprima in cima alla pagina consente di uscire dalla modalità di anteprima o di applicare il tema alla piattaforma. Una volta attivato il tema, tutti gli utenti in piattaforma visualizzeranno la nuova interfaccia.

Linee Guida e Consigli

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.

– Visualizzare l’anteprima del tema prima di pubblicarlo. Controllare il risultato finale, chiedendo ad altre persone dell’azienda un parere sull’esperienza formativa in base alle modifiche.