2

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

3

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.

4

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 l’immagine 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 l’immagine 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 l’immagine, e cliccato Carica File, potrai visualizzare un’anteprima.

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.

5

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 Un’ulteriore personalizzazione della pagina login è attuabile tramite l’utilizzo della funzione Pagine esterne, presente nell’area 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 l’intento 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.

6

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.

7

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 nell’area 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.

8

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