In questa pagina: scopri come regolare l’allineamento verticale e la spaziatura interna di colonne e strutture in E-mail Designer, incluso come correggere la spaziatura interna dei frammenti residui per un rendering mobile corretto.
In questo esempio regoleremo la spaziatura e l’allineamento verticale all’interno di un componente struttura composto da tre colonne.
-
Seleziona il componente struttura direttamente nel messaggio e-mail o utilizzando la Struttura di navigazione disponibile nel menu a sinistra.
-
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.
-
In Allineamento, selezionare Superiore, Centro o Inferiore.
-
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.
-
Procedi in modo simile per regolare l’allineamento e la spaziatura delle altre colonne.
-
Salva le modifiche.
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:
-
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.
-
Dopo aver selezionato l’elemento nella breadcrumb, passa alla scheda Stili a destra.
-
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.
-
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.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to adjust the vertical alignment and padding of columns in a structure component in the Email Designer, and how to locate and fix residual fragment padding for correct mobile rendering using breadcrumb navigation.
Intents:
- Adjust vertical alignment (Top, Middle, Bottom) of a column in a structure component
- Set padding for all sides, or different padding per side, of a column
- Fine-tune padding by breaking synchronization with the lock icon
- Identify and remove hidden or residual fragment padding affecting mobile rendering
Glossary:
- Alignment: A Styles-tab setting for a column, with options Top, Middle, or Bottom (product-specific)
- Padding: A Styles-tab setting defining padding for all sides of a column, with an option for Different padding for each side (product-specific)
- Navigation tree: The left-hand menu used to select a structure component or column (product-specific)
- Breadcrumb navigation: Used to select each parent structure or column within a fragment to locate hidden padding or margin specific to mobile devices (product-specific)
Guardrails:
- Residual or hidden fragment padding is particularly common when fragments have been unlocked or when inheritance has been broken, as leftover styling can remain in the underlying column or text components.
- Accumulated styling from repeatedly inserting and removing fragments is expected behavior; verify padding values using breadcrumb navigation, especially when targeting mobile devices.
- For Gmail on Android, use column padding rather than large fixed margins, and use a smaller image width, because Gmail on Android often renders oversized images and margins incorrectly.
Terminology:
- Canonical name: Vertical alignment and padding — Acronym: n/a — variants: alignment and padding, column padding
- Synonyms: “Different padding for each side” = “fine tune the padding”
- Do not confuse: “Alignment” (Top/Middle/Bottom vertical positioning) ≠ “Padding” (space on the sides of a column)
FAQ:
- Q: What vertical alignment options are available for a column? — Top, Middle, or Bottom.
- Q: How do I set different padding on each side of a column? — Select Different padding for each side and click the lock icon to break synchronization.
- Q: Why does my fragment have extra padding on mobile but not desktop? — Leftover styling can remain when fragments are unlocked or inheritance is broken; use the Navigation tree or breadcrumb to select parent structures/columns and remove or readjust the padding.
- Q: How should I handle images and dividers for Gmail on Android? — Use column padding rather than large fixed margins and a smaller image width, since Gmail on Android often renders oversized images and margins incorrectly.