Configurare l’Aspetto e il Branding della Piattaforma

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

Ultimo Aggiornamento

23 Luglio 2020

Modulo Docebo

Learn

Tempo di Lettura

5 min

Livello Utente

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’header 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. Fare riferimento a questo articolo per la configurazione mobile.

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

La sezione Header 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. 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 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.

aspetto e branding header

Nella sezione Logo, selezionare Clicca qui per scegliere un file 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 and 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 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. 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 eliminare l’immagine, cliccare l’icona cestino.

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 della piattaforma e mostrare solo i pulsanti di SSO (Gmail, OKTA, LindedIn, ecc.), sia su desktop e su mobile. 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

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 moso che sia possibile recuperarla facilmente
  • Prova le modifiche nell’inspector del browser prima di applicarle all’ambiente live
  • Mantieni 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 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 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.

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.