Deixe seu site bonito em celulares e tablets
Veja como sua loja aparece em tablets e celulares, oculte blocos em telas pequenas e ajuste a posição de um bloco apenas para um tamanho de tela.
A maioria dos compradores visita uma loja pelo celular, então suas páginas precisam funcionar em todos os tamanhos. Você cria o design uma vez, e a Payly adapta a página para tablets e celulares. Este artigo explica o que acontece sozinho e como alterar isso quando você quiser que um bloco se comporte de outra forma em uma tela menor.
Como seu layout se adapta
Os blocos ficam em células de uma grade de 12 colunas, nunca em posições fixas em pixels, então não podem se sobrepor em uma tela pequena. A página muda de layout em dois pontos:
- Os Tablets (telas com menos de 1024 pixels de largura) mantêm a mesma grade. Um bloco permanece onde está, a menos que você o mova para tablets.
- Os Celulares (760 pixels ou menos) colocam cada bloco em sua própria linha, em largura total. Os blocos se empilham de cima para baixo, na ordem em que você os lê no computador: de cima para baixo e, depois, da esquerda para a direita.
Alguns blocos se adaptam ainda mais. Os links do cabeçalho se recolhem atrás de um botão de menu, as grades passam a ter uma só coluna, e as galerias e as faixas de logotipos mostram duas colunas. O resultado é uma loja que funciona no celular sem nenhuma configuração extra.
Alterne entre tamanhos de tela
- Na barra superior do editor, clique em Tablet ou Celular. A página se estreita para mostrar como fica nesse tamanho.
- Percorra a página em busca de qualquer coisa que não fique bem. Role a tela e selecione os blocos como de costume.
- Clique em Computador para voltar ao layout em tamanho completo.
Esses botões fazem mais do que uma visualização. Eles também escolhem qual layout você está editando. Quando você muda para Tablet ou Celular, uma mensagem lembra que as alterações valem apenas para esse tamanho. Tudo o que você alterar ali não afeta o layout do computador.
Oculte um bloco em telas pequenas
Uma foto grande ou um bloco decorativo longo pode sobrecarregar um celular. Você pode ocultá-lo em telas pequenas e mantê-lo no computador.
- Clique em Celular (ou Tablet) na barra superior.
- Selecione o bloco.
- No painel de configurações, abra Tamanho e posição.
- Ative Ocultar no celular (ou Ocultar no tablet). O bloco some dessa visualização e não deixa espaço vazio na página publicada.
Um bloco oculto em tablets também fica oculto em celulares, a menos que você desative o interruptor de novo enquanto estiver na visualização Celular. Para ocultar um bloco em todas as telas, use Ocultar este bloco em Computador.
Posicione um bloco de forma diferente em um tamanho
- Escolha Tablet ou Celular na barra superior.
- Selecione o bloco e abra Tamanho e posição.
- Altere Começa na coluna, Largura em colunas, Começa na linha ou Altura em linhas, ou clique em Preencher toda a largura. Você também pode arrastar e redimensionar o bloco na página.
A barra no topo de Tamanho e posição informa qual layout você está editando. Ela mostra Herdado enquanto o bloco segue o tamanho maior, e um botão Redefinir quando o bloco passa a ter configurações próprias. Clique em Redefinir para que o bloco volte a seguir o tamanho maior. Clique em Usar este layout em todas as telas para copiar o layout atual para todos os tamanhos.
A barra superior também conta os blocos que diferem do layout do computador, por exemplo 1 bloco difere no celular. Clique na contagem para ir de um desses blocos ao seguinte.
Mantenha um bloco igual em todas as telas
Ative Igual em todas as telas em Tamanho e posição para dar a um bloco um único layout em todo lugar. As configurações que ele tinha para tablet ou celular são removidas, e as edições seguintes valem para todos os tamanhos de uma vez.
Observação: Mover um bloco para outra seção altera o bloco em todos os tamanhos de tela, por isso a Payly só permite isso em Computador. Para posicionar um bloco de forma diferente nos celulares, adicione-o às duas seções e oculte, em cada tamanho, aquele que você não quer.
Confira o resultado
Use Visualizar para navegar pelas suas páginas nas larguras de celular e tablet, e veja a loja publicada em um celular de verdade antes de divulgá-la. Veja Visualize seu site antes de publicar.