Como deixo um e-mail do Emailify responsivo no celular?
O Emailify exporta HTML responsivo automaticamente, e você pode refinar o comportamento no celular com ajustes para celular em camadas específicas do Emailify. Comece pelo frame de e-mail de desktop e depois use a pré-visualização do plugin para conferir a versão para celular antes de exportar.
Onde defino os ajustes para celular?
Selecione a camada do Emailify que você quer ajustar, clique no botão Settings no cabeçalho do plugin e use os controles de ajuste para celular dessa camada. As camadas de texto, Column, Row, Hero, Wrapper, de imagem e de botão podem mostrar controles para celular diferentes, conforme o tipo de camada selecionado.
Por que o layout de celular começa em outra largura?
O Emailify usa um único breakpoint responsivo, baseado na largura do frame de desktop do Emailify no Figma. Se o seu frame do Emailify tem 600px de largura, os estilos de celular começam a partir de 599px para baixo. Se o frame for mais largo, o breakpoint de celular também será maior.
Para adicionar ajustes de estilo para celular, clique em qualquer camada do Emailify no seu design, depois no botão Settings no cabeçalho do plugin e aplique os ajustes de estilo para celular que quiser à camada selecionada.
Por exemplo, ao clicar em uma camada de texto do e-mail, você pode ajustar para celular o tamanho da fonte, a altura da linha, o espaçamento entre letras, o espaçamento entre parágrafos, o padding e o alinhamento. Já ao clicar em uma camada Row, você pode ajustar o padding, o espaçamento entre as colunas, se as colunas devem ser empilhadas no celular (ou não) e, quando várias colunas continuam dividindo uma linha no celular, o alinhamento vertical delas no celular.
Você pode pré-visualizar seus ajustes para celular com o recurso de pré-visualização do plugin Emailify.
Breakpoint de celular dos e-mails. Os e-mails HTML exportados pelo Emailify têm um único “breakpoint”, definido automaticamente pela largura do frame de desktop no Figma. Por exemplo, se o seu frame do Emailify tem 600px, os estilos e ajustes para celular passam a aparecer a partir de 599px para baixo.
Em geral, recomenda-se manter a largura do e-mail entre 600px e 640px, porque os painéis de leitura de alguns clientes ou apps de e-mail podem ter menos de 700px de largura e acabar renderizando os estilos de celular em vez do layout de desktop.
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.