Como empilho as colunas no celular?
Selecione a camada Row que contém as camadas Column, clique no botão Settings no cabeçalho do plugin e ative Stack Columns in this Row. Por padrão, isso empilha as colunas da Row em uma única coluna no celular.
Por que as colunas não estão se empilhando no celular?
As colunas não se empilham se a opção Stack Columns in this Row estiver desativada nessa Row, ou se a Row estiver configurada para manter mais de uma coluna por linha no celular. Alguns componentes predefinidos também podem vir com o empilhamento no celular desativado por padrão, quando isso combina com o design da predefinição.
Para resolver, selecione a Row, abra Settings, ative Stack Columns in this Row e escolha 1 Column Per Row on Mobile se quiser que cada coluna apareça uma embaixo da outra.
Por padrão, todas as camadas Column dos seus designs são configuradas para se empilhar no celular (a não ser que você esteja usando um componente predefinido em que isso já vem desativado para combinar com a proposta dele).
Você pode mudar esse comportamento no celular clicando em qualquer camada Row, depois no botão Settings no cabeçalho do plugin, e ativando ou desativando a opção Stack Columns in this Row.
Se você estiver usando mais de 2 camadas Column na sua Row, vale a pena mantê-las empilhadas; caso contrário, o conteúdo dentro delas pode ficar muito estreito e pequeno em telas de celular menores.
Mudar o número de colunas empilhadas no celular
Por padrão, ativar a opção Stack Columns in this Row empilha todas as camadas Column da Row em uma única coluna, mas, se quiser, você pode mudar isso escolhendo uma das opções no menu suspenso ao lado da opção no 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 exemplo, se você tem no e-mail uma Row com 4 Columns, pode escolher a opção 2 Columns Per Row on Mobile para que as colunas fiquem empilhadas em 2 colunas distribuídas em 2 linhas (formando uma “grade” de 4) quando a linha for vista no celular.
Escolha apenas um valor do menu suspenso que faça sentido para o seu número de colunas. Por exemplo, definir a opção 3 Columns Per Row on Mobile quando a sua Row tem só 2 colunas no design faz com que essas 2 colunas fiquem com 33% de largura cada, o que não ocupa toda a largura da tela no celular e pode parecer quebrado ou estranho.
Mudar o alinhamento vertical das colunas no celular
Se a sua Row continua mantendo várias camadas Column lado a lado no celular, você também pode mudar como essas colunas se alinham verticalmente entre si nessa linha no celular. Para isso, clique na camada Row, ative a opção Mobile Column Vertical Alignment e escolha Top, Middle ou Bottom no menu suspenso ao lado.
Esse ajuste de alinhamento vertical no celular só fica disponível quando a Row ainda tem várias colunas no celular, ou seja, quando:
- a opção Stack Columns In This Row está desativada, ou
- a opção está ativada e o menu suspenso está definido com mais de 1 Column Per Row on Mobile
Você pode aplicar configurações em massa abrindo Settings e selecionando no Figma várias camadas do Emailify do mesmo tipo. Qualquer configuração que você alterar será aplicada a todas as camadas selecionadas.