Show Menu
ARGOMENTI×

Utilizzare la modalità Layout per ridimensionare i componenti

L’interfaccia per la creazione di canali Web per la comunicazione adattiva e la comunicazione interattiva consente di ridimensionare i componenti in modalità Layout. Trascinate i punti blu all’interno delle colonne per definire i punti iniziale e finale per posizionare i componenti. I punti blu vengono visualizzati dopo aver toccato il componente all’interno della griglia reattiva. La griglia reattiva è composta da 12 colonne uguali. L'ombreggiatura del colore bianco e blu nelle colonne alternative differisce una colonna dall'altra.
Potete utilizzare la modalità Layout per ridimensionare i componenti per tutti i tipi di dispositivi, ad esempio desktop, tablet, telefoni e altri dispositivi più piccoli. Il tablet deriva automaticamente la configurazione del layout dalla versione desktop e i dispositivi più piccoli derivano la configurazione del layout dal telefono. Tuttavia, potete ignorare le configurazioni derivate automaticamente per definire una configurazione diversa per ciascun tipo di dispositivo.
Se si crea il canale Web utilizzando il canale Stampa come master per una comunicazione interattiva, i componenti disponibili per il ridimensionamento includono anche i sottomoduli e i campi generati automaticamente nel canale Web utilizzando il canale Stampa. Il canale Web mantiene il layout degli elementi del canale di stampa in modalità Layout.

Accesso alla modalità Layout

Selezionate Layout dall’elenco a discesa visualizzato nella parte superiore dell’interfaccia per la creazione di moduli adattivi e comunicazioni interattive accanto all’opzione Anteprima . Il modulo viene visualizzato in modalità Layout.
  1. Accedete all’istanza di creazione di AEM e passate ad Adobe Experience Manager > Moduli > Moduli e documenti .
  2. Create un nuovo modulo adattivo o aprite una comunicazione interattiva.
  3. Selezionate Layout dall’elenco a discesa nella parte superiore accanto all’opzione Anteprima . Il modulo viene visualizzato in modalità Layout.

Ridimensiona i componenti

  1. In modalità Layout, toccate il componente per ridimensionarlo. I punti blu vengono visualizzati all'inizio e alla fine della griglia reattiva.
  2. Trascinate e rilasciate i punti blu per definire la posizione del componente nella griglia reattiva.
    La barra degli strumenti visualizzata dopo aver toccato i componenti è composta dalle seguenti opzioni:
    • Elemento padre: Selezionate l’elemento padre di un componente.
    • Mobile in nuova riga: Se sono presenti più componenti nella stessa riga, sposta il componente sulla riga successiva. Potete annullare tutte le modifiche di ridimensionamento e applicare il layout predefinito al pannello contenente i componenti ridimensionati utilizzando l’opzione Ripristina layout punto di interruzione ( ). Toccate l’elemento padre del componente ridimensionato per visualizzare l’opzione.
    Non è possibile ridimensionare i componenti di colonna di tabella, barra degli strumenti, pulsante della barra degli strumenti e area di destinazione utilizzando la modalità Layout. Utilizzare la modalità Stile per ridimensionare questi componenti.

Esempio

Obiettivo: Inserire un componente tabella e un componente Immagine e posizionarli parallelamente in una comunicazione interattiva.
  1. Inserite i componenti di tabella e immagine utilizzando la modalità Modifica nel canale Web. Il componente Immagine viene visualizzato dopo il componente Tabella.
  2. Passate alla modalità Layout e toccate il componente Tabella. I punti blu per ridimensionare il componente vengono visualizzati nelle colonne 1 e 12.
  3. Trascinate il punto blu nella colonna 12 alla colonna 6 della griglia reattiva.
  4. Analogamente, selezionate il componente Immagine e trascinate il punto blu nella colonna 1 alla colonna 7 della griglia reattiva. I componenti di tabella e immagine vengono visualizzati parallelamente l’uno all’altro.
    Potete selezionare il componente Immagine e toccare l’opzione Mobile in nuova riga disponibile nella barra degli strumenti per spostare il componente Immagine sulla riga successiva.

Ridimensionare i pannelli

Per ridimensionare l’intero pannello invece dei singoli componenti, eseguite i seguenti passaggi:
  1. Toccate uno dei componenti del pannello che desiderate ridimensionare, selezionate , quindi selezionate la prima opzione nell’elenco a discesa, se il pannello è l’elemento padre immediato del componente.
    I punti blu vengono visualizzati all'inizio e alla fine della griglia reattiva.
  2. Trascinate e rilasciate i punti blu per definire la posizione del pannello nella griglia reattiva. Potete ripetere i passaggi 1 e 2 e selezionare per spostare il pannello ridimensionato sulla riga successiva.

Definire il layout a più colonne per un pannello

Per definire il numero di colonne per un pannello, eseguite i seguenti passaggi:
  1. In modalità Modifica , toccate il pannello, selezionate e selezionate Reattivo - tutto sulla pagina senza l’opzione di navigazione dall’elenco a discesa Layout ​pannello.
  2. Toccate per salvare le proprietà.
  3. In modalità Layout , toccate uno dei componenti del pannello, selezionate , quindi selezionate il pannello.
  4. Toccate e selezionate il numero di colonne dall'elenco a discesa. Il numero di colonne può essere compreso tra 1 e 12. Il pannello viene diviso in un layout a più colonne.

Abilita la nuova griglia reattiva per i vecchi layout reattivi

Abilita la nuova griglia reattiva per i moduli creati con AEM Forms 6.4 o versione successiva per ridimensionare i componenti.
Passando alla nuova griglia reattiva, vengono eliminate le proprietà di layout già definite per i componenti utilizzati nel modulo.
Per abilitare la nuova griglia reattiva, effettuate le seguenti operazioni:
  1. Selezionate Layout dall’elenco a discesa nella parte superiore accanto all’opzione Anteprima . Viene visualizzata una conferma per attivare la modalità Layout.
  2. Toccate per attivare la modalità Layout del modulo.

Incorporare un vecchio frammento in un modulo adattivo con un nuovo layout reattivo

Il nuovo layout reattivo per il modulo adattivo consente di aggiungere al modulo un frammento di modulo adattivo con il vecchio layout reattivo. Tuttavia, il nuovo layout elimina le proprietà di layout già definite per i componenti utilizzati nel frammento. È possibile passare alla modalità Layout per definire le proprietà di layout dei componenti utilizzati nel frammento.

Incorporare un frammento con un nuovo layout reattivo in un vecchio modulo adattivo

Se si incorpora un frammento con il nuovo layout reattivo in un modulo adattivo con un vecchio layout reattivo, viene richiesto di abilitare la modalità Layout per il modulo e di incorporarlo di nuovo.
Per attivare la modalità Layout, selezionare Layout dall'elenco a discesa visualizzato nella parte superiore accanto all'opzione Anteprima e toccare per confermare. Per incorporare nuovamente il frammento, selezionare la modalità Modifica .

Disattivazione della modalità Layout per i moduli con layout reattivo precedente

È possibile disattivare la modalità Layout per i moduli con vecchio layout reattivo modificando le proprietà per il modello utilizzato nel modulo.
Per disattivare la modalità Layout, effettuate le seguenti operazioni:
  1. Selezionare Strumenti > Generale > Modelli e aprire il modello utilizzato nel modulo in modalità Modifica .
  2. Selezionate il Contenitore documento nel riquadro a sinistra e toccate Criterio.
  3. Toccate la scheda Impostazioni di layout e selezionate Disattiva modalità di layout.
  4. Toccate per salvare le proprietà del modello.