Como otimizar o layout responsivo no Clickmax?
Selecione Mobile no topo do editor e ajuste o layout da mesma página para a tela menor. Direção, ordem visual, largura, alinhamento, margens e espaçamentos podem ter valores próprios por dispositivo; o conteúdo e a estrutura continuam compartilhados.
Antes de começar: abra a página no editor com uma conta que tenha permissão para editá-la.
- Em Desktop, organize a estrutura inicial com as seções, linhas, colunas e elementos necessários.
- Troque para Mobile no seletor de dispositivo.
- Selecione a Linha ou a Coluna que deseja ajustar. Em Auto Layout, use Direção para escolher a organização vertical ou horizontal e ajuste Distribuição, Alinhamento e Espaçamento.
- Para inverter a sequência visual das colunas de uma linha somente nesse dispositivo, use Inverter posição. Em uma pilha vertical, o último item passa a aparecer primeiro. A inversão não move os elementos na estrutura da página; desmarcá-la mantém o eixo vertical ou horizontal escolhido.
- Selecione cada coluna ou elemento e ajuste Largura, Margem Externa e Margem Interna conforme necessário. No mobile, use o painel de edição para definir a largura; as alças de redimensionamento de colunas são usadas no desktop com direção horizontal e ordem normal.
- Em Visibilidade, escolha Desktop e Mobile, Apenas desktop, Apenas mobile ou Esconder para cada elemento que precise de uma presença diferente nos dispositivos.
- Volte para Desktop e confira que seus ajustes mobile não mudaram essa versão. Salve, reabra a página para revisar os dois dispositivos e publique quando terminar.
Por exemplo: mantenha três colunas lado a lado no desktop e escolha uma pilha vertical, com ordem invertida e espaçamento menor, no mobile. Não é necessário criar outra página para esses ajustes visuais.
O que continua compartilhado
Total de colunas, adicionar ou remover seções e arrastar um elemento para outra coluna ou seção mudam a estrutura da página inteira. Essas ações afetam desktop e mobile, mesmo quando Mobile está selecionado. Trocar as palavras de um texto ou a ação de um botão também vale para ambos.
Para uma composição que exista só em um dispositivo, use elementos ou seções próprios com Apenas desktop ou Apenas mobile. A visibilidade controla onde cada parte aparece; não transforma os dispositivos em duas páginas independentes.
Herdar ou redefinir um ajuste
Enquanto não houver uma personalização mobile, a propriedade acompanha o estilo base ou o comportamento responsivo automático. Depois de personalizá-la no mobile, uma nova edição desktop não substitui essa escolha, mesmo que os valores tenham sido iguais em algum momento.
O ícone de limpar uma propriedade e Redefinir alterações de um grupo de estilos removem os ajustes do dispositivo selecionado. O outro dispositivo é preservado; a visualização atual volta ao valor herdado ou automático.
Se não funcionou
- As colunas continuam lado a lado ou empilhadas de forma diferente: confira a Direção da linha, as larguras das colunas e o dispositivo selecionado. Uma direção escolhida explicitamente prevalece sobre o empilhamento automático.
- A ordem também mudou no desktop: arrastar ou trocar fisicamente as colunas muda a estrutura compartilhada. Para mudar apenas a apresentação mobile, use Inverter posição.
- Não há uma visualização Tablet: o editor oferece Desktop e Mobile. Os ajustes Mobile são aplicados até 480 px; entre 481 e 768 px, as colunas podem se empilhar automaticamente sem usar o perfil Mobile. Confira também essa faixa ao pré-visualizar a página.
- Um elemento sumiu: revise Visibilidade no painel do elemento.