Ajouter du padding à vos calques de mise en page
Pour définir la hauteur de vos calques de mise en page et l’espace en haut ou en bas de ceux-ci, ajustez la propriété Vertical Padding de l’Auto Layout dans Figma.
Pour définir la largeur du contenu intérieur de vos calques de mise en page et l’espace à gauche ou à droite de ceux-ci, ajustez la propriété Horizontal Padding de l’Auto Layout dans Figma.
Utilisez toujours le Padding pour définir la hauteur d’un calque Row ou Column (avec la propriété de hauteur de l’Auto Layout du calque réglée sur Hug). Les hauteurs Fixed définies dans Figma ne sont pas reprises dans le HTML final, car en HTML la hauteur des éléments dépend de la taille de leur contenu (plus le padding haut et bas) : le Padding est donc le moyen le plus fiable de concevoir visuellement vos emails pour l’export en HTML.
Ajouter un padding extérieur autour de plusieurs calques Row
Si vous voulez ajouter du padding autour de plusieurs rangées, vous pouvez ajouter à votre email un calque de mise en page spécial Wrapper : cliquez sur votre frame Emailify, choisissez Row Wrapper dans le menu déroulant Quick Add, puis cliquez sur Add + pour l’insérer dans votre email comme nouveau calque Figma.
Une fois le Wrapper ajouté à votre design, déplacez vos Row dans ce nouveau calque Wrapper et ajustez les propriétés Horizontal Padding et Vertical Padding de l’Auto Layout dans Figma pour créer un padding extérieur autour des calques Row de votre Wrapper.
Ajouter un padding intérieur à vos calques de texte
Vous pouvez ajouter un padding intérieur au texte : sélectionnez un calque de texte Figma de votre email lorsque le panneau Settings est ouvert, activez l’option Inner Padding, puis saisissez les valeurs de padding à appliquer au calque de texte sélectionné.
Un padding « intérieur » supplémentaire est alors ajouté dans votre calque de texte lors du rendu HTML, ce qui vous permet de définir des valeurs de padding pour certains calques de texte de votre Column sans affecter les autres calques.
Vous pouvez aussi remplacer le padding d’un calque de texte sur mobile : activez l’option Mobile Padding, puis saisissez les valeurs de padding à appliquer au calque de texte sélectionné. Elles ne seront visibles que lorsque votre email HTML est consulté sur mobile.
Ajouter un padding intérieur à vos calques de ligne de séparation
Vous pouvez ajouter un padding intérieur à vos séparateurs : sélectionnez un calque de séparateur Emailify de votre email lorsque le panneau Settings est ouvert, activez l’option Inner Padding, puis saisissez les valeurs de padding à appliquer au calque de séparateur sélectionné.
Un padding « intérieur » supplémentaire est alors ajouté dans votre calque de séparateur lors du rendu HTML, ce qui vous permet de définir des valeurs de padding pour certains calques de texte de votre Column sans affecter les autres calques.
Vous pouvez aussi remplacer le padding d’un calque de séparateur Emailify sur mobile : activez l’option Mobile Padding, puis saisissez les valeurs de padding à appliquer au calque de séparateur sélectionné. Elles ne seront visibles que lorsque votre email HTML est consulté sur mobile.