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.
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.
- Essi definiscono a tutti gli effetti la larghezza massima (in pixel) di qualsiasi dispositivo che utilizza un layout specifico.
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).
-
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.
- Seleziona dispositivo: consente di definire un dispositivo specifico da emulare da un elenco (ved. il passaggio successivo).
-
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.
- 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.
- Visualizzare il marcatore attivo per il dispositivo selezionato, ad esempio iPad.
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).
-
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.
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.
-
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.
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.
-
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à.
-
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:
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).
- Elemento padre
-
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à.
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.
- 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.
- Ripristina layout punto di interruzione: consente di tornare al layout predefinito e non verrà quindi applicato alcun layout personalizzato.
- Mobile in nuova riga: consente di spostare il componente verso l’alto di una posizione, se lo spazio disponibile lo consente.
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.
Selezionando l’opzione Mostra componenti nascosti, i componenti che sono attualmente nascosti nelle posizioni originali vengono visualizzati in blu.
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.