Layout responsivo

O WebAcappella permite criar sites adaptáveis (responsivos), capazes de se ajustar automaticamente a diferentes tamanhos de tela: computador, tablet e celular.

O software funciona como um sistema modular baseado em caixas, linhas e colunas.

Entender o modo responsivo

• Um site responsivo deve se adaptar sem perder a legibilidade nem a ergonomia.
• O WebAcappella inclui vários pontos de ruptura (breakpoints) que permitem ajustar o layout de acordo com o tamanho da tela.
• Os três principais modos de exibição disponíveis são:

✔ Modo Desktop: exibição em tela grande (PC, Mac).

✔ Modo Tablet: adaptação a telas intermediárias.

✔ Modo celular: otimização para smartphones.

Acessar as opções de tela

1. Localize os ícones correspondentes aos diferentes tamanhos de tela acima da área de trabalho.
2. Clique no ícone para visualizar o site a qualquer momento.

Propriedades responsivas

1. Algumas propriedades podem ser adaptadas de acordo com o modo de exibição (desktop, tablet, celular).
2. Quando uma configuração pode ser alterada para um ecrã específico, um ícone de modo responsivo é exibido ao lado do parâmetro.

Ao ativar essas opções, cada modo de exibição terá sua própria configuração, sem afetar os outros.

Outro exemplo de uso: adaptar o tamanho das fontes. Um texto muito grande pode ser difícil de ler no celular.

Redimensionar as colunas

Cada linha contém uma ou mais colunas, cuja largura varia de 1 a 12 unidades.

Ativar o modo colunas mantendo pressionada a tecla Opção (Mac) / Alt (Windows) facilita a seleção das colunas.

Quando uma coluna é selecionada, você pode:

• Movê-la para reorganizar a estrutura.
• Redimensioná-la para ajustar seu tamanho na linha.
• Usar um layout fluido: as colunas se reorganizam automaticamente de acordo com a tela.
• Verificar o redimensionamento das colunas: elas devem ser adaptadas para evitar uma exibição muito apertada em dispositivos móveis.

Modo Cascata: empilhar os elementos em uma coluna

O modo Cascata permite forçar o empilhamento vertical dos elementos contidos em uma coluna em uma determinada tela.

É particularmente útil em dispositivos móveis para evitar um layout horizontal muito apertado e melhorar a legibilidade.

1. Selecione uma linha.
2. Acesse as configurações da linha (painel à direita).
3. Ative o modo “Cascata” para a tela atualmente selecionada.

• Os elementos de cada coluna são automaticamente empilhados verticalmente.

Use um “Break” para forçar um retorno à linha

O elemento Break permite forçar uma linha a passar abaixo da anterior em um determinado ecrã. Esta configuração é herdada em ecrãs de tamanhos inferiores, garantindo uma melhor adaptação do conteúdo.

• É necessário selecionar uma linha.

1. Abra a barra de ferramentas dos elementos.
2. Selecione o elemento Break.

1. Arraste e solte o Break em uma linha onde deseja forçar um retorno à linha.

⚠ Um Break inserido em uma linha ficará ativo nessa tela e nas telas inferiores.

Ocultar elementos de acordo com a tela

Se um elemento for muito complexo para um ecrã pequeno, pode ser ocultado de acordo com o tamanho do ecrã.

1. Selecione um elemento.
2. Acesse as opções de visibilidade (nas propriedades à direita).
3. Marque ou desmarque as opções para exibir ou ocultar o elemento no desktop, tablet ou celular.

Teste e finalize a exibição

• Alterne regularmente para o modo móvel para verificar o resultado.
• Ajuste as margens e espaçamentos para evitar elementos muito próximos uns dos outros.
• Use a visualização (Cmd + T / Ctrl + T) para ver o resultado em condições reais.

Boas práticas

• Use uma estrutura em colunas flexíveis para uma melhor adaptabilidade.
• Ative o modo Cascata em algumas linhas para evitar que os elementos fiquem desalinhados no celular.
• Use uma quebra em uma linha se ela precisar passar abaixo das outras a partir de uma determinada tela.
• Teste cada modo de exibição antes da publicação.
• Otimize as imagens e os textos para garantir uma boa legibilidade em todos os ecrãs.