Gestão do layout responsivo (Desktop e Mobile)

✋  Objetivo do artigo
Neste artigo, vai aprender como funciona na prática a gestão do layout responsivo no Builder da Weasy.
Explicamos o que é automático, o que pode ser ajustado, o que não pode ser editado, e quais as boas práticas para garantir um resultado visual correto em desktop e mobile.

1️⃣  Como funciona o responsivo na Weasy (modelo real)

Na Weasy, o responsivo não funciona como dois editores independentes (desktop e mobile).

O sistema baseia-se em:

• • Uma única estrutura (secções, linhas, colunas e módulos);

  • Com regras e opções específicas que afetam o comportamento em mobile.

Ou seja:

• • o layout desktop é a base

  • e o mobile é adaptado através de definições aplicadas à estrutura

⚠️ Importante: Não existe um editor mobile livre onde seja possível redesenhar o site de forma independente.

2️⃣  Vista Desktop e Mobile no Builder

No topo do Builder, pode alternar entre:

• • Vista Desktop

  • Vista Mobile

O que esta vista faz

• • Serve apenas para pré-visualizar o site em ecrãs mais pequenos;

  • Permite validar o resultado final antes de publicar.

O que esta vista não faz

• • Não permite editar o layout diretamente;

  • Não altera o contexto de edição;

  • Não cria uma versão mobile separada.

⚠️ Nota importante: Todas as alterações continuam a ser feitas na estrutura base, através do painel lateral.

3️⃣  Cabeçalho em mobile (comportamento e limitações)

O cabeçalho mobile na Weasy é estruturalmente fixo.

Isto significa que:

• • A disposição dos elementos não pode ser reorganizada;

  • O layout do cabeçalho mobile é definido pelo tema.

O que é possível fazer

Alterar a cor de fundo do cabeçalho;

Definir o logótipo utilizado em mobile.

O que não é possível fazer

• • Reorganizar menus ou ícones;

  • Criar um cabeçalho mobile com layout diferente do desktop;

  • Editar o cabeçalho mobile como uma secção normal.

⚠️ Limitação assumida da plataforma: O cabeçalho mobile não é totalmente personalizável.

4️⃣  Onde se controla realmente o comportamento em mobile

Na Weasy, o mobile é ajustado através de opções específicas existentes nos elementos, e não através da vista mobile.

Estas opções encontram-se no painel lateral de:

• • Secções

  • Linhas

  • Colunas

  • Módulos

E incluem, consoante o contexto:

• • Visibilidade em Desktop e Mobile;

  • Alinhamento ao centro (mobile);

  • Remoção de espaçamento lateral (mobile);

  • Remoção de espaçamento vertical (mobile);

  • Inversão de colunas (mobile);

  • Transformar linha em slideshow (mobile).

☞ Nota: Estas opções existem independentemente da vista (desktop ou mobile) estar ativa.

5️⃣  Visibilidade por dispositivo (ferramenta essencial)

A opção Visibilidade é uma das mais importantes para trabalhar o responsivo na Weasy.

Permite:

• • Mostrar um elemento apenas em desktop;

  • Mostrar um elemento apenas em mobile;

  • Ocultar conteúdos que não funcionam bem em ecrãs pequenos.

Esta funcionalidade está disponível em:

• • Secções

  • Linhas

  • Colunas

  • Módulos

☞ Boa prática: Use a visibilidade para simplificar o layout em mobile e evitar sobrecarga visual.

6️⃣ Grelhas e listagens em mobile (ex.: produtos)

Em módulos de listagem (como produtos), existem definições específicas para mobile, tais como:

• • Número de colunas na grelha (1 ou 2);

  • Espaçamento entre linhas;

  • Comportamento do layout.

☞ Sugestão: Em mobile, grelhas mais simples (1 ou 2 colunas) melhoram a navegação e a legibilidade.

 
7️⃣ A realidade do dia a dia: duplicar secções

Devido às limitações do responsivo automático, é comum ter de:

• • Criar uma secção otimizada para desktop;

  • Duplicar a secção;

  • Ajustar a cópia para mobile;

  • Usar a Visibilidade para:

    • Mostrar uma secção apenas em desktop;

    • Mostrar a outra apenas em mobile.

⚠️ Este é um workaround frequente e aceite na Weasy para obter layouts mobile mais precisos.

⚡ Boas práticas

• • Pense primeiro no layout desktop;

  • Use a vista mobile apenas para validar, não para editar;

  • Evite layouts muito complexos com muitas colunas;

  • Use visibilidade por dispositivo de forma estratégica;

  • Aceite que, em alguns casos, duplicar secções é a melhor solução;

  • Teste sempre em mobile antes de publicar.

✅ Conclusão

O responsivo na Weasy é funcional, mas tem limitações claras — especialmente no cabeçalho e em layouts mais complexos. Ao compreender o modelo real da plataforma e usar corretamente as opções de visibilidade e duplicação de secções, é possível obter um resultado sólido e consistente em desktop e mobile.

Perguntas Frequentes