Visualizzazione del contenuto dell'aiuto per la versione :

AEM consente di creare un layout reattivo per le pagine mediante il componente Contenitore di layout.

Questo fornisce un sistema paragrafo che consente di posizionare i componenti all’interno di una griglia reattiva. Con questa griglia è possibile riorganizzare il layout in base alla dimensione e al formato del dispositivo o della finestra. Il componente viene utilizzato insieme alla modalità Layout, che consente di creare e modificare il layout reattivo in base al dispositivo.

Il Contenitore di layout:

  • Fornisce ancoraggio orizzontale sulla griglia, unitamente alla possibilità di posizionare componenti affiancati sulla griglia e definire quando dovrebbero venire compressi/ridisposti.
  • Utilizza punti di interruzione predefiniti (ad es. per smartphone, tablet ecc.) per definire il comportamento del contenuto per i relativi dispositivi e orientamenti.
    • Ad esempio, puoi personalizzare le dimensioni del componente o specificare se il componente può essere visualizzato su dispositivi specifici.
  • Può essere nidificato per abilitare il controllo delle colonne.

L’utente può quindi visualizzare quale sarà l’aspetto dei contenuti per dispositivi specifici utilizzando l’emulatore.

Attenzione:

Il componente Contenitore di layout è disponibile anche nell’interfaccia classica, ma le sue funzionalità complete sono supportate e disponibili solo nell’interfaccia touch.

AEM consente di realizzare il layout reattivo per le pagine utilizzando una combinazione di meccanismi:

  • Componente Contenitore di layout
    Disponibile nel browser Componenti, fornisce un sistema paragrafo a griglia che consente di aggiungere e posizionare i componenti all’interno di una griglia reattiva. Può essere impostato anche come sistema paragrafo predefinito nella pagina.
  • Modalità Layout Una volta che il Contenitore di layout
    è collocato nella pagina, è possibile utilizzare la modalità di layout per posizionare i contenuti all’interno della griglia reattiva.
  • Emulatore
    Consente di creare e modificare siti Web reattivi il cui layout si riorganizza in base alle dimensioni del dispositivo/finestra, ridimensionando i componenti in modo interattivo. L’utente può quindi visualizzare quale sarà l’aspetto dei contenuti utilizzando l’emulatore.

Con questi meccanismi basati su una griglia reattiva è possibile:

  • Utilizzare i punti di interruzione per definire il layout di contenuti diversi in base alla larghezza del dispositivo (in relazione al tipo di dispositivo e all’orientamento).
  • Utilizzare questi stessi punti di interruzione e layout di contenuti per assicurare che il contenuto sia reattivo rispetto alle dimensioni della finestra del browser sul desktop.
  • Utilizzare l’ancoraggio orizzontale sulla griglia per posizionare i componenti sulla griglia, ridimensionarli, definire quando dovrebbero venire compressi o ridisposti in modo da essere affiancati o sovrapposti.
  • Nascondere componenti per layout di dispositivo specifici.
  • Gestire il controllo delle colonne.

A seconda del progetto, il Contenitore di layout può essere usato come il sistema paragrafo predefinito per le pagine o come componente disponibile per essere aggiunto alla pagina tramite il browser Componenti (o entrambi).

Nota:

Adobe fornisce la documentazione GitHub relativa al layout reattivo come riferimento per gli sviluppatori front-end, consentendo loro di utilizzare la griglia di AEM fuori da AEM, ad esempio quando si crea un pattern HTML statico per un futuro sito AEM.

Nota:

L’uso dei meccanismi di cui sopra è abilitato mediante la configurazione del modello. Per ulteriori informazioni, consulta Configurare il layout reattivo.

Definizioni di layout, emulazione del dispositivo e punti di interruzione

Quando si crea il contenuto del sito Web è importante assicurarsi che venga visualizzato in modo adatto al dispositivo utilizzato.

AEM consente di definire layout dipendenti dalla larghezza del dispositivo:

  • L’emulatore consente di emulare i layout su una gamma di dispositivi. Oltre al tipo di dispositivo, anche l’orientamento impostato dall’opzione Ruota dispositivo può influenzare il punto di interruzione che viene selezionato quando cambia la larghezza.
  • I punti di interruzione sono i punti che separano le definizioni di layout.
    • Essi definiscono a tutti gli effetti la larghezza massima (in pixel) di qualsiasi dispositivo che utilizza un layout specifico.
    • I punti di interruzione sono normalmente applicabili a una gamma di dispositivi, in base alla larghezza del relativo schermo.
    • La portata di un punto di interruzione si estende a sinistra fino al punto di interruzione successivo.
    • Non è possibile selezionare specificatamente un punto di interruzione: la selezione di un dispositivo e di un orientamento comporterà la selezione automatica del punto di interruzione adeguato.

Il dispositivo Desktop è privo di una larghezza specifica e fa riferimento al punto di interruzione predefinito (ovvero tutto quanto si trova oltre l’ultimo punto di interruzione configurato).

Nota:

È teoricamente possibile definire punti di interruzione per ogni singolo dispositivo, ma questo rende decisamente più macchinose la definizione e la manutenzione dei layout.

Quando utilizzi l’emulatore e selezioni un dispositivo specifico per l’emulazione, la definizione del layout e il relativo punto di interruzione vengono evidenziati. Eventuali modifiche apportate al layout verranno riconosciute per altri dispositivi su cui si applica il punto di interruzione, ovvero qualsiasi dispositivo disponibile a sinistra del marcatore del punto di interruzione attivo, ma prima del marcatore del punto di interruzione successivo.

Ad esempio, se selezioni il dispositivo iPhone 6 Plus (con una larghezza di 540 pixel) per l’emulazione e il layout, verrà attivato anche il punto di interruzione Telefono (definito con 768 pixel). Tutte le modifiche di layout apportate per iPhone 6 diverranno applicabili per altri dispositivi nel punto di interruzione Telefoni, come iPhone 5 (definito con 320 pixel).

chlimage_1

Selezione di un dispositivo da emulare

  1. Apri la pagina desiderata per la modifica. Ad esempio:

    http://localhost:4502/editor.html/content/we-retail/it/it/experience.html

  2. Seleziona l’icona Emulatore sulla barra degli strumenti in alto:

    chlimage_1
  3. Viene aperta la barra degli strumenti emulatore.

    chlimage_1

    La barra degli strumenti emulatore mostra le seguenti opzioni di layout aggiuntive:

    • Ruota dispositivo: consente di ruotare l’orientamento di un dispositivo da verticale a orizzontale e viceversa.
    chlimage_1
    • Seleziona dispositivo: consente di definire un dispositivo specifico da emulare da un elenco (ved. il passaggio successivo).
    chlimage_1
  4. Per selezionare un dispositivo specifico da emulare è possibile:

    • Utilizzare l’icona Seleziona dispositivo e scegliere il dispositivo dal selettore a discesa.
    • Toccare o fare clic sull’indicatore del dispositivo nella barra degli strumenti dell’emulatore.
    chlimage_1
  5. Una volta che un dispositivo specifico è stato selezionato è possibile:

    • Visualizzare il marcatore attivo per il dispositivo selezionato, ad esempio iPad.
    • Visualizzare il marcatore attivo per il punto di interruzione adeguato, ad esempio Tablet.
    chlimage_1
    • La linea punteggiata blu rappresenta la piega per il dispositivo selezionato (qui un iPhone 6).
    chlimage_1
    • La piega può essere anche considerata l’interruzione di riga della pagina (da non confondere con i punti di interruzione) per il contenuto. Questa è visualizzata per comodità, per mostrare quale parte del contenuto è visibile all’utente sul dispositivo prima di scorrere in basso.
    • La riga della piega non viene visualizzata se l’altezza del dispositivo emulato è superiore alle dimensioni dello schermo.

Aggiunta di un contenitore di layout e del relativo contenuto (modalità di modifica)

Un Contenitore di layout è un sistema paragrafo che:

  • Include altri componenti.
  • Definisce il layout.
  • Risponde alle modifiche.

Nota:

Se non è già disponibile, il Contenitore di layout deve essere attivato esplicitamente per un sistema paragrafo/pagina (ad esempio, utilizzando la modalità Progettazione).

  1. Il Contenitore di layout è disponibile come componente standard nel browser Componenti. Da qui puoi trascinarlo nella posizione desiderata sulla pagina; verrà quindi visualizzato il segnaposto Trascina qui i componenti.

  2. È quindi possibile aggiungere componenti al Contenitore di layout. Questi componenti includeranno il contenuto vero e proprio:

    chlimage_1

Selezione e intervento su un Contenitore di layout (modalità di modifica)

Come con altri componenti, puoi selezionare e quindi intervenire (opzioni Copia, Taglia, Elimina) su un Contenitore di layout (in modalità di modifica):

Attenzione:

Dato che un Contenitore di layout è un sistema paragrafo, la sua eliminazione comporta l’eliminazione della griglia di layout e di tutti i componenti (e relativo contenuto) inclusi all’interno del contenitore.

  1. Se passi il cursore del mouse o tocchi il segnaposto di una griglia, viene visualizzato il menu delle azioni.

    chlimage_1

    È necessario selezionare l’opzione Elemento padre.

    chlimage_1
  2. Se il componente del layout è nidificato, seleziona l’opzione Elemento padre per avere una selezione a discesa, che consente di selezionare il contenitore nidificato del layout o il relativo elemento padre.

    Quando passi il cursore del mouse sui nomi dei contenitori nel menu a discesa, sulla pagina vengono visualizzati i relativi contorni.

    • Il contenitore di layout nidificato inferiore presenta un contorno nero.
    • Il contenitore di layout nidificato inferiore successivo è contornato in grigio scuro.
    • Ogni contenitore successivo viene visualizzato in una tonalità di grigio più chiara.
    chlimage_1
  3. In questo modo viene messa evidenziata l’intera griglia con il relativo contenuto. Viene visualizzata la barra degli strumenti delle azioni, da cui è possibile selezionare un’azione, ad esempio Elimina.

    chlimage_1

Definire un layout (modalità Layout)

Nota:

È possibile definire un layout distinto per ogni punto di interruzione (come determinato dal tipo di dispositivo e dall’orientamento emulati).

Per configurare il layout di una griglia reattiva implementato con il contenitore di layout è necessario utilizzare la modalità Layout

La modalità Layout può essere avviata in due modi.

  • Utilizzando il menu modalità nella barra degli strumenti e selezionando la modalità Layout

    • Seleziona la modalità Layout esattamente come si fa per passare alla modalità Modifica o Impostazione destinazione.
    • La modalità Layout rimane persistente; si esce dalla modalità Layout solo quando si seleziona un’altra modalità mediante il selettore di modalità.
  • Quando si modifica un singolo componente.

    • Seleziona l’opzione Layout nel menu Azioni rapide del componente per passare alla modalità Layout.
    • La modalità Layout persiste quando si modifica il componente e torna alla modalità Modifica quando è attivo un altro componente.

       

In modalità Layout puoi eseguire diverse azioni su una griglia:

  • Ridimensionare i componenti di contenuto utilizzando i punti blu. Il ridimensionamento sarà sempre con ancoraggio sulla griglia. Quando si esegue un’operazione di ridimensionamento, verrà visualizzata la griglia di sfondo per facilitare l’allineamento:

    chlimage_1

    Nota:

    Proporzioni e rapporti relativi saranno mantenuti al ridimensionamento di componenti come le immagini.

  • Facendo clic/toccando un componente di contenuti la barra degli strumenti consente di:

    • Elemento padre
      Consente di selezionare l’intero componente Contenitore di layout per intervenire su di esso nel complesso.
    • Mobile in nuova riga
      Il componente viene spostato su una nuova riga, in base allo spazio disponibile all’interno della griglia.
    • Nascondi componente
      Il componente viene reso invisibile (può essere ripristinato dalla barra degli strumenti del Contenitore di layout).
    chlimage_1
  • In modalità Layout tocca o fai clic su Trascina qui i componenti per selezionare l’intero componente. Viene quindi visualizzata la barra degli strumenti per questa modalità.

    chlimage_1

    La barra degli strumenti presenta opzioni diverse a seconda dello stato del componente del layout e dei componenti che ne fanno parte. Esempio:

    • Elemento padre: consente di selezionare il componente principale.
    chlimage_1
    • Mostra componenti nascosti: rende visibili tutti i componenti o singoli componenti. Il numero indica quanti sono componenti attualmente nascosti. Il contatore mostra il numero di componenti nascosti.
    chlimage_1
    • Ripristina layout punto di interruzione: consente di tornare al layout predefinito e non verrà quindi applicato alcun layout personalizzato.
    chlimage_1
    • Mobile in nuova riga: consente di spostare il componente verso l’alto di una posizione, se lo spazio disponibile lo consente.
    chlimage_1
    • Nascondi componente: consente di nascondere il componente corrente.
    chlimage_1

    Nota:

    Nell’esempio in alto le azioni Mobile e Nascondi sono disponibili, perché questo Contenitore di layout è nidificato all’interno di un Contenitore di layout principale.

    • Mostra componenti
      Seleziona i componenti principali per visualizzare la barra degli strumenti delle azioni con l’opzione Mostra componenti nascosti. In questo esempio, due componenti sono nascosti.
    chlimage_1

    Selezionando l’opzione Mostra componenti nascosti, i componenti che sono attualmente nascosti nelle posizioni originali vengono visualizzati in blu.

    chlimage_1

    Selezionando Ripristina tutto, tutti i componenti nascosti diventano visibili.

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