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.

    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.

    Ridimensionamento mediante la modalità Layout

    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 ( Ripristina 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.

    Definire il punto finale della tabella

  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.

    Tabella e immagine in parallelo in modalità Layout

    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 Seleziona padre, 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 Seleziona padre 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 Configura, quindi selezionate Reattivo - tutti gli elementi della pagina senza navigazione dall'elenco a discesa Layout pannello.

  2. Toccate Salva per salvare le proprietà.

  3. Nella modalità Layout, toccate uno dei componenti del pannello, selezionate Seleziona padre, quindi selezionate il pannello.

  4. Toccate più colonne 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.

più colonne in modalità di layout

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.

NOTA

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

    Disattiva modalità Layout

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

  4. Toccate Salva modifiche per salvare le proprietà del modello.

In questa pagina