Visualização em mobile

Com o PageX, você pode editar landing pages em uma visualização em desktop e mobile. Se você selecionar um template vazio, deverá habilitar e personalizar a visualização em mobile por conta própria. Outros templates contém uma visualização em mobile integrada, que você ainda pode modificar livremente. A visualização em mobile é criada automaticamente com base na visualização em desktop, mas o contrário não funciona. Recomendamos começar com a visualização em desktop e, em seguida, ajustar a visualização em mobile.

A visualização em mobile de um template vazio é criada automaticamente com base na visualização em desktop, no entanto, alguns elementos podem exigir ajuste manual. Se a tela do dispositivo mobile não tiver a aparência que você deseja, você pode ajustá-la facilmente estendendo a altura de algumas seções ou movendo os objetos. Lembre-se de que as alterações introduzidas na visualização em mobile não afetam a organização dos elementos e seções na visualização em desktop.

Você pode habilitar facilmente a visualização em mobile ao editar um template vazio. Encontre o ícone do smartphone na barra superior do editor e use o controle deslizante para ativar a visualização em mobile.

Antes de publicar uma landing page, certifique-se de que todo o conteúdo e elementos estejam posicionados corretamente em todas as seções de cada visualização. Caso contrário, organize e edite os elementos você mesmo.

Se você selecionar um template que contém um formulário, verifique a visualização em mobile da página após a conversão, a chamada página de agradecimento. Esse formulário adicionado manualmente tem uma página vazia após a conversão em ambas as visualizações – você mesmo deve configurá-la.

A visualização padrão no editor é a visualização em desktop. A visualização em mobile está intimamente relacionada ao tipo de seção que você usou na landing page, por isso você deve começar a planejar a visualização em mobile desde o início. Você pode habilitar a visualização em mobile a qualquer momento – todos os elementos usados anteriormente serão carregados automaticamente para ela.

Depois de adicionar uma seção ao editor, você pode escolher entre uma única seção ou uma seção dividida em duas, três ou quatro colunas. Ao planejar adicionar uma visualização em mobile, recomendamos que você use algumas seções com mais de uma coluna. As colunas não são visíveis na página após a publicação (não há frames).

1. Encontre o widget Section no lado esquerdo do editor e, em seguida, arraste e solte-o na área ativa de sua landing page.

2. Selecione uma seção com uma, duas, três ou quatro colunas.

3. Os elementos da seção com divisão em colunas são pré-organizados. Na visualização em mobile, as colunas são organizadas uma acima da outra, começando da esquerda para a direita verticalmente. Você pode movê-las livremente – isso não afeta o layout das colunas na visualização em desktop.

4. Lembre-se de que não é possível editar o texto da visualização em desktop a partir do painel de visualização em mobile. Em vez disso, você pode adicionar qualquer widget que ficará visível apenas na visualização em mobile. Além disso, não é possível remover widgets do painel de visualização em mobile ou movê-los entre as seções.

Você também pode trabalhar com a visualização em desktop desabilitada. Encontre o ícone do monitor na barra superior do editor e use o controle deslizante para desligar a visualização em desktop. Depois de terminar de editar o texto, você pode ativar a visualização em desktop novamente.

5. Na visualização em mobile, você pode adicionar novos elementos e ocultar aqueles que você não deseja na visualização em desktop (da mesma forma que o contrário). A visualização em desktop não precisa ser refletida na visualização em mobile exatamente da mesma forma. Você encontrará mais informações sobre como ocultar elementos aqui.

LEMBRE-SE! Se você excluir um item da visualização em desktop, ele também será excluído da visualização em mobile. É por isso que, em vez de excluir, você pode ocultar elementos.

6. Verifique a visualização em mobile da página de agradecimento antes de publicar.

7. O contorno azul do elemento (linha contínua) não deve ultrapassar a área de trabalho do editor (linha tracejada vertical). Se o elemento estiver enquadrado fora da área de trabalho, sua landing page pode não ser exibida corretamente em dispositivos móveis. 

8. A opção rebuild mobile view permite reposicionar elementos na visualização em mobile automaticamente se o layout não atender às suas expectativas após aplicar as alterações na visualização em desktop. Você pode escolher reorganizar os elementos para a landing page inteira (rebuild mobile) ou para uma seção individual (rebuild section).

Especificação de visualização em mobile:

Smartphone: tela menor que 764 px (a maioria dos smartphones).