Editor do Wix Studio: trabalhar com uma grade CSS avançada
8 min de leitura
No Editor do Wix Studio, você pode usar uma grade CSS avançada para organizar o layout dos elementos e seções. 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, %).
Vá para a Wix Studio Academy (em inglês) para conferir webinars, tutoriais e cursos adicionais do Wix Studio.
Neste artigo, saiba tudo sobre como trabalhar com uma grade CSS:
Mudar de uma grade de seção para uma grade CSS
As seções no Editor vêm com a opção de definir uma grade de seção. Essa é uma versão fácil de usar da grade avançada, baseada na mesma lógica CSS. Alternar para uma grade CSS avançada oferece um controle mais preciso do layout por breakpoint.
Observação:
Depois de fazer a mudança, não é possível voltar para uma grade de seção. No entanto, se você tiver acabado de executar a ação, você pode usar o botão Desfazer 
no canto superior direito do Editor.
no canto superior direito do Editor.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.
Qual é o próximo passo?
Personalize as linhas, colunas e espaçamento no painel Inspetor. Você também pode arrastar as linhas de grade na tela para movê-las.
Aplicar uma grade CSS em outros elementos
Você pode aplicar uma grade CSS a um contêiner, janela, caixa flexível e itens do repetidor. Especificamente no elemento repetidor, depois de aplicar uma grade a um item, o resto é atualizado automaticamente.
Para aplicar uma grade CSS:
- Selecione o elemento relevante no Editor.
- Clique no ícone Mais ações
. - Clique em Aplicar grade CSS avançada.
- Escolha um layout no menu dropdown 1x1.
Dica: selecione Outro se quiser definir seu próprio número de linhas e colunas.
Qual é o próximo passo?
Personalize as linhas, colunas e espaçamento no painel Inspetor. Você também pode arrastar as linhas de grade na tela para movê-las.
Personalizar uma grade CSS
Personalize sua grade para obter o layout exato que você deseja. Você pode alterar o número de linhas e colunas, ajustar seu tamanho e os intervalos entre elas.
Para personalizar uma grade CSS:
- Selecione o elemento ou seção relevante.
- Escolha como deseja personalizar a grade:
Escolher um layout diferente
Adicionar mais linhas e colunas
.
para ver essa opção. 
Alterar o tamanho das colunas ou linhas
Excluir uma coluna ou linha
ao lado de uma coluna ou linha existente.
Editar o tamanho dos intervalos
Trabalhando com breakpoints:
Seu design só se aplica ao breakpoint em que você está trabalhando. Você deve adaptar a grade em cada breakpoint para garantir que a composição dos seus elementos seja perfeita. No exemplo abaixo, definimos um layout diferente por breakpoint (3 colunas no desktop vs. 3 linhas no tablet).
Posicionar elementos em uma grade
Ao adicionar elementos à grade, várias ferramentas podem ajudar você a definir seu posicionamento com mais precisão.
Encaixar elementos
Encaixar elementos às linhas de grade garante que eles sejam posicionados exatamente como você deseja. No Editor do Wix Studio, todos os elementos são encaixados automaticamente, mas você pode ajustar o encaixe manualmente e adicionar margens.
Mover elementos entre células da grade
Na seção Posição no Inspetor, você pode selecionar um elemento e ver a célula da grade em que ele está. Clique em qualquer célula da grade para mover o elemento para lá, sem precisar arrastar e soltar.
Você também pode inserir os números específicos da coluna e da linha, o que é útil quando você precisa colocar um elemento sobre várias células da grade.
Tabela de unidades da grade
Use toda a variedade de unidades CSS para criar sua grade. Você pode definir o tamanho das colunas e linhas usando porcentagens, frações ou pixels. Como alternativa, defina o tamanho mínimo e máximo das colunas e linhas ou use cálculos para criar a grade necessária.
Porcentagem (%)
Fração (fr)
Auto
Pixels (px)
Largura e altura da janela de visualização (vw e vh)
Conteúdo mín. e máx.
Mín./máx.
Cálculo
Você está encontrando elementos sobrepostos?
Confira nosso vídeo de solução de problemas (em inglês) para saber o que verificar e como resolver esse problema.
Esse artigo foi útil?
|