Utilizzare la modalità Layout per ridimensionare i componenti

L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti core per creazione di un nuovo Forms adattivo o aggiunta di Forms adattivo alle pagine AEM Sites. Questi componenti rappresentano un progresso significativo nella creazione di Forms adattivi, garantendo esperienze utente straordinarie. Questo articolo descrive un approccio precedente all’authoring di Forms adattivi utilizzando i componenti di base.

L’interfaccia di authoring di moduli adattivi consente di ridimensionare i componenti utilizzando la 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 nella griglia reattiva. La griglia reattiva è costituita da 12 colonne uguali. L'ombreggiatura dei colori bianco e blu nelle colonne alternative differenzia una colonna dall'altra.

Puoi utilizzare la modalità Layout per ridimensionare i componenti per tutti i tipi di dispositivi, ad esempio desktop, tablet, telefono 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, puoi sovrascrivere le configurazioni derivate automaticamente per definire una configurazione diversa per ciascun 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 a Anteprima opzione. Il modulo viene visualizzato in modalità Layout.

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

2. Crea un nuovo elemento o apri un elemento 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.

   

Ridimensionare i componenti

1. In modalità Layout, tocca il componente per ridimensionarlo. 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: sposta il componente alla riga successiva se all’interno della stessa riga sono presenti più componenti.

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

   NOTA

   Non è possibile ridimensionare i componenti colonna tabella, barra degli strumenti, pulsante barra degli strumenti e 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 tra loro in un modulo adattivo.

1. Inserisci 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 fino alla colonna 7 della griglia reattiva. I componenti tabella e immagine vengono visualizzati in parallelo.

   

   Puoi selezionare il componente Immagine e toccare Mobile in nuova riga nella barra degli strumenti per spostare il componente Immagine alla riga successiva.

Ridimensiona pannelli

Per ridimensionare l’intero pannello al posto dei singoli componenti, effettua le seguenti operazioni:

1. Tocca uno dei componenti del pannello che desideri ridimensionare, quindi seleziona e seleziona 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. 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

Per definire il numero di colonne di un pannello, esegui i seguenti passaggi:

1. In entrata Modifica , tocca il pannello, seleziona , e seleziona Reattivo: tutto ciò che si trova sulla pagina senza navigazione opzione dalla Layout pannello elenco a discesa.

2. Tocca per salvare le proprietà.

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

4. Tocca e seleziona 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 layout reattivi precedenti

Abilita 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, effettua le seguenti operazioni:

1. Seleziona Layout dall'elenco a discesa visualizzato nella parte superiore accanto al Anteprima opzione. Viene visualizzata una conferma per abilitare la modalità Layout.
2. Tocca Sì per attivare Layout per il modulo.

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

Il nuovo layout reattivo per i moduli adattivi 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. Puoi 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 incorpori un frammento con il nuovo layout reattivo in un modulo adattivo con un vecchio layout reattivo, il sistema richiede di abilitare la modalità Layout per il modulo e di reincorporare il frammento.

Per attivare la modalità Layout, seleziona Layout dall'elenco a discesa visualizzato nella parte superiore accanto al Anteprima opzione e tocca Sì per confermare. Seleziona Modifica per reincorporare 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.

Per disattivare la modalità Layout, effettua le seguenti operazioni:

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

2. Seleziona il Contenitore documenti nel riquadro a sinistra e tocca Politica.

   

3. Tocca il Impostazioni di 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