Regolare l’allineamento verticale e la spaziatura alignment-and-padding

In questo esempio regoleremo la spaziatura e l’allineamento verticale all’interno di un componente struttura composto da tre colonne.

  1. Seleziona il componente struttura direttamente nel messaggio e-mail o utilizzando la Struttura di navigazione disponibile nel menu a sinistra.

  2. Dalla barra degli strumenti, fare clic su Selezionare una colonna e scegliere quella che si desidera modificare. Puoi anche selezionarla dall’albero della struttura.

    I parametri modificabili per tale colonna vengono visualizzati nella scheda Stili.

  3. In Allineamento, selezionare Superiore, Centro o Inferiore.

  4. In Spaziatura interna, definire la spaziatura per tutti i lati.

    Selezionare Spaziatura interna diversa per ogni lato per ottimizzare la spaziatura. Fai clic sull’icona del lucchetto per interrompere la sincronizzazione.

  5. Procedi in modo simile per regolare l’allineamento e la spaziatura delle altre colonne.

  6. Salva le modifiche.

TIP
Durante la progettazione di contenuti e-mail per Gmail su dispositivi Android, accertati che le immagini e i divisori utilizzino la spaziatura interna delle colonne anziché margini fissi di grandi dimensioni. In Android, spesso Gmail esegue il rendering di immagini e margini di dimensioni eccessive in modo errato, causando un overflow del layout o una riduzione delle linee di divisione. Utilizza una larghezza immagine inferiore o utilizza la spaziatura interna basata su colonne per una visualizzazione coerente.

Gestire la spaziatura interna dei frammenti con la navigazione delle breadcrumb fragment-padding-breadcrumb

Quando si lavora con frammenti nel Designer e-mail, è possibile che la spaziatura nascosta o residua influisca sul rendering mobile in modo diverso rispetto al desktop. Ciò è particolarmente comune quando i frammenti sono stati sbloccati o quando l'ereditarietà è stata interrotta, in quanto lo stile rimanente può rimanere nella colonna o nei componenti di testo sottostanti.

Per identificare e modificare la spaziatura rimanente nei frammenti:

  1. Utilizza la struttura di navigazione o fai clic direttamente sugli elementi nell'editor per selezionare ogni struttura o colonna padre all'interno del frammento. Questo consente di individuare una spaziatura nascosta o un margine specifico per i dispositivi mobili.

  2. Dopo aver selezionato l'elemento nella breadcrumb, passa alla scheda Stili a destra.

  3. Rivedi le impostazioni di Spaziatura interna e rimuovi o regola la spaziatura interna in base alle esigenze per ottenere il corretto allineamento per dispositivi mobili.

  4. Se i problemi di allineamento persistono durante il riutilizzo dei frammenti, ripeti questo processo per altre colonne o componenti di testo all’interno del frammento.

NOTE
Questo comportamento è previsto quando i frammenti vengono inseriti e rimossi ripetutamente, in quanto le regole di stile possono accumularsi. Verifica sempre i valori di spaziatura tramite la navigazione tra breadcrumb, in particolare quando esegui il targeting di dispositivi mobili.
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76