Visualizzazione del contenuto dell'aiuto per la versione :

AEM consente di realizzare 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. La griglia consente di riorganizzare il layout in base alla dimensione e al formato della finestra/dispositivo. Il componente viene utilizzato in combinazione con la 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 esempio telefono, tablet) per consentire di definire il comportamento richiesto dei contenuti per dispositivi correlati/orientamento. Ad esempio, è possibile personalizzare le dimensioni del componente o se il componente possa essere visualizzato o meno 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.

A seconda dell'istanza, può essere utilizzato come sistema paragrafo predefinito per la pagina, o come componente disponibile per il rilascio sulla pagina (o entrambi).

Attenzione:

Il componente Contenitore di layout è disponibile nell'interfaccia classica, ma la sua funzionalità è pienamente utilizzabile 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 predefinito paragrafo nella pagina.
  • Modalità Layout
    Una volta che il Contenitore di layout è collocato nella pagina, è possibile utilizzare la modalità Layout per posizionare contenuto 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 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 (posizionare i componenti sulla griglia, ridimensionarli come necessario, definire quando dovrebbero venire compressi/ridisposti in modo da essere affiancati o sovrapposti).
  • Nascondere componenti per layout di dispositivo specifici.
  • Gestire il controllo delle colonne.

In base al progetto, il Contenitore di layout può essere utilizzato come sistema paragrafo predefinito per le pagine, oltre a essere disponibile per la selezione (come componente che è possibile aggiungere alla pagina) dal Browser componenti.

Nota:

L’utilizzo dei meccanismi di cui sopra è abilitato mediante configurazione nel modello. Per ulteriori informazioni, consultate Configurazione del 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 questi layout su una gamma di dispositivi. Così come il tipo di dispositivo, l'orientamento, selezionato tramite Ruota dispositivo, può influenzare il punto di interruzione selezionato al variare della 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 Desktop del dispositivo privo di una larghezza specifica e relativo al punto di interruzione predefinito (ovvero tutto quanto si trova sopra 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 (utilizzando l'emulatore) si seleziona un dispositivo specifico per l'emulazione e la definizione del layout, viene evidenziato anche il relativo punto di interruzione. Eventuali modifiche apportate al layout saranno applicabili agli altri dispositivi cui si applica il punto di interruzione; ovvero, tutti i dispositivi posizionati a sinistra del marcatore dei punto di interruzione attivo, ma prima del marcatore del punto successivo.

Ad esempio, quando si seleziona il dispositivo iPhone 6 Plus (con larghezza definita di 540 pixel) per l'emulazione e il layout, verrà attivato il punto di interruzione Telefono (definito a 768 pixel). Eventuali modifiche apportate al layout per iPhone 6 saranno applicabili agli altri dispositivi sotto il punto di interruzione Telefono, ad esempio a iPhone 5 (definito a 320 pixel).

Selezione di un dispositivo da emulare

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

    http://localhost:4502/editor.html/content/geometrixx-media/en.html

  2. Selezionate l'icona Emulatore sulla barra degli strumenti in alto:

  3. La barra degli strumenti dell'emulatore verrà visualizzata. Da qui è possibile:

    • Ruotare il dispositivo
    • Selezionare un dispositivo specifico a partire dai marcatori.
  4. Per selezionare un dispositivo specifico da emulare è possibile:

    • Utilizzare il selettore a discesa.
    • Toccare o fare clic sull’indicatore del dispositivo nella barra degli strumenti dell'emulatore.
  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
    • Visualizzare la linea tratteggiata che rappresenta la piega per il dispositivo corrente; ad esempio iPhone 5:

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

Un Contenitore di layout è un sistema paragrafo che:

  • include altri componenti
  • è utilizzabile per definire il layout
  • sarà reattivo 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 è possibile trascinarlo nella posizione desiderata sulla pagina; verrà quindi visualizzato il segnaposto Trascinate qui i componenti.

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

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

Come con altri componenti, potete 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 si posiziona il puntatore del mouse sopra il segnaposto della griglia, sarà necessario selezionare l'Elemento padre:

  2. Se il componente di layout è nidificato sarà necessario selezionare l'istanza specifica sulla quale intervenire (quando si posiziona il puntatore del mouse sulle opzioni, un bordo nero indicherà la selezione nella pagina):

  3. Questo metterà in evidenza l'intera griglia con il relativo contenuto. Verrà visualizzata la barra degli strumenti componente, dalla quale è possibile selezionare un'azione; ad esempio Elimina:

Definizione dei 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 implementata con il Contenitore di layout, è necessario utilizzare la modalità Layout. Da qui è possibile eseguire varie azioni sulla 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:

    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).
  • In modalità Layout è possibile toccare/fare clic su Trascinate qui i componenti per selezionare l'intero componente. Verrà così visualizzata la barra degli strumenti per questa modalità; ad esempio:

    • Elemento padre
      Consente di selezionare il componente principale.
    • Mostra componenti nascosti
      Consente di visualizzare tutti o singoli componenti. Il numero indica il numero di componenti nascosti correnti.
      L’indicatore nell’esempio seguente mostra che è presente un componente nascosto (il componente di testo in alto).
    • Ripristina layout punto di interruzione
      Consente di tornare al layout predefinito. Questo significa che non sarà utilizzato alcun layout personalizzato.
    • Mobile in nuova riga
      Consente di alzare il componente di una posizione, se lo spazio è sufficiente.
    • Nascondi componente
      Consente di nascondere il componente corrente.

    Nota:

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

    • Rivela componenti
      Selezionate i componenti padre per vedere quanti componenti nascosti contiene; ad esempio, due:

    Potete quindi ripristinare i componenti nascosti selezionando Ripristina tutto:

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