Disclaimer: alcuni contenuti di questo articolo spiegano come utilizzare funzionalità che potrebbero non essere disponibili per tutti i piani. Per aggiornare il piano, contattare il proprio account manager (se il piano include questa opzione) o Docebo utilizzando il Centro assistenza della piattaforma.
Introduzione
Le pagine widget personalizzate sono completamente configurabili e permettono di creare i layout delle pagine da zero o utilizzare dei template predefiniti.
Ogni pagina creata è automaticamente disponibile per desktop e per mobile. È possibile definire un massimo di 1000 pagine e 200 menu, incluse le pagine integrate e il menu di default.
Creare pagine widget personalizzate
Per creare una pagina widget, accedere al Menu amministrazione e cliccare Gestione pagine dalla sezione Impostazioni. Premere quindi il pulsante più in alto a destra. Nel pannello a scomparsa Nuova Pagina Personalizzata, selezionare l’opzione Pagina widget personalizzata e premere Avanti. Nella scheda Dettagli, definire il nome della pagina e, opzionalmente il codice e la descrizione. Premere Avanti per procedere con la configurazione della pagina.
Nella scheda Modello, selezionare un template dall’elenco per utilizzare il layout di una pagina predefinita o selezionare l’opzione Pagina vuota per disegnare la pagina da zero. Premere quindi Crea e modifica per accedere alla configurazione della pagina.
Utilizzare la barra in fondo alla pagina per definire lo stato della pagina. Le pagine sono sempre create come pubblicate. Se si annulla la pubblicazione della pagina, non sarà visibile nei menu, anche se assegnati agli utenti. La barra di pubblicazione è sempre visibile in fondo alla pagina.
Nella scheda Proprietà è possibile modificare i dettagli della pagina inseriti al momento della creazione. Selezionare l’icona da associare alla pagina cliccando sull’icona esistente e selezionandone un’altra dal pannello di destra. È possibile cercare l’icona per nome, ma la ricerca funziona solo in inglese. L’icona sarà visualizzata prima del nome della pagina all’interno del menu. Selezionare l’icona dal pannello a scomparsa e premere Conferma.
Nella sezione Pulsanti aggiuntivi per la pagina, selezionare se visualizzare i pulsanti Condividi Contenuti e Chiedi all’esperto nell’angolo in alto a destra della pagina. Se visualizzati, gli utenti potranno caricare contributi o porre domande agli esperti direttamente dalla pagina, utilizzando i rispettivi pulsanti. Queste opzioni sono disponibili solo se il modulo Discover, Coach and Share è attivo in piattaforma.
Se la pagina include il Widget cataloghi, è possibile abilitare il pulsante Condividi questa visualizzazione in modo che gli utenti possano utilizzarlo per copiare il link della pagina nel proprio clipboard e condividere con altri utenti i risultati filtrati della ricerca all’interno del catalogo. Ulteriori informazioni sulla condivisione dei deeplink delle pagine filtrate e sulla configurazione del widget Cataloghi.
Attenzione: l'opzione per mostrare il pulsante Condividi questa visualizzazione disponibile nella sezione Pulsanti Aggiuntivi per la Pagina è solo per le pagine desktop, non è invece supportato nelle pagine mobile. Ciò significa che nell'app mobile il bottone per condividere la pagina non è disponibile, ma si noti che il link condiviso tramite questo bottone può essere aperto e visualizzato anche dall'app mobile.
Premere Salva le modifiche per completare la creazione della pagina e visualizzare il layout nel Composer.
Le pagine create nella scheda Composer sono automaticamente create anche nella scheda Layout mobile, ma solo se almeno uno dei widget che compongono la pagina è disponibile anche per mobile.
Definire il layout della pagina
La scheda Composer mostra il layout della pagina widget, in base al template selezionato. I template permettono di disegnare velocemente le pagine widget, offrendo comunque la possibilità di modificarne la struttura in base alle proprie esigenze. Selezionando l’opzione Pagina Vuota durante il processo di creazione della pagina, il Composer sarà vuoto, in modo che sia possibile disegnare la pagina da zero.
Ogni pagina è composta da una o più righe orizzontali. Una riga è un’area della pagina divisa in colonne, da una a tre. Le colonne sono contenitori di widget. Quando si lavora con i template, le righe sono automaticamente configurate con i widget necessari allo scopo del template, ma è comunque possibile modificarle, o aggiungerne altre.
Premere il pulsante più per aggiungere una nuova riga nella pagina. Selezionare il layout della riga nel pannello a scomparsa, quindi premere Crea. È possibile modificare il layout della riga in qualsiasi momento selezionando l’icona menu alla fine della riga e selezionando l’opzione Modifica il layout della riga. Selezionare l'opzione di layout più adatta dal pannello a scomparsa, quindi premere il pulsante Cambia il layout per confermare.
Riducendo il layout ad una dimensione inferiore (ad esempio, passando da 1/3 – Layout riga a tre colonne a 1/2 – Layout riga a due colonne), i widget della colonna eliminata saranno spostati nella colonna rimanente più a destra. Per spostare le righe nella pagina, passare il mouse sull'intestazione della riga finché non è visualizzata l’icona a croce. Cliccare e trascinare la riga, spostandola dove si desidera posizionarla.
Dimensione dei widget
Lo schema che segue rappresenta la larghezza delle colonne espressa in pixel in una finestra del browser con zoom al 100%. Quando si utilizzano schermi più piccoli (con larghezza inferiore a 1400 pixel), le dimensioni delle colonne devono essere ridotte.
Utilizzare lo schema come supporto alla creazione di immagini e immagini di background per i widget con proporzioni corrette.
È buona norma raddoppiare la larghezza di ogni immagine o immagine di background. Per esempio, la larghezza standard di un di un widget in una riga a tre colonne (1/3) è di 444 px, questo significa che la larghezza dell'immagine dovrà essere di 888 px. Questo accorgimento permette di evitare che l'immagine sia sfuocata sui display retina.
Numero di widget per pagina
Il numero massimo di widget consentiti per pagina (sia desktop che mobile) dipende dal tipo di widget che si desidera inserire nella pagina. Alcuni widget, chiamati widget dinamici, hanno un impatto elevato sul caricamento della pagina poiché il loro contenuto si aggiorna in continuazione. Inserire molti widget dinamici in una sola pagina può rallentare le performance di caricamento della pagina. Altri widget, chiamati widget statici, hanno poco impatto sulle performance di caricamento della pagina, poiché il loro contenuto non cambia mai, ed è quindi possibile inserire più widget di questo tipo in una pagina.
Ecco l’elenco dei widget disponibili, divisi fra dinamici e statici:
| Nome del widget | Dinamico | Statico |
| Panoramica delle attività | x | |
| Flusso delle attività | x | |
| Cataloghi | x | |
| Canali | x | |
| Corsi e piani formativi | x | |
| Finestra per contenuti personalizzati | x | |
| Video | x | |
| Gamification | x | |
| HTML / WYSIWYG | x | |
| Iframe | x | |
| Immagine | x | |
| Il mio calendario | x | |
| I miei KPI | x | |
| Il mio profilo | x | |
| Le mie transazioni | x | |
| Domande e eisposte | x | |
| Codici di iscrizione | x | |
| Elenco dei task | x |
Il numero massimo di widget consentiti per pagina è 20, ma il numero di widget dinamici non può essere superiore a 10. Per esempio, una pagina può includere 10 widget dinamici e 10 widget statici, o 5 widget dinamici e 15 widget statici, o 20 widget statici.
Per mobile, i widget dinamici sono consentiti solo tra i primi 10 widget della pagina, dall'undicesimo widget in poi il tipo di widget deve necessariamente essere statico. Si noti inoltre che, per mobile, il widget HTML/WYSIWYG è considerato dinamico.
Quando si raggiunge il numero massimo di widget dinamici in una pagina, se si prova ad aggiungere un altro widget, il pannello di destra per la creazione dei widget elencherà solo widget statici.
Duplicare una riga
Il layout di una riga può essere duplicato per velocizzare la configurazione della pagina widget. Per duplicare il layout della riga, premere l’icona menu alla fine della riga e selezionare l’opzione Duplica layout riga. La nuova riga sarà disegnata sotto la riga selezionata con lo stesso layout, ma senza widget all’interno.
Eliminare una riga
Per cancellare una riga, premere l’icona menu alla fine della riga e selezionare l’opzione Elimina riga. Premere Conferma e cancella per confermare l’operazione. Attenzione, tutti i widget configurati nella riga saranno cancellati, ed è obbligatorio che la pagina contenga almeno una riga. Non è consentito cancellare una riga, quando è l’unica nella pagina.
Aggiungere widget alle righe
Per aggiungere un widget ad una riga, premere il pulsante più trasparente e selezionare il widget dal pannello a scomparsa Aggiungi un nuovo widget. I widget possono avere layout diversi, in base alla dimensione dell’area in cui sono posizionati.
Quando si seleziona un widget dall’elenco, la sua anteprima è visualizzata nel pannello di destra, per visualizzare l’aspetto che avrà nella pagina. Ricorda che alcuni widget disponibili per desktop non sono disponibili per mobile. L’icona cellulare nell’area del widget permetterà di identificari i widget disponibili per mobile.
Per modificare la configurazione di un widget, premere l’icona menu in alto a destra nell’area del widget, quindi selezionare Modifica. La configurazione cambia in base al widget, fare riferimento all’articolo sui widget disponibili per ulteriori informazioni.
Spostare i widget e definire la dimensione dei widget
Per spostare i widget nella pagina, passare il mouse nell’area del widget finché non appare l’icona croce. Cliccare sul widget e trascinarlo in un’altra colonna della stessa riga, o di qualsiasi altra riga della pagina. Attenzione, i widget con scroll infinito devono essere posizionati nella parte inferiore della pagina, in modo che non ci siano altri widget al di sotto, in quanto potrebbero non essere mai visualizzati. Premere Salva le modifiche per terminare.
Utilizzare il composer layout per mobile
Quando si definisce il layout di una pagina desktop utilizzando il Composer, la piattaforma disegnerà automaticamente anche il layout per la stessa pagina per mobile, nella scheda Layout Mobile, ma solo se la pagina desktop include almeno un widget disponibile per mobile. Poiché alcuni widget disponibili per desktop non sono disponibili per mobile, le pagine mobile includeranno solo i widget supportati.
I widget attualmente disponibili per mobile sono:
- Panoramica delle attività
- Flusso delle attività
- Canali
- Cataloghi
- Finestra per contenuti personalizzati (nella resa del widget nell'app mobile Go.Learn, la larghezza viene adattata alla larghezza dello schermo, e l'altezza viene applicata riempiendo la finestra con l'immagine, ritagliandola se necessario)
- Video
- Gamification
- HTML/WYSIWYG (consigliamo di utilizzare l’editor WYSIWYG per le pagine mobile, Docebo non può garantire l’output del widget quando si utilizza l’editor HTML)
- Immagine
- Il mio calendario
- Corsi e piani formativi
- Il mio profilo
- Domande e risposte
- Elenco dei task
I widget disponibili per mobile sono identificati dall'icona cellulare nell’area del widget nel composer. Una volta terminata la pagina, spostarsi all’area Layout mobile per visualizzare il layout della pagina mobile. Le pagine mobile sono composte da una sola colonna, e i widget sono ordinati secondo l’ordine con cui sono visualizzati nella pagina desktop, partendo dalla prima colonna a sinistra, dall’alto in basso, quindi spostandosi alle altre colonne.
L’ordine dei widget delle pagine mobile non può essere modificato, ma è possibile nascondere i widget non necessari cliccando sull’icona occhio. Cliccare di nuovo sull’icona occhio per renderli nuovamente visibili.
Utilizzare i template per le pagine widget
Se si seleziona uno dei template disponibili in piattaforma per creare una pagina widget, il Composer caricherà il set di widget in linea con lo scopo del template:
- Dashboard informal training. Questo template include i widget Flusso delle attività, Corsi e piani formativi e Il mio calendario.
- Dashboard training formale. Questo template include i widget Cataloghi, Il mio profilo, Corsi e piani formativi, Panoramica corsi e piani formativi e Il mio calendario.
- Flusso formazione formale. Questo template include i widget relativi ai canali.
- Dashboard offerta corsi. Questo template include i widget Il mio calendario, Il mio profilo, Corsi e piani formativi e Cataloghi.
I widget dei template sono configurati con le impostazioni di default (titolo, opzioni e timeframe). Le opzioni sono visualizzate nell’area del widget nel template.
Attenzione, i template non sono strutture fisse. È possibile modificare le impostazioni del widget, la dimensione e la posizione nella pagina. È inoltre possibile aggiungere altri widget nella pagina, o eliminare quelli esistenti seguendo gli step descritti nelle altre sezioni di questo articolo.
Configure i widget via CSS
Per chi ha dimestichezza con la gestione dei CSS, è possibile personalizzare i widget che compongono le pagine widget in base alle proprie necessità attraverso i CSS. Tutti i widget disponibili nelle pagine widget sono identificati da un ID univoco nell’HTML del CSS, assegnato automaticamente dalla piattaforma al momento della creazione del widget stesso, con il formato che segue:
#doc-widget-{widget_id}
Il valore {widget_id} è uno shortcode numerico.
Grazie all’ID univoco delle pagine e dei widget, è possibile personalizzare anche le pagine desktop della piattaforma via CSS. Ulteriori dettagli riguardo alla personalizzazione del layout della piattaforma via CSS.
Anteprima della pagina
La funzionalità di anteprima della pagina permette di visualizzare l’aspetto che le pagine desktop avranno per gli utenti. Accedere all’anteprima della pagina dalla scheda Anteprima desktop, dopo aver configurato la pagina con il Composer. Per rendere la pagina più realistica, i widget della scheda Anteprima sono popolati con dei dati di esempio.
L’anteprima è disponibile solo per le pagine desktop. Le pagine mobile sono aggiornate in tempo reale premendo Salva le modifiche nella barra di pubblicazione. Consigliamo di testare le pagine mobile prima di distribuirle, creando un menu di prova assegnato ad un utente di prova.
Suggerimenti
Puoi collegare con un link altre pagine all'interno di bottoni widget con il loro URL specifico. Se la pagina che vuoi collegare non è presente nel menu caricato, puoi comunque collegarla tramite link inserendola in un altro menu con la stessa visibilità del menu utente (o completa visibilità) e posto in fondo alla lista, in modo che non venga caricato prima di altri menu.