Editor do Wix Studio: personalizar uma grade da seção
5 min de leitura
No Editor do Wix Studio, as seções vêm com uma grade integrada, contendo uma única célula (abrigando toda a seção). Divida a seção em mais células para trazer uma estrutura responsiva ao conteúdo. Existem vários layouts personalizáveis para você escolher.
Neste artigo, saiba mais sobre:
Deseja adicionar células a um contêiner?
Você pode aplicar uma grade CSS avançada no contêiner.
Adicionar células a uma seção
Adicione células a uma seção para criar um layout responsivo e estruturado. Manter os elementos em células separadas garante que eles permaneçam no lugar em todas as telas. Escolha um layout e mova os elementos para as células. Você pode dividir as células ou adicionar novas depois.
Para adicionar células a uma seção:
- Selecione a seção relevante no Editor.
- Clique no dropdown Em branco na parte superior da seção.
- Escolha um layout: Linhas, Colunas, Colagem, etc.
Dica: você pode alterar o layout no menu dropdown a qualquer momento. Isso não move seus elementos. - (Opcional) Arraste elementos para as células relevantes.
Trocar células na grade
Reorganize a grade de seção de forma rápida e eficiente ao trocar as células. Usando o recurso de arrastar e soltar, você pode alternar instantaneamente entre 2 células. Elas ocupam instantaneamente o lugar uma da outra na grade.
Para trocar células:
- Selecione a seção relevante no Editor.
- Selecione a primeira célula.
- Pressione o ícone Arrastar
na parte superior da célula enquanto a arrasta para a outra célula.
Dica: quando você vir a indicação Trocar conteúdo, isso significa que você pode soltar a célula.
Personalizar a grade da seção
Faça com que as células e a grade fiquem exatamente como você deseja. Você pode dividir ou mesclar células existentes, adicionar novas e arrastar as linhas de grade para ajustar seu tamanho. Você também pode adicionar intervalos para criar um espaço entre as células.
Para personalizar a grade da seção:
- Selecione a seção relevante no Editor.
- Escolha como deseja personalizar a grade:
Dividir uma célula existente
ou Dividir verticalmente 
.
Adicionar uma nova célula
Mesclar células
Redimensionar uma célula
Adicionar intervalos entre as células
Excluir uma célula
.Observação:
No momento, não é possível duplicar uma célula.
Mudar para uma grade CSS avançada
Mudar para uma grade CSS avançada oferece um controle mais preciso do layout por breakpoint. Você pode escolher o número de linhas e colunas que deseja e definir seu tamanho usando medidas responsivas (por exemplo: fr, mín/máx, %).
Para alternar de uma grade de seção para uma grade CSS:
- Selecione a seção relevante no Editor.
- Clique na seta Abrir inspetor
no canto superior direito do Editor. - Role para baixo até Layout.
- Clique em Aplicar ao lado de Grade CSS avançada.
- Clique em Mudar.
Esse artigo foi útil?
|