Utilizzare la modalità Layout per ridimensionare i componenti

L’interfaccia per la creazione di moduli adattivi consente di ridimensionare i componenti utilizzando la modalità Layout . Trascina 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 è costituita da 12 colonne uguali. L’ombreggiatura del colore bianco e blu nelle colonne alternative differenzia una colonna dall’altra.

È possibile 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, è possibile ignorare le configurazioni derivate automaticamente per definire una configurazione diversa per ogni tipo di dispositivo.

Modalità Layout di accesso

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

1. Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Forms & Documents.

2. Crea un nuovo modulo adattivo o apri un modulo adattivo esistente.

3. Seleziona Layout dall'elenco a discesa che viene visualizzato nella parte superiore accanto all'opzione Anteprima. Il modulo viene visualizzato in modalità Layout .

   

Ridimensiona i componenti

1. In modalità Layout, tocca il componente da ridimensionare. I punti blu vengono visualizzati all’inizio e alla fine della griglia reattiva.

2. Trascina i punti blu per definire la posizione del componente nella griglia reattiva.

   

   La barra degli strumenti visualizzata dopo aver toccato i componenti è costituita dalle seguenti opzioni:

   • Elemento padre: Seleziona 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.

   Per annullare tutte le modifiche di ridimensionamento, puoi anche utilizzare l’opzione Ripristina layout punto di interruzione ( ) a livello di pannello.

   NOTA

   Non è possibile ridimensionare la colonna di una tabella, la barra degli strumenti, il pulsante della barra degli strumenti e i componenti dell’area di destinazione utilizzando la modalità Layout. Utilizza la modalità Stile per ridimensionare questi componenti.

Esempio

Obiettivo: inserire un componente tabella e un componente immagine e posizionarli paralleli gli uni agli altri in un modulo adattivo.

1. Inserite i componenti tabella e immagine utilizzando la modalità Modifica nel modulo adattivo. Il componente Immagine viene visualizzato dopo il componente Tabella.

2. Passa alla modalità Layout e tocca il componente Tabella . I punti blu per ridimensionare il componente vengono visualizzati nelle colonne 1 e 12.

3. Trascina il punto blu nella colonna 12 alla colonna 6 della griglia reattiva.

   

4. Allo stesso modo, seleziona il componente Immagine e trascina il punto blu nella colonna 1 alla colonna 7 della griglia reattiva. I componenti tabella e immagine vengono visualizzati in parallelo.

   

   Puoi 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.

Ridimensiona i pannelli

Per ridimensionare l’intero pannello invece dei singoli componenti, esegui i seguenti passaggi:

1. Tocca uno dei componenti del pannello da ridimensionare, seleziona e seleziona la prima opzione nell’elenco a discesa, se il pannello è l’elemento padre diretto del componente.

   I punti blu vengono visualizzati all’inizio e alla fine della griglia reattiva.

2. Trascina 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 alla riga successiva.

Definire il layout a più colonne per un pannello

Esegui i seguenti passaggi per definire il numero di colonne per un pannello:

1. In modalità Modifica, tocca il pannello, seleziona e seleziona Reattivo - tutto ciò che si trova sulla pagina senza navigazione dall’elenco a discesa Layout del pannello.

2. Tocca per salvare le proprietà.

3. In modalità Layout, tocca uno dei componenti del pannello, seleziona e seleziona il pannello.

4. Tocca e seleziona il numero di colonne dall’elenco a discesa. Il numero di colonne può variare da 1 a 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.

Esegui i seguenti passaggi per abilitare la nuova griglia dinamica:

1. Seleziona Layout dall'elenco a discesa che viene visualizzato nella parte superiore accanto all'opzione Anteprima. Viene visualizzata una conferma dell’abilitazione della modalità Layout .
2. Toccare Sì per attivare la modalità Layout del modulo.

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

Il nuovo layout dinamico per i moduli adattivi consente di aggiungere al modulo un frammento di modulo adattivo con il vecchio layout dinamico. 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 dinamico in un modulo adattivo con un vecchio layout dinamico, viene richiesto di abilitare la modalità Layout del modulo e di incorporarlo nuovamente.

Per abilitare la modalità Layout, seleziona Layout dall’elenco a discesa che viene visualizzato nella parte superiore accanto all’opzione Anteprima e tocca Sì per confermare. Seleziona la modalità Modifica per incorporare nuovamente il frammento.

Disattiva la modalità Layout per i moduli con layout reattivo precedente

È possibile disattivare la modalità Layout per i moduli con layout reattivo precedente modificando le proprietà del modello utilizzato nel modulo.

Esegui i seguenti passaggi per disabilitare la modalità Layout :

1. Seleziona Strumenti > Generale > Modelli e apri il modello utilizzato nel modulo in modalità Modifica.

2. Seleziona il Contenitore documento nel riquadro a sinistra e tocca Criterio.

   

3. Tocca la scheda Impostazioni layout e seleziona Disattiva modalità layout.

4. Tocca per salvare le proprietà del modello.