Crie layouts com contêineres e grades
Agrupe blocos em um contêiner ou coloque-os nas células de uma grade para criar cartões, colunas e outros layouts que você estiliza e move como uma peça só.
Contêineres e grades são blocos que guardam outros blocos. Um contêiner agrupa blocos em uma caixa, à qual você pode dar uma cor de fundo e que você move como uma peça só. Uma grade organiza os blocos em uma tabela de linhas e colunas. Você encontra os dois no grupo Layout do painel de blocos.
Qual usar
- Use um contêiner para um cartão, um painel com fundo colorido ou um grupo de blocos que deve ficar junto.
- Use uma grade quando quiser itens alinhados em colunas iguais, como três destaques curtos lado a lado.
Os dois dão aos blocos de dentro o seu próprio espaço. Se você só precisa distribuir blocos pela página, não precisa de nenhum deles: coloque os blocos direto em uma seção.
Monte um contêiner
- No painel de blocos, encontre Contêiner em Layout.
- Arraste-o para uma seção e solte onde quiser. Um contêiner vazio mostra Solte blocos aqui.
- Arraste um bloco do painel de blocos até o contêiner. O contêiner ganha um contorno azul para mostrar que o bloco vai ficar dentro dele.
- Solte o botão do mouse. O bloco aparece dentro do contêiner e ocupa toda a largura dele.
- Adicione mais blocos da mesma forma.
Você também pode arrastar para dentro de um contêiner blocos que já estão na página, e arrastá-los de volta para fora. Um contêiner pode conter outros contêineres. Dentro de um contêiner, você move e redimensiona os blocos exatamente como faz na página. Veja Adicione, mova e redimensione blocos.
Importante: Excluir um contêiner exclui todos os blocos que estão dentro dele. Se isso acontecer por engano, clique em Desfazer na barra superior.
Mude a aparência de um contêiner
- Clique no contêiner, não em um bloco dentro dele. Um bom lugar é o espaço vazio entre dois dos blocos.
- No painel de configurações, abra Geral e Aparência.
Em Geral:
- Layout interno define como os blocos são organizados. Grade livre (12 colunas) permite posicionar os blocos em qualquer lugar, como em uma seção. Empilhado coloca os blocos um embaixo do outro. Lado a lado coloca os blocos em uma linha e os passa para a linha seguinte quando não há espaço.
- Espaço entre células é o espaço entre os blocos.
- Alinhar itens define onde os blocos ficam quando o contêiner é mais alto do que eles: Esticar, Topo, Meio ou Base.
Em Aparência: Cor de fundo, Cor da borda, Raio dos cantos, Espaçamento horizontal interno e Espaçamento vertical interno (o espaço entre a borda e os blocos) e Altura mínima.
Observação: Você só pode soltar novos blocos em um contêiner cujo Layout interno seja Grade livre (12 colunas). Para preencher um contêiner Empilhado ou Lado a lado, mude-o para Grade livre, solte os blocos e depois volte à opção anterior.
Monte uma grade
- Arraste Grade do grupo Layout para uma seção. Uma grade nova tem 3 colunas e 2 linhas, desenhadas como células tracejadas.
- Com a grade selecionada, abra Geral no painel de configurações. Use Número de colunas e Número de linhas para definir o formato. Cada um pode ir de 1 a 8.
- Arraste um bloco até a célula onde você quer colocá-lo. A caixa azul mostra em qual célula ele vai cair.
- Solte o botão do mouse.
- Se o bloco se esticou por várias células, deixe-o com a largura de uma célula. Selecione-o, abra Tamanho e posição e defina Largura em colunas como 1, ou arraste a alça da borda direita de volta até a borda da célula.
Um bloco novo mantém a largura habitual dele, até o número de colunas da grade, então no início ele costuma ocupar uma linha inteira. Os blocos também podem ocupar várias células de propósito, como uma célula mesclada em uma tabela: aumente a largura ou a altura de um bloco para cobrir mais da grade.
Configurações da grade
- Espaço entre células e Alinhar itens funcionam como no contêiner.
- Em Aparência, você pode definir Cor de fundo, Cor da borda, Raio dos cantos e o espaçamento interno da grade inteira. Contorno da célula só muda a cor das guias tracejadas das células que você vê no editor.
No celular, a grade vira uma única coluna e os blocos dela se empilham em ordem, então uma linha de três colunas vira três blocos um embaixo do outro.