Comment empiler les colonnes sur mobile ?
Sélectionnez le calque Row qui contient les calques Column, cliquez sur le bouton Settings dans l’en-tête du plugin, puis activez Stack Columns in this Row. Par défaut, les colonnes de la Row s’empilent alors en une seule colonne sur mobile.
Pourquoi les colonnes ne s’empilent-elles pas sur mobile ?
Les colonnes ne s’empilent pas si Stack Columns in this Row est désactivé pour cette Row, ou si la Row est réglée pour garder plus d’une colonne par rangée sur mobile. Certains composants prédéfinis peuvent aussi avoir l’empilement mobile désactivé par défaut lorsque cela correspond à leur design.
Pour corriger cela, sélectionnez la Row, ouvrez Settings, activez Stack Columns in this Row et choisissez 1 Column Per Row on Mobile si vous voulez que chaque colonne s’affiche sous la précédente.
Par défaut, tous les calques Column de vos designs sont réglés pour s’empiler sur mobile (sauf si vous utilisez un composant prédéfini pour lequel ce réglage est déjà désactivé afin de respecter son intention).
Vous pouvez modifier ce comportement sur mobile en cliquant sur n’importe quel calque Row, puis sur le bouton Settings dans l’en-tête du plugin, et en activant ou désactivant l’interrupteur Stack Columns in this Row.
Si votre Row contient plus de 2 calques Column, mieux vaut sans doute les laisser empilés : sinon, leur contenu risque de devenir très étroit et très petit sur les petits écrans mobiles.
Changer le nombre de colonnes empilées sur mobile
Par défaut, activer l’interrupteur Stack Columns in this Row empile tous les calques Column de votre Row en une seule colonne, mais vous pouvez modifier ce comportement en choisissant l’une des options de la liste déroulante à côté de l’interrupteur dans le plugin :
- 1 Column Per Row on Mobile
- 2 Columns Per Row on Mobile
- 3 Columns Per Row on Mobile
- 4 Columns Per Row on Mobile
Par exemple, si une Row de votre email contient 4 colonnes, vous pouvez choisir l’option 2 Columns Per Row on Mobile : sur mobile, vos colonnes s’empileront alors sur 2 colonnes et 2 rangées (formant une « grille » de 4).
Veillez à ne choisir dans la liste déroulante qu’une valeur adaptée à votre nombre de colonnes. Par exemple, choisir 3 Columns Per Row on Mobile alors que votre Row ne contient que 2 colonnes dans le design donnerait à ces 2 colonnes une largeur de 33% chacune : elles n’occuperaient pas toute la largeur de l’écran sur mobile, et le résultat pourrait paraître cassé ou étrange.
Changer l’alignement vertical des colonnes sur mobile
Si votre Row garde plusieurs calques Column côte à côte sur mobile, vous pouvez aussi changer leur alignement vertical les uns par rapport aux autres dans cette rangée mobile. Pour cela, cliquez sur votre calque Row, activez l’interrupteur Mobile Column Vertical Alignment, puis choisissez Top, Middle ou Bottom dans la liste déroulante à côté.
Cet ajustement de l’alignement vertical sur mobile n’est disponible que lorsque votre Row garde plusieurs colonnes sur mobile, c’est-à-dire :
- soit l’interrupteur Stack Columns In This Row est désactivé ;
- soit l’interrupteur est activé et la liste déroulante est réglée sur plus de 1 Column Per Row on Mobile.
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.