Utilizzare la modalità Layout per ridimensionare i componenti

L’interfaccia di creazione del canale web di comunicazione interattiva 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.

NOTA

Se si sta creando il canale Web utilizzando Canale di stampa come master per una comunicazione interattiva, i componenti disponibili per il ridimensionamento includono anche i sottomoduli e i campi generati automaticamente nel canale Web utilizzando il canale Stampa. Il canale Web mantiene il layout degli elementi del canale Stampa in modalità Layout.

Modalità Layout di accesso

Seleziona Layout dall’elenco a discesa visualizzato nella parte superiore dell’interfaccia di authoring delle comunicazioni interattive 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 una nuova o apri una Comunicazione interattiva 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 .

    Modalità Layout per le comunicazioni interattive

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.

    Ridimensionamento utilizzando la modalità Layout

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

    • Elemento padre: seleziona l’elemento principale di un componente.
    • Mobile in nuova riga: sposta il componente sulla riga successiva se sono presenti più componenti nella stessa riga.

    È possibile annullare tutte le modifiche di ridimensionamento e applicare il layout predefinito al pannello contenente i componenti ridimensionati utilizzando l’opzione Ripristina layout punto di interruzione ( Ripristina punto di interruzione). Toccare l’elemento padre del componente ridimensionato per visualizzare l’opzione .

    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 tra loro in una comunicazione interattiva.

  1. Inserire i componenti tabella e immagine utilizzando la modalità Modifica nel canale Web di una comunicazione interattiva. 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.

    Definire il punto finale della tabella

  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.

    Tabella e immagine in parallelo in modalità Layout

    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 Seleziona elemento padre 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 Seleziona padre 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 Configura e seleziona Reattivo - tutto ciò che si trova sulla pagina senza navigazione dall’elenco a discesa Layout del pannello.

  2. Tocca Salva per salvare le proprietà.

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

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

in modalità layout a più colonne

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.

    Disattiva modalità Layout

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

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

In questa pagina