I widget di Adobe Muse consentono di aggiungere al sito funzioni interattive e contenuti generati dinamicamente. I widget sono oggetti precostruiti configurabili che offrono funzionalità comuni per il Web come menu, moduli, presentazioni e così via. Adobe Muse offre diversi widget che facilitano la progettazione di soluzioni Web complesse.

I widget di Adobe Muse possono essere formattati in modo da adattarsi perfettamente alla struttura del sito, in sintonia con gli altri elementi delle pagine Web. La libreria di widget contiene tutte le funzioni predefinite (widget) del sito che potete trascinare sulle pagine e configurare per controllarne il comportamento e l’aspetto.

Adobe Muse offre i seguenti tipi di widget:

• Widget per composizioni: questi widget permettono di interagire con un’area della pagina Web per modificare il contenuto visualizzato in un’altra area. La modifica è accompagnata da un’animazione di dissolvenza o scorrimento. 
• Widget per moduli: consentono di aggiungere un modulo che i visitatori del sito possono utilizzare per contattarvi. A seconda del widget per moduli scelto, sono disponibili diversi campi.
  
• Widget per menu: consentono di creare una barra di menu compilata in modo dinamico o manuale che include stati per ciascuna voce di menu. Su ciascuna pagina, il collegamento del menu viene automaticamente impostato sullo stato “Attivo” per indicare che si tratta della pagina corrente.
• Widget per pannelli: consentono di mostrare un solo pannello di contenuti alla volta, con collegamenti di navigazione intuitivi per passare a un altro pannello. Potete scegliere tra pannello a soffietto con scorrimento animato oppure il più comune pannello a schede.
• Widget per presentazioni: questi widget consentono di visualizzare facilmente le immagini in una galleria con animazioni fluide. Sono particolarmente indicati per presentazioni semplici basate su immagini; per applicazioni più complesse si consiglia di ricorrere invece ai widget per composizioni.
• Widget social: i widget social consentono di configurare facilmente il codice HTML personalizzato e di incorporarlo nelle pagine Adobe Muse. La maggior parte dei widget per il Web forniscono funzionalità che sono disponibili anche tramite l’incorporazione di codice HTML da siti Web di terze parti. Per risparmiare tempo, invece di generare il codice esternamente all’applicazione e di incollarlo in Adobe Muse come HTML incorporato, potete aggiungere e configurare i contenuti Web direttamente in Adobe Muse.

Aggiungere un widget su una pagina Web di Adobe Muse

Potete scegliere e aggiungere i widget a una pagina Web di Adobe Muse dalla libreria dei widget. Per aggiungere un widget, effettuate le seguenti operazioni:

Configurare e personalizzare i widget

Per configurare i widget inseriti nelle pagine Web, è possibile utilizzare il pannello Opzioni di Adobe Muse. Il pannello Opzioni è un pannello contestuale che consente di applicare modifiche e aggiornare le impostazioni specifiche per il widget in questione. Il pannello Opzioni contiene impostazioni che consentono di determinare l’aspetto del contenuto.

Le opzioni Traccia e Riempimento consentono di migliorare notevolmente l’aspetto di un widget. Se il widget contiene del testo, potete usare il pannello Testo (Finestra > Testo) oppure le opzioni di testo nel pannello di controllo per modificare e formattare il testo in base alle esigenze del progetto.

Per configurare un widget, effettuate le seguenti operazioni:

Selezionare elementi nidificati all’interno di un widget

Quando trascinate un widget dalla libreria a una pagina, viene di fatto inserito un set di contenitori nidificati. Questi contenitori possono essere selezionati e modificati in base alla loro gerarchia.

Quando si utilizzano i widget, è importante comprendere come selezionare il widget e i relativi contenitori. Adobe Muse visualizza la selezione corrente mediante l’indicatore di selezione. Questo si trova nell’angolo in alto a sinistra in Adobe Muse e presenta la selezione corrente e un menu a discesa che permette di ottenere un’anteprima dell’oggetto in base al suo stato.

Negli esempi di seguito, l’indicatore di selezione presenta la selezione della pagina (quando sulla pagina Web non è selezionato alcun elemento), di un widget per menu (quando è selezionato un widget per menu) e di una voce di menu (contenitore all’interno di un widget per menu).

Quando fate clic una volta sull’intero widget, l’indicatore di selezione presenta la parola “Widget”. Se fate di nuovo clic, potete selezionare un contenitore nel widget e l’indicatore della selezione presenta la parola “Contenitore”. Potete continuare a fare clic più volte per selezionare gli altri elementi che sono nidificati nei contenitori, ad esempio le cornici di testo.

Quando è selezionata una cornice di testo, l’indicatore della selezione indica “Cornice di testo”. Quando fate clic su un widget per accedere ai vari elementi nidificati, tenete d’occhio l’indicatore di selezione per vedere quale elemento è selezionato. Verranno selezionati vari contenitori (ad esempio, i singoli pulsanti di navigazione di un menu) per aggiornare gli stati dei pulsanti. Se necessario, potrete controllare il modo in cui i pulsanti si presentano quando la pagina viene inizialmente caricata e quando un visitatore fa clic su di essi. Potrete inoltre definire un stato “attivo” per segnalare visivamente al visitatore il pulsante che corrisponde alla pagina attuale.

Per fare clic nei contenitori nidificati di un widget, fate clic più volte sull’elemento da modificare. Osservando l’indicatore di selezione e le opzioni presentate nel pannello Stati potrete vedere quando è selezionato l’elemento nidificato che desiderate modificare.

Dopo che avete modificato un widget, fate clic altrove (ovunque sulla pagina) per deselezionarlo oppure premete più volte il tasto Esc per passare a un livello superiore nella gerarchia del widget.

Configurare i widget usando il pannello Opzioni

Dopo aver trascinato un widget dalla libreria a una pagina, un’icona a forma di freccia blu compare nell’angolo in alto a destra del widget quando questo è selezionato. Fate clic su questa freccia blu per aprire il menu Opzioni.

Ogni widget dispone di diverse opzioni, pertanto nel menu Opzioni sono di volta in volta disponibili opzioni diverse. Le impostazioni controllano il funzionamento del widget (ad esempio, se una presentazione deve essere riprodotta in automatico o mediante clic sulle miniature) e la visualizzazione del widget (ad esempio, il tipo di transizione tra le immagine visualizzate).

Quando progettate i siti Web, potrete applicare tali impostazioni e collaborare con i clienti per individuare la soluzione migliore per specifici progetti. Ricordate che in qualsiasi momento, anche dopo che un sito è stato pubblicato online, potete tornare al file .muse, selezionare un widget, fare clic sulla relativa freccia blu per accedere al menu Opzioni e modificare le impostazioni del widget. Quindi, dopo aver ripubblicato il sito, le modifiche saranno disponibili nel sito Web.

Con i widget Menu è possibile visualizzare dinamicamente i nomi delle pagine del sito e creare in automatico i collegamenti per le varie pagine. Questo facilita l’aggiunta di funzioni di navigazione al sito in base alle pagine presenti nel sitemap nella vista Pianificazione, senza preoccuparsi di collegamenti interrotti. Potete anche disattivare alcune pagine in modo che non vengano visualizzate in modo dinamico nei widget Menu: fate clic con il pulsante destro del mouse sulla miniatura della pagina nella vista Pianificazione e deselezionate Includi pagina in navigazione. Per impostazione predefinita questa opzione è attivata e contrassegnata da un segno di spunta.

In alternativa, potete impostare manualmente i widget Menu, se preferite impostare voi stessi i nomi dei pulsanti e aggiungere i collegamenti a pagine specifiche, anziché lasciare che questo venga effettuato da Adobe Muse. Nel menu Opzioni, nella sezione Tipo di menu, scegliete l’opzione Manuale.