Use a otimização móvel em Klaviyo formulário de registro

Visão geral

Adapte seus formulários do Klaviyo para desktop e dispositivos móveis sem duplicar formulários, ajudando você a publicar mais rapidamente e a melhorar a experiência dos visitantes móveis.

A otimização para dispositivos móveis permite que você crie experiências por dispositivo, editando visualizações para dispositivos móveis e desktop lado a lado e escolhendo se as alterações nos blocos serão sincronizadas entre dispositivos ou se permanecerão específicas para cada dispositivo.

Antes de começar

• Alguns tipos de blocos não suportam a desvinculação entre dispositivos. As exceções incluem: Divulgação, Giro para ganhar, Imagem (tratada separadamente) e Número de telefone (consentimento em várias etapas).

   

Veja como funciona

Alternância de visualização de dois dispositivos

Visualize seu formulário no desktop e no celular lado a lado para ver como as edições se adaptam aos dispositivos em tempo real. Isso reduz a alternância entre as funções e acelera a qualidade do design móvel.

Blocos vinculados vs. blocos não vinculados

Por padrão, os blocos equivalentes no desktop e no celular são vinculados: as alterações em uma visualização são transferidas para a outra. Você pode optar por desvincular blocos para fazer edições somente em dispositivos móveis ou computadores sem duplicar o formulário.

Você pode desvincular/revincular um bloco selecionado clicando no botão de desvinculação na tela ou no botão de desvinculação do painel lateral. 

Quando um bloco é desvinculado:

• As edições se aplicam somente à visualização do dispositivo atual; o bloco do outro dispositivo não é alterado.
• A clonagem de um bloco não vinculado cria o clone somente na visualização do dispositivo atual (a clonagem de um bloco vinculado o duplica em ambos os dispositivos).

Reatribuição de blocos:

• A revinculação cria novamente um novo bloco emparelhado entre os dispositivos. Se o bloco de contrapartida tiver sido excluído, a revinculação o criará para o outro dispositivo, de modo que ambas as visualizações tenham o bloco novamente (você poderá excluir as duplicatas desnecessárias).

teaser por dispositivo

Você pode desvincular o teaser por meio do painel lateral, de modo que o desktop e o celular tenham seu próprio estilo teaser. O relink reinicia a visibilidade de todos os dispositivos para o teaser relinkado.

Passo a passo

Abrir visualização dupla

1. Abra seu formulário no editor.
2. Alterne para a visualização por meio do botão de alternância que mostra o desktop e o celular lado a lado para avaliar o layout e o espaçamento rapidamente.

Desvincular um bloco para edições específicas do dispositivo

1. Selecione o bloco que você deseja personalizar no celular.
2. Escolha Unlink para que as edições no celular não afetem o desktop.
3. Ajuste o layout do seu celular (por exemplo, localização, tamanhos de fonte, espaçamento) para facilitar a leitura em telas menores.
4. Repita o procedimento para os outros blocos, conforme necessário.

Refaça o link quando você quiser um comportamento compartilhado novamente

1. Selecione o bloco e escolha Relink.
2. Se a contraparte estiver faltando no outro dispositivo, o editor a criará automaticamente.
3. Remover blocos duplicados.

Definir teaser por dispositivo (opcional)

1. Abra as configurações do teaser e selecione Desvincular.
2. Configure o conteúdo do teaser ou a visibilidade para desktop e celular de forma independente.

3. Refaça o link mais tarde se você quiser que um teaser seja aplicado a ambos os dispositivos.

    

Práticas recomendadas para formulários móveis

• Priorize telas menores: use fontes maiores e textos concisos.

• Aumente os alvos de toque e o espaçamento vertical para que os botões e entradas sejam fáceis de usar.

• Considere a possibilidade de tela cheia no celular para obter foco e clareza, especialmente em dispositivos menores.

• Mantenha as imagens objetivas. Se uma imagem lateral competir com o conteúdo em telas pequenas, oculte-a ou simplifique o layout.

   

Limitações e comportamentos que você deve conhecer

• Um bloco vinculado é um bloco único com visibilidade de dispositivo definida para desktop e celular. Todas as edições que você fizer em qualquer uma das visualizações atualizam esse bloco compartilhado.

• Quando você desvincula um bloco, o editor cria um segundo bloco sob o capô e define cada bloco para um dispositivo diferente (um somente para desktop e outro somente para celular). A partir desse momento, as edições não serão sincronizadas entre eles.

• A desvinculação não é compatível com alguns tipos de blocos: Divulgação, Girar para ganhar, Imagem (tratada separadamente no trabalho de imagem lateral) e Número de telefone (consentimento em várias etapas).

• A clonagem se comporta de maneira diferente com base no estado do vínculo: os clones de blocos vinculados aparecem em ambos os dispositivos; os clones de blocos não vinculados aparecem somente na visualização do dispositivo atual.

• Quando você faz um relink, o bloco selecionado se torna a fonte da verdade e é definido para ser exibido em ambos os dispositivos. Se estiver faltando uma contraparte, o editor a criará; se houver várias versões, talvez seja necessário remover manualmente os blocos extras que você não deseja manter.

   

Resultado

Agora você deve conseguir criar um formulário de registro otimizado para dispositivos móveis sem criar dois formulários separados. 

Solução de problemas

• Não vejo desvinculação/revinculação em um bloco:
  O tipo de bloco pode não suportar a desvinculação (consulte as exceções).

• Minha alteração no celular afetou o desktop (ou vice-versa):
  Certifique-se de que o bloco esteja desvinculado antes de editar a versão específica do dispositivo.

• Meu relink criou um bloco extra:
  Isso é esperado se a contraparte estiver faltando. Exclua as duplicatas de que você não precisa depois de refazer o link.

   

Próximas etapas

• Guia de introdução com formulário de registro.

• Noções básicas: design de formulários.

• Como fazer um teste A/B em um formulário de registro.