Reordenar colunas/conteúdo no celular

Por que reordenar colunas em dispositivos móveis é importante

Por padrão, as colunas em uma linha que é disposta horizontalmente na área de trabalho normalmente será empilhada verticalmente no celular. No entanto, às vezes a ordem automática das colunas pode não se alinhar ao layout desejado. 

Por exemplo:

Você é dono de uma loja Shopify. Você projetou um layout de desktop com uma linha de 2 colunas:

• Coluna 1 – A imagem
• Coluna 2 – Pensamento especializado e botão CTA

No desktop, esse layout flui bem. Mas no celular, o conteúdo empilha verticalmente por padrão. Aqui está o problema:

• A imagem aparece primeiro, mas os depoimentos aparecem antes do botão CTA, empurrando o CTA mais para baixo na página.
• Os usuários podem perder o interesse antes de chegar ao CTA, afetando as taxas de conversão.

À medida que sua página faz a transição do desktop para o celular, garantir a ordem correta das colunas ajuda a manter o fluxo e a legibilidade. 

Um layout móvel bem organizado melhora a experiência do usuário, facilitando a navegação e o envolvimento dos visitantes com seu conteúdo. 

Veja como você pode reordenar colunas no celular em algumas etapas simples:

Como reordenar colunas no celular (passo a passo)

Passo 1: Comece abrindo sua página no Editor GemPages. Navegue até a linha onde o conteúdo que você deseja reordenar está localizado.

Passo 2: Selecione a visualização móvel.

Passo 3: Clique na linha que contém as colunas que você quer ajustar. Isso exibirá o painel de configurações da linha no lado esquerdo do editor.

Passo 4: Reordenar as colunas que melhor se adapta ao layout do seu celular. 

Isso lhe dá controle total sobre como o conteúdo aparece em uma pilha vertical.

Passo 5: Após confirmar a nova ordem das suas colunas, clique em 'Salve ' e depois 'Publicar' suas alterações para aplicá-las ao vivo em seu site.

Dicas finais

• Teste seu layout em vários tamanhos de tela móvel para melhores resultados.
  
• Guarda CTAs e mensagens-chave acima da dobra para maior visibilidade.
  
• Considerar duplicando linhas para desktop vs. celular se a lógica do layout se tornar muito complexa.