Layout de caixa/linha/coluna

No WebAcappella, a organização dos elementos segue uma estrutura precisa:

  • As caixas são os principais contêineres que estruturam a página.

  • As linhas se encaixam diretamente nas caixas, permitindo a organização horizontal.

  • As colunas são elementos como qualquer outro (texto, imagem, botão) e devem ser arrastadas em uma linha para organizar o conteúdo verticalmente.

Essa hierarquia possibilita a criação de layouts de página flexíveis e adaptáveis.

Legenda de cores

Na interface do WebAcappella, cada elemento que estrutura a página é representado por uma cor específica:

  • Marrom para as caixas.

  • Rosa para as linhas.

  • Verde para colunas.

Quando um item é selecionado, ele é cercado por uma borda da mesma cor.

Captura ilustrando as cores dos elementos e seu enquadramento na seleção

Criar uma nova página

  1. Crie uma nova página no WebAcappella.

  2. Uma caixa contendo uma linha é colocada ali automaticamente.

    ../../_images/step_10.png

Adicionar colunas a uma linha

  1. Cada linha é dividida em 12 entalhes, o que facilita o ajuste da largura das colunas.

  2. Arraste e solte uma ou mais colunas na linha.

  3. Repita a operação para adicionar várias colunas lado a lado.

  4. Redimensione colunas ajustando suas proporções.

  5. Em cada uma das colunas que você criar, arraste os elementos que deseja (texto, imagem, botão etc.) para ocupar a largura da coluna.

    ../../_images/step_20.png

Adição de caixas e linhas

  1. Você pode arrastar quantas caixas forem necessárias para a mesma página.

    ../../_images/step_30.png

Conselhos práticos

  • Favoreça uma estrutura clara usando várias caixas para organizar a página.

  • Use colunas para equilibrar o layout da página, mas evite usar muitas para não sobrecarregar a tela do celular.

  • Teste regularmente o modo responsivo para garantir que ele seja exibido corretamente em todas as telas.