Scoprite come aggiungere i widget Composizione in Adobe Muse. Configurate i widget Composizione per creare siti interattivi.

Nota:

Non verranno più aggiunte ulteriori funzioni ad Adobe Muse, e il supporto verrà sospeso a partire dal giovedì 26 marzo 2020. Per ulteriori informazioni e assistenza, consultate la pagina dedicata alla fine del ciclo di vita di Adobe Muse.

I widget Composizione di Adobe Muse consentono di aggiungere complesse funzioni interattive ai siti Web. Che si tratti di un sito di uno studio fotografico o di un ristorante, i widget Composizione possono essere praticamente indispensabili per visualizzare una vasta gamma di contenuti. Potete utilizzare i widget per creare esperienze esclusive di navigazione, senza scrivere una sola riga di codice.

Adobe Muse offre numerosi tipi di widget Composizione che consentono di aggiungere e progettare diversi tipi di contenuto per il sito Web. Ad esempio, per un sito di fotografie, potete scegliere un widget Visualizzazione scatola luminosa per presentare una galleria di foto. Questo widget attenua temporaneamente il resto della pagina, attirando l’attenzione del visitatore sull’area attiva.

È anche possibile creare design Web interessanti nidificando più widget in un widget Composizione. Ad esempio, per un catalogo, potete usare un widget Composizione vuota per creare un menu di hamburger e nidificare un widget Presentazione nell’area di destinazione del widget Composizione vuota. Questo tipo di progetti forniscono ai visitatori un’esperienza utente esclusiva.

Di seguito vengono descritti i vari tipi di widget Composizione disponibili in Adobe Muse.

Tipi di widget Composizione

I widget Composizione includono due contenitori: Attivazione e Destinazione. L’area di attivazione è quella in cui il visitatore fa clic; l’area di destinazione è quella che verrà visualizzata in seguito al clic. Potete collegare le aree di attivazione e destinazione per rendere il sito più sofisticato e interattivo.

Adobe Muse supporta i seguenti tipi di widget Composizione. A seconda delle esigenze di progettazione, potete utilizzare uno di questi widget o una combinazione di essi mediante nidificazione.

Vuoto

Widget per composizione Vuoto di Adobe Muse
Widget per composizione Vuoto di Adobe Muse

Widget con piccole miniature. Per impostazione predefinita, questo widget non contiene alcun elemento di riempimento. Potete collegarlo manualmente al contenitore di destinazione.

Notizie in evidenza

Widget per composizione Notizie in evidenza di Adobe Muse
Widget per composizione Notizie in evidenza di Adobe Muse

Widget con comportamento simile a un widget Pannello a soffietto. Potete aggiungere testo e immagini nell’area contenitore di questo widget.

Visualizzazione scatola luminosa

Widget per composizione Visualizzazione scatola luminosa di Adobe Muse
Widget per composizione Visualizzazione scatola luminosa di Adobe Muse

Widget in cui il contenuto dell’area di destinazione diventa attivo quando si fa clic sull’attivatore. Quando viene visualizzata la destinazione, il resto della pagina viene attenuato.

Presentazione

Widget per composizione Presentazione di Adobe Muse
Widget per composizione Presentazione di Adobe Muse

Widget con piccole miniature collegate all’area presentazione di destinazione. Per impostazione predefinita, le diapositive scorrono in orizzontale nel widget.

Descrizione

Widget per composizione Descrizione di Adobe Muse
Widget per composizione Descrizione di Adobe Muse

Widget contenente un testo descrittivo. Quando l’utente passa il cursore sull’area di attivazione, viene subito visualizzata la relativa descrizione.

Aggiungere e configurare i widget Composizione

Per aggiungere un widget Composizione in Adobe Muse, selezionate il widget per composizione che desiderate aggiungere e trascinatelo nella vista Progettazione. Per impostazione predefinita, questi widget sono dinamici e fluidi per vari punti di interruzione. Per modificare la posizione o il contenuto di un widget Composizione, potete modificare, ridimensionare e fissare i singoli elementi del widget per uno specifico punto di interruzione.

Seguite questa procedura per aggiungere un widget Composizione nel layout.

  1. Aprite Adobe Muse. Nella schermata introduttiva, fate clic su Crea nuovo per creare un nuovo sito o aprite un sito Adobe Muse esistente in cui desiderate aggiungere un widget Composizione.

  2. Nella vista Pianificazione, fate doppio per aprire la pagina in cui desiderate aggiungere il widget.

  3. Aprite Libreria di widget (Finestra > Libreria di widget) e fate clic su Composizioni per espandere questa sezione. Scegliete uno dei widget per composizione, in base alle vostre esigenze.

    Ad esempio, scegliete Visualizzazione scatola luminosa nella libreria dei widget.

    Nota:

    Per rimuovere il contenuto predefinito inserito nel widget, fate clic con il pulsante destro del mouse sul widget e selezionate Cancella contenuti widget.

    Trascinate un widget Composizione dalla libreria dei widget in Adobe Muse.
    Trascinate un widget Composizione dalla libreria dei widget.

    La versione predefinita del widget Visualizzazione scatola luminosa ha tre riquadri di attivazione grigi più piccoli al di sopra del contenitore grigio chiaro di destinazione.

    Quando un visitatore fa clic sul contenitore di attivazione, viene visualizzato il contenitore di destinazione del widget Visualizzazione scatola luminosa. Come destinazione potete incorporare immagini, testo e video, compresi i video YouTube.

  4. Selezionate il contenitore o l’attivatore nel widget Composizione. Per selezionare tutto il widget, selezionatelo. Nell’indicatore della selezione in alto a sinistra nell’applicazione compare la parola “Composizione”.

    Per selezionare l’attivatore, fate doppio clic e selezionate i riquadri più piccoli nel widget. Nell’indicatore della selezione viene riportata la dicitura Attivatore. I riquadri piccoli sono gli attivatori del widget. Si tratta dei pulsanti che rispondono alle azioni dell’utente.

    Visualizzare l’indicatore della selezione in alto a sinistra sulla pagina Adobe Muse
    Visualizzare l’indicatore della selezione in alto a sinistra sulla pagina

    Per verificare che non sia selezionato nulla, accertatevi che l’indicatore di selezione in alto a sinistra presenti la dicitura Pagina.

  5. Scegliete File > Inserisci per aprire la finestra di dialogo Importa. Individuate e selezionate i file da inserire nel widget. Fate clic su Apri per scegliere questo file e chiudere la finestra di dialogo.

    Fate clic una volta nella pagina per inserire l’immagine a dimensione originale.

  6. Con l’immagine ancora selezionata, fate clic con il pulsante destro del mouse e scegliete Taglia dal menu di scelta rapida.

    Potete anche usare la scelta rapida da tastiera per tagliare l’immagine, che viene così rimossa dalla pagina e copiata negli Appunti.

  7. Fate clic con il pulsante destro del mouse nel pulsante di attivazione e scegliete Incolla. In alternativa, potete incollare l’immagine nell’attivatore utilizzando la scelta rapida da tastiera. Il contenitore attivatore si espande automaticamente in base alle dimensioni dell’immagine.

    Può essere difficile incollare dei contenuti in un contenitore A volte, è possibile che il contenuto non venga effettivamente incollato all’interno, ma sulla pagina.

    Per controllare che l’immagine si trovi effettivamente nel contenitore attivatore, premete Esc una volta e osservate l’indicatore di selezione. Se presenta la dicitura “Attivatore”, allora l’immagine si trova all’interno dell’attivatore. Se invece presenta la dicitura “Pagina”, allora dovete tagliare l’immagine e incollarla di nuovo all’interno del contenitore attivatore.

    Per verificare dove è stata incollata l’immagine, potete anche aprire il pannello Livelli (Finestra > Livelli). Il pannello Livelli mostra la gerarchia degli elementi di una pagina.

  8. Per aggiungere altre miniature, fate clic sul simbolo + accanto ai contenitori di attivazione.

    Fate clic su + per aggiungere le miniature in una Visualizzazione scatola luminosa
    Fate clic su + per aggiungere le miniature
  9. Dopo aver inserito il widget nella vista Progettazione, potete configurare il widget. Per configurare le opzioni del widget Composizione, selezionate il widget e fate clic sulla freccia blu in alto a destra nel widget.

    Configurare i widget Composizione con il menu Opzioni
    Configurare i widget Composizione con il pannello Opzioni

    Potete configurare le seguenti impostazioni dal pannello Opzioni:

    • Posizione: specifica dove si trova l’area di destinazione sulla pagina. Selezionate Sovrapposto per destinazioni sovrapposte, oppure Ordine sparso per destinazioni in varie posizioni. Selezionate Scatola luminosa per attenuare il resto della pagina.
    • Mostra destinazione: specifica il comportamento della destinazione quando un utente fa clic sull’attivatore. 
    • Nascondi destinazione: specifica le impostazioni per nascondere una destinazione. A meno che l’utente non faccia clic sull’attivatore, l’area di destinazione resta nascosta. 
    • Transizione: specifica il modo in cui cambia l’area di destinazione quando l’utente fa clic o passa il cursore sull’attivatore. Scegliete Dissolvenza per passare alla nuova destinazione con un effetto di dissolvenza; Orizzontale per visualizzare le destinazioni con scorrimento orizzontale; Verticale per visualizzare le destinazioni con scorrimento verticale. 
    • Velocità transizione: specifica la velocità della transizione per il widget Composizione. Per una transizione immediata, selezionate Nessuno.
    • Riproduzione automatica: configurate questa opzione per creare una presentazione nel sito Web. Se selezionate questa opzione, le diapositive vengono riprodotte in automatico, senza alcuna interazione da parte dell’utente.
    • Ordine casuale: selezionate questa opzione per visualizzare le destinazioni in ordine casuale.
    • Attivazione superiore: selezionate questa opzione per collocare l’attivatore sopra al contenitore Attivazione. La stessa gerarchia è visualizzata anche nel pannello Livelli.
    • Abilita passaggio con il dito: selezionate questa opzione per passare alla destinazione successiva mediante scorrimento con il dito, sui dispositivi touch.
    • Nascondi tutti inizialmente: selezionate questa opzione per nascondere tutte le opzioni di destinazione al caricamento iniziale del sito Web. Per vedere le destinazioni, l’utente dovrà fare clic sui relativi attivatori.
    • Scatola luminosa automatica: selezionate questa opzione per visualizzare automaticamente la scatola luminosa al caricamento del sito Web.
    • Parti: selezionate le opzioni Precedente, Successivo e Pulsante Chiudi per aggiungere al widget ulteriori funzioni interattive. Gli utenti possono fare clic sulle opzioni Precedente, Successivo e Chiudi nel sito Web.
    • Modifica: selezionate Mostra parti di scatola luminosa durante la modifica per visualizzare l’area di destinazione nella vista Progettazione, durante la modifica del widget. Selezionate Mostra tutto in modalità progettazione per visualizzare tutti i contenitori di destinazione allo stesso tempo nella vista Progettazione.
    Configurare le impostazioni per i widget Composizione in Adobe Muse
    Configurare le impostazioni per i widget Composizione

    Nota:

    L’opzione Mostra parti di scatola luminosa durante la modifica è disabilitata se avete scelto Ordine sparso o Sovrapposto dall’elenco a discesa Posizione.

    Se selezionate l’opzione Scatola luminosa automatica, l’opzione Nascondi tutti inizialmente è disattivata.

  10. Per rimuovere gli attivatori superflui, fate doppio clic per selezionare l’attivatore da eliminare. Premete Canc per rimuovere l’attivatore selezionato.

  11. Fate clic sull’immagine protagonista nel contenitore attivatore per richiamare l’effetto della scatola luminosa.

    Fate clic su un’immagine a sinistra (attivatore) per visualizzare la Visualizzazione scatola luminosa
    Fate clic su un’immagine a sinistra (attivatore) per visualizzare la Visualizzazione scatola luminosa (come illustrato a destra)

    Premete Esc per chiudere la finestra della scatola luminosa e tornare alla vista Progettazione e continuare a modificare la pagina Adobe Muse.

  12. Dopo aver configurato e posizionato il widget Composizione, verificatene il funzionamento nella vista Anteprima.

Se utilizzate un widget Composizione in un layout dinamico, procedete con la sezione seguente. Assicuratevi di verificare e visualizzare in anteprima il widget per tutti i punti di interruzione.

Utilizzo dei widget Composizione in un layout dinamico

Per impostazione predefinita, i widget Composizione sono fluidi o dinamici. Per aggiungere e utilizzare i widget Composizione in un layout dinamico, effettuate una delle seguenti operazioni:

  • Per creare un nuovo sito dinamico con l’ultima versione di Adobe Muse, dal pannello Libreria di widget trascinate il widget per composizione desiderato per inserirlo nella vista Progettazione.
  • Se avete usato Adobe Muse 2017.0.3 o versioni precedenti, il widget Composizione non è dinamico. In questo caso, aprite il file .muse con l’ultima versione di Adobe Muse. Selezionate gli elementi nel widget e per l’opzione Ridimensiona scegliete Larghezza dinamica o Altezza dinamica (in base alle esigenze).
Conversione di widget Composizione non dinamici
Conversione di widget Composizione non dinamici

Nota:

Non è possibile selezionare l’intero widget e modificarne le proprietà di ridimensionamento. Piuttosto, selezionate singoli elementi all’interno del widget per renderli dinamici.

Configurate il widget come descritto in Aggiungere e configurare i widget Composizione. Dopo aver configurato e formattato un widget, potete visualizzarlo in anteprima in un browser o utilizzare il cursore di scorrimento e ridimensionarlo. Il widget si ridimensiona automaticamente in base alle dimensioni dello schermo.

Widget Composizione dinamico in Adobe Muse
Widget Composizione dinamico in Adobe Muse

Nota:

Quando aggiungete i widget Composizione in un layout dinamico, si consiglia di impaginarlo inizialmente per il punto di interruzione più grande. Dopo averne finalizzato la posizione e la configurazione per il punto di interruzione più grande, aggiungete eventuali altri punti di interruzione.

Per ulteriori informazioni su come progettare un sito con layout dinamico, consultate Posizionare gli oggetti nel Web design dinamico.

Combinare un widget Composizione con altri widget

Uno degli aspetti più particolari di un widget Composizione è il fatto che è possibile nidificare più widget all’interno di un widget Composizione. In altre parole, potete aggiungere widget, come moduli, presentazioni o le voci di menu, in un widget Composizione.

Ad esempio, potete aggiungere un widget Presentazione nel contenitore di destinazione di un widget Notizie in evidenza usato in un sito Web di cucina. Quando un visitatore fa clic sull’etichetta Menu (widget Notizie in evidenza), l’area di destinazione contenente la galleria viene visualizzata sotto forma di presentazione.

Potete anche aggiungere come destinazione un modulo di contatto, in modo che quando utente fa clic su Contatti venga immediatamente aperto il modulo di contatto.

La nidificazione offre molte altre combinazioni e possibilità creative. Tuttavia, tenete presente i seguenti aspetti quando progettate widget nidificati in layout dinamico:

  • Non è possibile fissare gli elementi dinamici nidificati all’interno di un contenitore non dinamico. 
  • Gli oggetti inseriti in un contenitore non dinamico non saranno più a loro volta dinamici.

Nota:

Quando nidificate dei widget all’interno di widget Composizione, evitate di usare più di tre livelli di nidificazione.

La sezione seguente illustra come creare un sottomenu utilizzando un widget Composizione. Lo scenario di esempio di seguito spiega come creare un sottomenu nascosto per la navigazione nel sito.

Creazione di sottomenu con i widget Composizione

Potete configurare i widget Composizione per consentire la navigazione nel sito tramite sottomenu. Potete creare una voce di menu che richiami un sottomenu quando il visitatore passa il cursore del mouse sull’area attiva e lo nasconda all’allontanamento del cursore dalla stessa area attiva. Potete inoltre configurare un sottomenu che verrà nascosto se il visitatore non fa clic su nessuno dei collegamenti del sottomenu ma sposta semplicemente il cursore all’esterno del sottomenu stesso. Questi tipi di sottomenu interattivi sono utili per realizzare una barra di navigazione per un sito composto di numerose sottosezioni. 

I menu Mostra destinazione e Nascondi destinazione sono utili per creare un comportamento di menu standard nel sito Web. Il visitatore può fare clic sui collegamenti, oppure può allontanare il cursore all’esterno dell’area della finestra per nascondere quest’ultima. Quando questa opzione è attivata, non è necessario fare clic sul pulsante di chiusura per nascondere un sottomenu.

Questa funzione è disponibile per i seguenti widget per composizione:

  • Vuoto
  • Notizie in evidenza
  • Descrizione

Nel pannello Opzioni sono disponibili due impostazioni per mostrare il contenitore di destinazione:

  • Al clic del mouse: visualizza la destinazione quando l’utente fa clic
  • Al passaggio del mouse: visualizza la destinazione quando l’utente passa il cursore sull’attivatore

Potete anche scegliere di nascondere il contenitore di destinazione in un widget Composizione. Di seguito sono indicate le quattro opzioni che consentono di nascondere il contenitore di destinazione:

  • Nessuno
  • Al clic del mouse
  • All’allontanamento del mouse
  • All’allontanamento del mouse da attivatore e destinazione

In questa sezione viene spiegato come utilizzare “Al passaggio del mouse” per visualizzare il contenitore di destinazione e “All’allontanamento del mouse da attivatore e destinazione” per nascondere il contenitore di destinazione.

Seguite i passaggi descritti di seguito per abilitare le impostazioni Nascondi all’allontanamento del mouse per i widget per composizione e creare una barra di menu in cui i collegamenti dei sottomenu vengano mostrati o nascosti in base alle azioni del visitatore:

  1. Nella vista Progettazione, trascinate un widget per composizione Scatola luminosa dalla libreria dei widget alla pagina.

  2. Selezionate i contenitori di attivazione. Con lo strumento selezione, spostate i tre contenitori Attivatore verso l’alto, al di sopra del contenitore Destinazione più grande, e distanziateli in modo uniforme.

    Riposizionare i contenitori di attivazione
    Riposizionate i contenitori Attivatore al di sopra dell’immagine protagonista più grande.

  3. Con lo strumento selezione, trascinate le maniglie laterali di ciascun contenitore Attivatore e ridimensionateli in larghezza in modo da creare un set di tre schede lungo la parte superiore, simile a un widget per pannelli a schede.

    Utilizzare lo strumento selezione per trascinare le maniglie
    Trascinate i riquadri per ridimensionare in larghezza i tre pulsanti attivatori.

  4. Aggiungete i contenuti desiderati a ciascuna delle tre aree di attivazione. Il contenuto attivatore può includere testo, collegamenti, immagini, rettangoli, HTML incorporato e altro ancora. Ad esempio, utilizzate lo strumento testo per aggiungere del testo a ogni attivatore: “Link one”, “Link two” e “Link three”.

    Quindi, create un collegamento nell’area contenuto della seconda destinazione.

  5. Fate clic su un contenitore di attivazione, quindi selezionate il corrispondente contenitore di destinazione più grande. Aggiungete un collegamento all’area contenuto della seconda destinazione. Quindi fate clic sull’elenco a discesa accanto alla dicitura Collegamenti ipertestuali, a destra nel pannello di controllo. Aggiungete un collegamento all’indirizzo Web desiderato.

  6. Per verificare il funzionamento del widget per composizione, scegliete File > Anteprima pagina nel browser.
    Interagite con il widget facendo clic sui contenitori attivatori “Link one”, “Link two” e “Link three”.

    Per impostazione predefinita, il contenitore di destinazione è sempre visibile e non viene mai nascosto. Fate clic sui tre pulsanti di attivazione per mostrare il corrispondente contenitore di destinazione: sarà sempre visibile uno dei tre contenitori di destinazione.

  7. Per configurare l’impostazione Nascondi all’allontanamento, selezionate il widget Composizione. Fate clic sulla freccia blu per accedere al pannello Opzioni e modificate le opzioni di configurazione del widget.

    Assicuratevi che le seguenti impostazioni siano attivate:

    • Posizione: sovrapposto (impostazione predefinita)
    • Mostra destinazione: al passaggio del mouse
    • Nascondi destinazione: all’allontanamento del mouse da attivatore e destinazione
    • Transizione: dissolvenza (impostazione predefinita)
    • Velocità transizione: 0,5 secondi (impostazione predefinita)
    • Riproduzione automatica: disattivato (impostazione predefinita)
    • Ordine casuale: disattivato (impostazione predefinita)
    • Nascondi tutti inizialmente: attivato
    Pannello delle opzioni di composizione
    Modificate le impostazioni nel pannello Opzioni per controllare il funzionamento del widget.

    Le impostazioni chiave che determinano la funzionalità Mostra/Nascondi sono il menu Mostra destinazione, il menu Nascondi destinazione e l’attivazione dell’opzione Nascondi tutti inizialmente.

  8. Scegliete di nuovo File > Anteprima pagina nel browser per verificare le ultime modifiche apportate al widget.

    Ora, quando viene inizialmente caricato il widget Composizione, tutte le aree di destinazione sono nascoste per impostazione predefinita.

    Interagite di nuovo con il widget. Quando passate il cursore del mouse su un’area di attivazione, viene visualizzata l’area di destinazione corrispondente. Se il cursore rimane nell’area del widget, potete interagire con il contenuto all’interno delle aree di destinazione (ad esempio potete fare clic sul collegamento per passare al sito Web di Adobe, nel contenitore di destinazione centrale).

    Tuttavia, se allontanate il cursore dalle aree di attivazione o destinazione, le aree di destinazione vengono nascoste finché non passate nuovamente il mouse su un’area di attivazione.

    Questa funzione consente di impostare sistemi di navigazione interattivi molto più complessi, che reagiscono agli spostamenti del mouse effettuati dai visitatori.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online