Layout reattivo

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. The component is used in conjunction with the Layout mode, which allows you to create and edit your responsive layout dependent on device.

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 Contenitorelayout

    Questo componente è disponibile nel browser dei componenti e 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 sulla pagina.

  • Modalità Layout

    Once the layout container is positioned on your page you can use the Layout mode to position content within the responsive grid.

  • EmulatoreConsente 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 potrebbe essere utilizzato come sistema paragrafo predefinito per le pagine o come componente disponibile per essere aggiunto alla pagina tramite il Browser componenti (o entrambi).

Nota

Adobe provides GitHub documentation of the responsive layout as a reference that can be given to front-end developers allowing them to use the AEM grid outside of AEM, for example when creating static HTML mock-ups for a future AEM site.

Nota

L’uso dei meccanismi di cui sopra è abilitato mediante la configurazione del modello. See Configuring Responsive Layout for further information.

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. In addition to the device type, the orientation, selected by the Rotate device option, can impact the breakpoint selected as the width changes.

  • 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).

screen_shot_2018-03-23at084058

Selecting a Device to Emulate

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

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

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

  3. Viene aperta la barra degli strumenti emulatore.

    screen_shot_2018-03-23at084551

    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 il dispositivo: consente di definire un dispositivo specifico da emulare da un elenco (ved. il passaggio successivo).

  4. Per selezionare un dispositivo specifico da emulare è possibile:

    • Utilizzare l’icona Seleziona il dispositivo e scegliere il dispositivo dal selettore a discesa.
    • Toccare o fare clic sull’indicatore del dispositivo nella barra degli strumenti dell’emulatore.

    screen_shot_2018-03-23at084818

  5. Una volta che un dispositivo specifico è stato selezionato è possibile:

    • See the active marker for the selected device, such as iPad.
    • See the active marker for the appropriate breakpoint such as Tablet.

    screen_shot_2018-03-23at084932

    • La linea punteggiata blu rappresenta la piega per il dispositivo selezionato (qui un iPhone 6).

    screen_shot_2018-03-23at084947

    • 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.
    • La piega è indicata per comodità dell’autore e non viene visualizzata nella pagina pubblicata.

Adding a Layout Container and its Content (Edit mode)

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:

    screen_shot_2018-03-23at085500

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.

    screen_shot_2018-03-23at085357

    You need to select the Parent option.

  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.

    screen_shot_2018-03-23at085636

  3. In questo modo viene messa evidenziata l’intera griglia con il relativo contenuto. The action toolbar will be shown, from where you can select an action such as Delete.

    screen_shot_2018-03-23at085724

Defining Layouts (Layout mode)

Nota

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

To configure the layout of a responsive grid implemented with the Layout Container you need to use the Layout mode.

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

  • By using the mode menu in the toolbar and choosing Layout mode

    • Select the Layout mode just as you would switch to Edit mode or Targeting mode.
    • La modalità Layout rimane persistente e non si esce dalla modalità Layout finché non si seleziona un’altra modalità tramite il selettore della modalità.
  • Quando si modifica un singolo componente.

    • Utilizzando l’opzione Layout nel menu Azioni rapide del componente è possibile 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:

    screen_shot_2018-03-23at090140

    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 sull’intero contenuto.

    • Mobile in nuova riga

      Il componente viene spostato su una nuova riga, a seconda dello spazio disponibile all’interno della griglia.

    • Nascondi componente

      Il componente sarà reso invisibile (può essere ripristinato dalla barra degli strumenti del Contenitore di layout).
      screen_shot_2018-03-23at090246

  • In Layout mode you can tap/click on the Drag components here to select the entire component. 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 - Seleziona il componente principale.

    • Mostra componenti nascosti - Mostra tutti i componenti o singoli componenti. Il numero indica quanti componenti nascosti sono attualmente presenti.Il numero di componenti nascosti è indicato.

    • Ripristina layout punto di interruzione: consente di tornare al layout predefinito. Ciò significa che non verrà imposto alcun layout personalizzato.

    • Mobile in nuova riga - Se lo spazio disponibile lo consente, sposta il componente verso l’alto di una posizione.

    screen_shot_2018-03-23at090829

    • Nascondi componente - Nasconde il componente corrente.

    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.

    screen_shot_2018-03-23at091200

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

    screen_shot_2018-03-23at091224

    Selezionando Ripristina tutto, tutti i componenti nascosti diventano visibili.

In questa pagina