Creare e Gestire le Pagine Widget

Comporre pagine widget personalizzate per gli utenti di Docebo

Ultimo Aggiornamento

Novembre 12th, 2019

Tempo di Lettura

6 min

Livello Utente

Introduzione

Le pagine Widget Personalizzate sono completamente configurabili e permettono di creare i layout delle pagine configurandolo completamente o utilizzando 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 built-in e il menu di default.

Questa funzionalità è disponibile per i clienti del piano Enterprise e del piano Growth.

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. Nel tab Dettagli, definire il nome della pagina e, opzionalmente il codice e la descrizione. Premere Avanti per procedere con la configurazione della pagina.

Nella tab 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 tab Impostazioni è possibile modificare i dettagli della pagina inseriti al momento della creazione. Selezionare l’icona da associare alla pagina. 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 Contribuisci 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 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 condividere con altri utenti i risultati filtrati della ricerca all’interno del catalogo. Fare riferimento all’articolo sulle Opzioni di Filtro Avanzate per ulteriori informazioni sulla condivisione dei deeplink delle pagine filtrate.

Attenzione: i pulsanti Chiedi all’Esperto e Condividi Questa Visualizzazione sono disponibili solo per le pagine desktop, non sono supportati per mobile. 

Premere Salva le Modifiche per completare la creazione della pagina e visualizzare il layout nel Composer.

Le pagine create nella tab Composer sono automaticamente create anche nella tab Layout Mobile, ma solo se almeno uno dei widget che compone la pagina è disponibile anche per mobile.

Definire il Layout della Pagina

La tab 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, fino ad un massimo di tre. Le colonne sono i contenitori dei widget, ogni pagina può includere al massimo 10 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. E’ 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.

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 sulla header della riga finché non è visualizzata l’icona a croce. Cliccare e trascinare la riga, spostandola dove si desidera posizionarla.

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 il layout della riga. La nuova riga sarà disegnata sotto la riga selezionata con lo stesso layout, ma senza widget all’interno.

Cancellare una Riga

Per cancellare una riga, premere l’icona menu alla fine della riga e selezionare l’opzione Cancella 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 i 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 il Widget. 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 Modifiche per terminare.

Utilizzare il Composer Layout 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 tab 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:

  • I Miei Corsi e Piani Formativi
  • Canali
  • Cataloghi
  • Finestra Contenuto Personalizzato
  • Video
  • Immagine
  • 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)

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.

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 cliccando Anteprima Desktop in alto a destra, dopo aver configurato la pagina con il Composer. Per rendere la pagina più realistica, i widget della tab 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 Modifiche nella barra di pubblicazione. Consigliamo di testare le pagine mobile prima di distribuirle, creando un menu di test assegnato ad un utente di test.