Utilizzare la modalità Layout per ridimensionare i componenti

L’interfaccia per la creazione di moduli adattivi 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.

Modalità Layout di accesso

Selezionare Layout dall'elenco a discesa visualizzato nella parte superiore dell'interfaccia di creazione dei moduli adattivi accanto all'opzione Anteprima. Il modulo viene visualizzato in modalità Layout.

1. Accedete all'istanza di creazione AEM e andate a Adobe Experience Manager > Forms > Forms & Documents.

2. Create un nuovo modulo o aprite un modulo adattivo esistente.

3. Selezionare Layout dall'elenco a discesa visualizzato 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.
   • Ripristina layout punto di interruzione: Annulla tutte le modifiche di ridimensionamento e applica il layout predefinito al componente.
   • Mobile in nuova riga: Se sono presenti più componenti nella stessa riga, sposta il componente sulla riga successiva.

   È inoltre possibile utilizzare l'opzione Ripristina layout punto di interruzione ( ) a livello di pannello per annullare tutte le modifiche al ridimensionamento.

   NOTA

   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 paralleli l’uno all’altro in un modulo adattivo.

1. Inserite i componenti di tabella e immagine utilizzando la modalità di modifica nel modulo adattivo. 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.
   È possibile 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 , quindi selezionate Reattivo - tutti gli elementi della pagina senza navigazione dall'elenco a discesa Layout pannello.

2. Toccate per salvare le proprietà.

3. Nella 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

Abilitare la nuova griglia reattiva per i moduli creati con AEM Forms 6.4 o versione precedente per ridimensionare i componenti.

Per abilitare la nuova griglia reattiva, effettuate le seguenti operazioni:

1. Selezionare Layout dall'elenco a discesa visualizzato nella parte superiore accanto all'opzione Anteprima. Viene visualizzata una conferma per attivare la modalità Layout.
2. Toccate Sì 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 Sì per confermare. Selezionare la modalità Modifica per incorporare nuovamente il frammento.

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. Selezionare il Contenitore documento nel riquadro a sinistra e toccare Criterio.

   

3. Toccate la scheda Impostazioni layout e selezionate Disattiva modalità layout.

4. Toccate per salvare le proprietà del modello.