¿Cómo apilo las columnas en móvil?
Selecciona la capa Row que contiene las capas Column, haz clic en el botón Settings de la cabecera del plugin y activa Stack Columns in this Row. Por defecto, esto apila las columnas de la Row en una sola columna en móvil.
¿Por qué no se apilan las columnas en móvil?
Las columnas no se apilan si Stack Columns in this Row está desactivado en esa Row o si la Row está configurada para mantener más de una columna por fila en móvil. Algunos componentes predefinidos también pueden tener el apilado en móvil desactivado por defecto cuando así encaja con su diseño.
Para solucionarlo, selecciona la Row, abre Settings, activa Stack Columns in this Row y elige 1 Column Per Row on Mobile si quieres que cada columna aparezca debajo de la anterior.
Por defecto, todas las capas Column de tus diseños están configuradas para apilarse en móvil (salvo que uses un componente predefinido que ya tenga esta opción desactivada para respetar su intención).
Puedes cambiar este comportamiento en móvil haciendo clic en cualquier capa Row, haciendo clic en Settings en la cabecera del plugin y activando o desactivando el interruptor Stack Columns in this Row.
Si usas más de 2 capas Column en tu Row, quizá te convenga dejarlas apiladas; si no, el contenido que tienen dentro puede quedar muy estrecho y pequeño en las pantallas de móvil más pequeñas.
Cambiar el número de columnas apiladas en móvil
Por defecto, al activar el interruptor Stack Columns in this Row todas las capas Column de tu Row se apilan en una sola columna, pero si quieres puedes cambiarlo eligiendo cualquiera de las opciones del desplegable que hay junto al interruptor en el 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
Por ejemplo, si tienes en tu email una Row con 4 Columns, puedes elegir la opción 2 Columns Per Row on Mobile para que tus columnas se apilen en 2 columnas repartidas en 2 filas (como una "cuadrícula" de 4) cuando la fila se vea en móvil.
Asegúrate de elegir solo un valor del desplegable que tenga sentido para tu número de columnas. Por ejemplo, si eliges la opción 3 Columns Per Row on Mobile y tu Row solo tiene 2 columnas en el diseño, esas 2 columnas tendrán un ancho de 33% cada una, no ocuparán todo el ancho de la pantalla en móvil y pueden verse rotas o raras.
Cambiar la alineación vertical de las filas de columnas en móvil
Si tu Row sigue manteniendo varias capas Column una al lado de otra en móvil, también puedes cambiar cómo se alinean verticalmente entre sí esas columnas en esa fila móvil. Para ello, haz clic en tu capa Row, activa el interruptor Mobile Column Vertical Alignment y elige Top, Middle o Bottom en el desplegable que hay a su lado.
Este ajuste de alineación vertical en móvil solo está disponible cuando tu Row sigue teniendo varias columnas en móvil, es decir, cuando:
- el interruptor Stack Columns In This Row está desactivado, o
- el interruptor está activado y en el desplegable hay más de 1 Column Per Row on Mobile
Puedes aplicar ajustes en bloque abriendo Settings y seleccionando en Figma varias capas de Emailify del mismo tipo. Cualquier ajuste que cambies se aplicará a todas las capas seleccionadas.