Configurare l’Aspetto e il Branding della Piattaforma

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

Ultimo Aggiornamento

Novembre 13th, 2019

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 Multidomain. 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. La dimensione massima del logo è di 200 MB, tuttavia si consiglia di utilizzare un’immagine della dimensione massima di 1170×350 px 150 dpi, per evitare problemi con il caricamento della pagina e con altre funzionalità come i report. 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 della piattaforma 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 della piattaforma 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.

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