Modifier l’espacement par défaut de l’Auto Layout entre les éléments de vos calques
En ajustant la propriété Item Spacing de vos calques Row, Column ou d’autres calques de mise en page Emailify (comme un Wrapper, un Hero ou un conteneur d’icônes de réseaux sociaux), vous définissez l’espacement par défaut entre les éléments enfants de ce calque.
Par exemple, une valeur d’espacement de 16 sur un calque Column répartit un espacement égal (16 pixels) entre tous les éléments (par exemple textes, images, boutons, etc.) de ce calque Column.
Ajouter des éléments d’espacement vertical personnalisés à vos colonnes
Si vous avez déjà défini l’espacement par défaut entre les éléments mais avez encore besoin d’un peu d’espace vertical entre certains calques de votre Column, vous pouvez ajouter un élément Spacer spécial d’Emailify : cliquez sur votre calque « Column », choisissez l’élément « Spacer » dans le menu déroulant Quick Add en bas du plugin, puis cliquez sur le bouton Add + pour insérer le calque d’espacement dans votre Column.
Une fois le calque d’espacement ajouté à votre Column, vous pouvez le glisser-déposer dans le panneau des calques pour choisir entre quels calques il se place, puis ajuster sa taille en modifiant sa Height dans le panneau des propriétés du calque Figma.
Les éléments Spacer personnalisés sont aussi entourés de l’Item Spacing par défaut de leur élément parent : tenez-en compte lorsque vous définissez la valeur Height de votre Spacer.
Ajouter un espacement vertical automatique entre les calques de vos colonnes
Pour garder un calque en haut d’une Column et un autre en bas, réglez le dimensionnement vertical de l’Auto Layout de la Column sur Fill container. Réglez ensuite Item spacing sur Auto. Figma répartit l’espace disponible entre les calques à mesure que la longueur du contenu change.
Remplacez la valeur d’espacement entre éléments sur mobile. Si vous utilisez cette méthode pour créer une mise en page verticale scindée sur desktop, ajoutez aussi une valeur de remplacement mobile pour l’Item Spacing : cliquez sur le calque « Column » auquel vous avez appliqué les étapes ci-dessus, cliquez sur le bouton Settings, activez l’option Mobile Item Spacing et saisissez la valeur de votre choix (en pixels), pour que l’espacement entre éléments soit fixe et constant sur mobile (quelle que soit la taille de l’espacement « auto » sur desktop).
Ajouter une marge verticale personnalisée entre les paragraphes de vos calques de texte
Vous pouvez personnaliser l’espacement vertical entre les paragraphes de vos calques de texte Figma : ouvrez le panneau des propriétés de texte de Figma, puis ajustez la valeur Paragraph spacing dans l’onglet Basics. Elle détermine la marge margin-bottom ajoutée aux balises <p> du contenu de ce calque de texte lors de la génération de votre email HTML.
Notez que si vous avez ajouté des lignes de paragraphe supplémentaires (par exemple en appuyant deux fois sur Enter ou Return pour créer un double espace), le paragraphe supplémentaire vide est tout de même inclus, et l’espacement de paragraphe personnalisé est également ajouté en margin-bottom sous celui-ci. Pour contrôler plus finement l’espacement des paragraphes de votre texte, vous pouvez supprimer ces paragraphes supplémentaires ou vides (comme dans la vidéo ci-dessus).
Vous pouvez appliquer des réglages en masse : ouvrez Settings, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.