Come brandizzare la tua Piattaforma E-Learning Docebo

La gestione della grafica ______________________________________________________________ 3 Carica un nuovo Logo _________________________________________________________________ 4 Modifica la pagina di login: immagine e layout ____________________________________________ 4 Inserisci pagine esterne _______________________________________________________________ 5 Guarda il risultato finale ______________________________________________________________ 6 Personalizza i CSS ____________________________________________________________________ 7

La gestione della grafica

Docebo ti consente di personalizzare il layout della tua piattaforma E-Learning in maniera semplice. Tramite il pannello gestione grafica, potrai modificare logo, immagine centrale e layout della pagina di login. In questa breve guida simuliamo la personalizzazione dell'aspetto della piattaforma in funzione di un progetto di formazione del personale medico. Abbiamo quindi creato un logo adatto allo scopo ed abbiamo scelto un'immagine centrale che ben rappresenti il nostro target di riferimento. Il metodo pi semplice per accedere al pannello gestione grafica utilizzando la versione semplificata della piattaforma.

Carica un nuovo Logo

Oltre a caricare un logo da te scelto, cliccando il pulsante Scegli file, potrai modificare il titolo della pagina, che apparir come titolo del Browser. Dopo aver caricato limmagine da utilizzare come logo (ricorda, deve essere massimo 200 mb), clicca Salva Modifiche. Ora, il logo apparir in alto a sinistra della tua piattaforma Docebo. Utilizza il logo della tua azienda o uno creato appositamente per il progetto formativo che vuoi portare avanti. Scegli un logo che sia esemplificativo e rappresentativo e che possa restare impresso nella mente di chi lo vede.

Modifica la pagina di login: immagine e layout

Dopo aver aggiunto il tuo logo, puoi passare a personalizzare limmagine della pagina login, scegliendo una di quelle proposte o caricandone una ad hoc, che anche in questo caso dovr avere una grandezza massima di 200 mb. Il formato consigliato 900px x 372px. Una volta caricata limmagine, e cliccato Carica File, potrai visualizzare unanteprima.

Ti viene data la possibilit di modificare la disposizione degli elementi che compongono la homepage. Si tratta di stabilire dove meglio collocare i due box per inserire username e password ed il testo che accompagna l'immagine principale. In pi, hai la possibilit di attribuire un titolo e una descrizione alla tua piattaforma, che potranno essere tradotti in varie lingue. Puoi scegliere tra tre diverse tipologie di layout per la pagina di login: Campi di login a lato; Campi di login in alto; Campi di login a fondo pagina.

Il testo si dispone diversamente a seconda della scelta effettuata. Nell'immagine in alto a destra abbiamo scelto il layout con campi di login a lato ed il testo conseguentemente stato disposto in un box grigio semitrasparente. Dopo aver completato la personalizzazione del layout della pagina di login, clicca il bottone Salva Modifiche.

Inserisci pagine esterne

Unulteriore personalizzazione della pagina login attuabile tramite lutilizzo della funzione Pagine esterne, presente nellarea Ammistrazione, tra le Impostazioni. Con Pagine estene possibile creare un set di pagine linkate direttamente in homepage che possono ospitare link, video, testi e foto. Le pagine esterne possano comunicare lintento della tua piattaforma E-Learning o fornire degli approfondimenti. Per aggiungere una pagina esterna, seleziona Aggiungi, utilizza l'editor di test per inserire il nome della pagina e tutti gli elementi che vuoi visualizzare e clicca Salva Modifiche. Per rendere visibile una pagina esterna necessario attivarla cliccando il flag (che diventer verde). Inoltre, qualora fossero state inserite pi pagine esterne, possibile stabilirne un ordine utilizzando le freccie nel menu a destra.

Guarda il risultato finale

Come vedi abbiamo inserito un logo in alto a sinistra, un testo di presentazione a destra vicino ai campi di login, due pagine esterne che sono presenti nella barra sotto l'immagine centrale ed abbiamo anche personalizzato una di queste pagine inserendo un testo, un indirizzo email ed una piccola immagine.

Personalizza i CSS
Se possiedi una conoscenza basica del linguaggio di programmazione, la piattaforma ti permette di gestire ulteriormente la grafica attraverso il modulo per la personalizzazione degli stili CSS (Cascading Style Sheets). Accedi al modulo dei CSS selezionando Gestisci Grafica Personalizza i CSS

Per cambiare dimensione, carattere o formattazione di uno degli stili di piattaforma, digita il codice relativo alla modifica che intendi implementare nellarea di testo. Per rimuovere, ad esempio, la voce Powered by Docebo @ Cloud presente in basso a destra dello schermo, inserisci nella finestra di testo il codice: .footer .powered by {display:none}

Salva le modifiche per completare la procedura.

Il modulo di personalizzazione dei CSS permette inoltre di: Nascondere la barra contente i suggerimenti per la gestione della piattaforma .navbar-inner {height:53px;} Cambiare la dimensione della barra con i menu (Principale, E-Learning, etc.) .navbar .nav {font-size:15px;} Cambiare la dimensione del carattere nella barra con i menu .navbar .nav {font-size:15px;} Cambiare la dimensione della barra con i suggerimenti .footer .span12 {height:50px;} Per annullare una modifica effettuata ai CSS non devi far altro che cancellare il testo inserito e salvare le modifiche. Gli esempi mostrati sono solo una parte delle possibilit offerte dai fogli di stile che, con una minima padronanza del linguaggio di programmazione, ti permettono una consistente personalizzazione delle piattaforme Docebo.

www.docebo.com