Editor do Wix Studio: posicionar elementos
6 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.
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
Quando você adiciona um novo elemento, ele é automaticamente encaixado na:
- Parte superior do elemento pai (por exemplo: seção, contêiner, pilha).
- Borda esquerda ou direita do elemento pai, o que estiver mais próximo.
O encaixe automático garante que o elemento permaneça no lugar em todas as telas e dispositivos. Você pode mover elementos livremente e os pontos de encaixe se ajustam para você, não é necessário "reencaixar".
A posição do encaixe é indicada pelas linhas pontilhadas no elemento e pelos pontos de encaixe no painel Inspetor (em Posição). No exemplo abaixo, o elemento de texto é automaticamente encaixado nos lados superior e direito da célula.
Dica:
Por definição, a caixa de seleção Encaixe automático é marcada. Você pode desmarcá-la e ajustar o encaixe manualmente.
Ajustar o encaixe do elemento manualmente
Você pode substituir o encaixe automático e configurá-lo manualmente no Inspetor. Isso é útil, por exemplo, quando você deseja encaixar um elemento na parte inferior em vez de na parte superior.
Encaixe um elemento em qualquer lado, pode ser na parte superior, inferior, à esquerda, à direita ou até mesmo ao centro da seção, contêiner ou célula em que ele está.
Para encaixar um elemento manualmente:
- Selecione o elemento relevante.
- Clique na seta Abrir inspetor
no canto superior direito do Editor. - Role para baixo até Posição.
- Clique nos pontos de encaixe relevantes (superior, inferior, direita ou esquerda). Se preferir, clique no ícone Alinhar ao centro
para que o elemento fique sempre no centro.
Observação:
Isso desmarca automaticamente a caixa de seleção Encaixe automático.
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 na seta 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.
- Insira um valor para a margem.
Dica: clique na medida (por exemplo: px, %) para alterá-la. Recomendamos o uso de porcentagem (%) para posicionar seus elementos de forma consistente em todos os tamanhos de tela. - (Opcional) Clique no ícone Aplicar a todos os lados
para definir a mesma margem em todos os lados.
Unidades de margem:
As margens podem ser definidas em 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.
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
É uma boa ideia encaixar seus elementos na parte superior do contêiner, seção ou célula da grade em que eles estão. Isso garante que sempre haja um espaço definido entre o elemento e o contêiner/seção quando mais conteúdo é adicionado à sua página.
Adicionar células para organizar o layout
Para layouts mais complexos, adicione células para organizar a seção. Coloque elementos dentro de suas próprias células e encaixe-os em uma linha de grade para que sejam posicionados perfeitamente em todos os tamanhos de tela.
Aplicar uma pilha
Colocar um grupo de elementos em uma pilha horizontal ou vertical garante que eles não se sobreponham. Uma pilha é um contêiner flexível que se ajusta automaticamente a diferentes tamanhos de tela. Você só precisa definir as margens entre os elementos.
Usando margens negativas, você pode sobrepor elementos em uma pilha. Isso permite que você coloque elementos na frente dos outros, criando um design mais intrincado.
Esse artigo foi útil?
|