Editor do Wix Studio: trabalhar com encaixe, margens e preenchimento
9 min de leitura
Em um mundo em que os dispositivos estão sempre mudando, é importante controlar a posição dos seus elementos para que eles fiquem exatamente como você deseja em diferentes tamanhos de tela. No Editor do Wix Studio, os elementos são encaixados automaticamente para garantir que isso aconteça.
Isso dá a você a liberdade de mover elementos, sem precisar se preocupar com o posicionamento nos breakpoints. No entanto, você pode definir a posição, o encaixe e as margens por conta própria no painel Inspetor.
Vá para a Wix Studio Academy (em inglês) para conferir webinars, tutoriais e cursos adicionais do Wix Studio.
Neste artigo, saiba mais sobre:
Posicionar elementos na tela
Usando o recurso de arrastar e soltar, você pode definir a posição do seu elemento diretamente na tela, separadamente para cada breakpoint. Assim você garante que o elemento apareça no lugar desejado em todas as telas.
Desde que o elemento permaneça dentro do mesmo pai (por exemplo: seção, célula), você pode movê-lo e ele não afeta outros breakpoints. Se você mover um elemento para um pai diferente (reparent), ele se aplica a todos os breakpoints.
Coordenadas X e Y no Inspetor
Você pode verificar as coordenadas X e Y do seu elemento para ver sua posição exata no tamanho atual da tela.
- X: o plano horizontal, da borda esquerda até a borda direita do elemento pai (por exemplo: seção, contêiner, pilha).
- Y: o plano vertical, de cima para baixo do elemento pai.
No exemplo abaixo, você pode ver o valor de px* ficar negativo à medida que movemos o elemento de texto para fora de seu elemento pai, a célula.
O que é px*?
O px* é uma unidade de medida no Editor do Wix Studio que mostra os "pixels na tela". O valor de px* que você vê é o equivalente em pixel, relevante para o tamanho da tela atual. Mude para um breakpoint diferente para ver como o valor de px* é alterado automaticamente.
Encaixe automático e manual
Ao adicionar um novo elemento no editor, ele é encaixado automaticamente para garantir que permaneça no lugar em todas as telas e dispositivos. No entanto, você pode desativar o encaixe automático e escolher os pontos de encaixe manualmente.
Clique nos tópicos abaixo para saber mais.
Encaixe automático no editor
Ajustar o encaixe manualmente
para que o elemento esteja sempre no centro.
Usar margens ao encaixar elementos
Quando um elemento é encaixado, as margens ajudam a manter uma distância definida entre o elemento e as bordas de seu elemento pai. Você também pode adicionar margens aos lados que não estão encaixados. As margens atuam como um intervalo, evitando sobreposições com outros elementos.
No exemplo abaixo, o elemento de texto está encaixado nos lados superior e direito da célula. Passar o mouse sobre as margens no painel Inspetor as destaca na tela:
Para criar ou editar uma margem:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Role para baixo até Posição.
- Clique em uma margem (por exemplo: superior, esquerda) em Encaixe, margens e preenchimento.
- (Opcional) Clique no ícone Editar individualmente
para editar apenas o lado selecionado. - Insira um valor para a margem.
Dica: clique na medida (por exemplo: px*, %) para alterá-lo.
Unidades de margem:
As margens podem ser definidas em px*, pixels (px), porcentagem (%), altura da janela de visualização (vh) e largura da janela de visualização (vw). Cada unidade tem um resultado diferente quando a tela é redimensionada. Veja a diferença no comportamento das unidades ao arrastar sua tela para redimensioná-la.
Adicionar preenchimento ao redor de contêineres responsivos
Adicione preenchimento aos contêineres para criar um espaço entre as bordas (superior, inferior ou laterais) e o conteúdo dentro. O preenchimento pode ser adicionado a todos os tipos de contêineres responsivos, incluindo contêineres básicos, pilhas, caixas flexíveis, repetidores, células, seções e páginas.
Para adicionar preenchimento:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Role para baixo até Posição.
- Dependendo do tipo de contêiner responsivo, siga os passos para adicionar preenchimento:
Página, seção ou célula
.Outros contêineres
Qual é o próximo passo?
Você pode ajustar o preenchimento diretamente na tela usando o recurso de arrastar e soltar. Selecione o contêiner responsivo e passe o mouse sobre o preenchimento para ver essa opção.
Evitar que elementos se sobreponham
Ao posicionar elementos, é importante garantir que eles não se sobreponham em breakpoints menores. Para evitar que isso aconteça, confira nossas dicas abaixo.
Encaixar na parte superior
Adicionar células para organizar o layout
Aplicar uma pilha
Se você estiver vendo sobreposições indesejadas entre elementos, assista a este tutorial em vídeo para solucionar o problema.
Esse artigo foi útil?
|