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 visualizzato nella parte superiore dell’interfaccia di authoring dei moduli adattivi accanto al Anteprima opzione . Il modulo viene visualizzato in modalità Layout .

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

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

3. Seleziona Layout dall’elenco a discesa visualizzato nella parte superiore accanto al Anteprima opzione . 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.

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

   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: Desideri 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 il pulsante Mobile in nuova riga per spostare il componente Immagine sulla riga successiva, disponibile nella barra degli strumenti.

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 , quindi 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.
   Puoi 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 Modifica , tocca il pannello, seleziona , quindi seleziona Reattivo : tutto ciò che si trova sulla pagina senza navigazione dall'opzione Layout del pannello elenco a discesa.

2. Tocca per salvare le proprietà.

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

4. Tocca e selezionare 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 visualizzato nella parte superiore accanto al Anteprima opzione . Viene visualizzata una conferma dell’abilitazione della modalità Layout .
2. Tocca Sì per abilitare Layout modalità del modulo.

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

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 attivare la modalità Layout, selezionare Layout dall’elenco a discesa visualizzato nella parte superiore accanto al Anteprima e tocca Sì per confermare. Seleziona 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 aprire il modello utilizzato nel modulo in Modifica modalità.

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

   

3. Tocca Impostazioni layout e seleziona Disattiva modalità Layout.

4. Tocca per salvare le proprietà del modello.

Risorse Business.Adobe.com

Automated Onboarding Cms Cloud Content Intelligence Theme Editor Version History Dynamic Media