Ajouter des contours à vos éléments de mise en page

Vous pouvez ajouter une bordure unie aux calques de vos designs d’email (par exemple Row, Column, Button, etc.) : cliquez sur le calque, puis appliquez-lui un contour Figma. Il est automatiquement inclus comme bordure CSS dans le HTML final exporté par Emailify.

Pour laisser un peu d’espace entre la bordure et le contenu de votre calque, pensez à appliquer une marge intérieure à ces calques après avoir ajouté la bordure.

Notez que les clients de messagerie ne prennent pas en charge les bordures en dégradé : si vous utilisez un remplissage en dégradé sur votre contour Figma, il est remplacé par la première couleur unie du dégradé dans l’export HTML final.

Ajouter des lignes de séparation entre vos calques de contenu

Pour ajouter une ligne de séparation entre des calques de contenu dans une Column de vos mises en page d’email, ajoutez un élément séparateur Emailify : cliquez sur votre calque « Column », choisissez l’élément « Divider » dans le menu déroulant Quick Add en bas du plugin, puis cliquez sur le bouton Add + pour insérer le calque de ligne de séparation dans votre Column.

Une fois le calque séparateur ajouté à votre Column, faites-le glisser dans le panneau des calques pour choisir entre quels calques il se trouve. Vous pouvez ensuite ajuster sa taille en modifiant la Height du calque dans son panneau de propriétés Figma, ou sa couleur d’arrière-plan en remplaçant le Fill de votre calque dans Figma par n’importe quelle couleur unie.

Notez que les clients de messagerie ne prennent pas en charge les bordures en dégradé : si vous utilisez un remplissage en dégradé sur votre séparateur, il est remplacé par la première couleur unie du dégradé dans l’export HTML final.

Ajouter une marge intérieure à vos calques de séparation

Vous pouvez ajouter une marge intérieure à vos séparateurs : sélectionnez un calque séparateur Emailify dans votre email pendant que le panneau Settings est ouvert, activez l’option Inner Padding, puis saisissez les valeurs de marge à appliquer au calque séparateur sélectionné.

Une marge « intérieure » supplémentaire est alors ajoutée dans votre calque séparateur lors du rendu HTML, ce qui vous permet de définir des marges pour certains calques de texte de votre Column sans affecter les autres calques.

Vous pouvez aussi remplacer sur mobile la marge de n’importe quel calque séparateur Emailify : activez l’option Mobile Padding, puis saisissez les valeurs de marge à appliquer au calque séparateur sélectionné. Elles ne s’appliquent que lorsque votre email HTML est affiché sur mobile.

Arrondir les angles des arrière-plans de vos éléments de mise en page

Si votre élément de mise en page Row ou Column a un remplissage d’arrière-plan (sans contour), vous pouvez arrondir les angles de cet arrière-plan : cliquez sur votre calque, puis définissez une valeur d’arrondi avec la propriété Corner Radius de Figma.

Attention au contenu à base d’images. Si vous appliquez sur mobile un arrondi plus petit que sur desktop, l’image est exportée en JPG carré pour conserver toute la zone de l’image. L’arrondi plus petit peut ainsi s’appliquer sur mobile, mais il n’est pas intégré au PNG. Outlook, qui ne prend pas en charge la propriété CSS border-radius, affiche donc l’image avec des angles droits.

Notez que les clients de messagerie ne prennent pas en charge l’arrondi des contours : si vous arrondissez les angles d’un élément de mise en page qui a un contour Figma, les bordures seront carrées, sans arrondi, dans l’export HTML final.

Points importants sur l’arrondi des angles avec des contours

L’arrondi des angles fonctionne de façon fiable sur les calques Column qui ont aussi un contour. En revanche, il ne fonctionne pas sur les calques Row, car ce sont des tableaux HTML (qui, malheureusement, ne prennent pas en charge l’arrondi des contours).

Malheureusement, l’arrondi des angles n’est pris en charge dans aucune version d’Outlook : ces clients affichent donc toujours des angles droits, quelle que soit la configuration.

Pour de meilleurs résultats, appliquez l’arrondi directement au calque Emailify Column qui a le contour, plutôt qu’à une Row ou à un Wrapper, en gardant à l’esprit que les angles arrondis ne s’afficheront pas dans les versions d’Outlook.