Layout responsivo¶
O WebAcappella permite que você crie sites responsivos que se ajustam automaticamente a diferentes tamanhos de tela: computador, tablet e celular.
O software funciona como um sistema modular baseado em caixas, linhas e colunas.
Entendendo o modo responsivo¶
Um site responsivo deve se adaptar sem perder a legibilidade ou a ergonomia.
O WebAcappella inclui vários pontos de interrupção para ajustar o layout da página de acordo com o tamanho da tela.
Os três principais modos de exibição disponíveis são :
modo desktop: Exibição em uma tela grande (PC, Mac).
modo Tablet: Adaptação a telas intermediárias.
modo móvel: otimização para smartphones.
Acesso às opções de tela¶
Localize os ícones para os diferentes tamanhos de tela acima da superfície de trabalho.
Clique no ícone para exibir a visualização do site a qualquer momento.
Propriedades responsivas¶
Algumas propriedades podem ser adaptadas dependendo do modo de exibição (Desktop, Tablet, Celular).
Quando uma configuração pode ser modificada para uma tela específica, 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 é a adaptação do tamanho da fonte. Um texto muito grande pode ser difícil de ler em um telefone celular.
Redimensionar colunas¶
Cada linha tem uma ou mais colunas, com largura variando de 1 a 12 unidades.
Ativar o modo de coluna mantendo pressionada a tecla Option (Mac) / Alt (Windows) facilita a seleção de colunas.
Quando uma coluna é selecionada, você pode :
Mova-o para reorganizar a estrutura.
Redimensione-o para ajustar sua posição na linha.
Use um layout fluido: As colunas se reorganizam automaticamente de acordo com a tela.
Verifique o redimensionamento das colunas: elas devem ser adaptadas para evitar que sejam exibidas muito apertadas em dispositivos móveis.
Modo em cascata: empilhamento de itens em uma coluna¶
O modo em 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.
Selecione uma linha.
Acesse os parâmetros de linha (painel direito).
Ative o modo “Cascata” para a tela selecionada no momento.
Os itens em cada coluna são automaticamente empilhados verticalmente.
Use um “Break” para forçar uma quebra de linha¶
O elemento Break pode ser usado para forçar uma linha a ficar abaixo da anterior em uma determinada tela. Essa configuração é herdada em telas menores, garantindo uma melhor adaptação do conteúdo.
Você precisa selecionar uma linha.
Abra a barra de ferramentas de elementos.
Selecione o elemento Break.
Arraste e solte a quebra em uma linha onde você deseja forçar uma quebra de linha.
uma quebra inserida em uma linha estará ativa nesta tela e em tamanhos menores.
Ocultar elementos da tela¶
Se um elemento for muito complexo para uma tela pequena, ele poderá ser ocultado, dependendo do tamanho da tela.
Selecione um item.
Acesse as opções de visibilidade (nas propriedades à direita).
Marque ou desmarque as opções para mostrar ou ocultar o item no Desktop, Tablet ou Celular.
Teste e finalize a tela¶
Alterne para o modo móvel regularmente para verificar a renderização.
Ajuste as margens e o espaçamento para evitar elementos muito apertados.
Use a visualização (Cmd + T / Ctrl + T) para ver a renderização em condições reais.
Melhores práticas¶
Use uma estrutura de coluna flexível para maior adaptabilidade.
Ative o modo Cascata em determinadas linhas para evitar elementos desalinhados no celular.
Use uma quebra em uma linha se ela tiver que passar abaixo das outras de uma determinada tela.
Teste cada modo de exibição antes da publicação.
Otimize imagens e textos para garantir que sejam fáceis de ler em todas as telas.