Editor do Wix Studio: trabalhar com encaixe, margens e preenchimento
9 min de leitura
Neste artigo
- Posicionar elementos na tela
- Coordenadas X e Y no Inspetor
- Encaixe automático e manual
- Usar margens ao encaixar elementos
- Adicionar preenchimento ao redor de contêineres responsivos
- Evitar que elementos se sobreponham
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.
O que é px*?
px* (Dimensão) é a unidade de medida padrão para encaixe, margens e preenchimento. O valor de px* que você vê é o valor em pixels, relativo ao tamanho da sua tela atual. Alterne para um breakpoint diferente para ver como o valor de px* é dimensionado automaticamente.
Vá para a Wix Studio Academy (em inglês) para conferir webinars, tutoriais e cursos adicionais do Wix Studio.
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.
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
, parte inferior 
, à direita 
ou esquerda 
). 
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.
- Insira um valor para a margem relevante (esquerda, direita, superior ou inferior).
Altere rapidamente a unidade de tamanho:
Clique na unidade de tamanho atual para mudar para outra. Você pode aplicar a mesma unidade a todos os lados simultaneamente ou escolher uma diferente para cada lado.
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.
Depois de adicionar o preenchimento, você pode ajustá-lo 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.
Para adicionar preenchimento:
- Selecione o elemento relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Role para baixo até Layout.
- Escolha qual preenchimento você deseja editar:
- Um lado específico
: clique no ícone e insira o valor para o lado relevante: esquerdo, direito, superior ou inferior. - Preenchimento horizontal
: insira um valor para o preenchimento esquerdo e direito. - Preenchimento vertical
: insira um valor para o preenchimento superior e inferior.
- Um lado específico
Altere rapidamente a unidade de tamanho:
Clique na unidade de tamanho atual para mudar para outra. Você pode aplicar a mesma unidade a todos os lados simultaneamente ou escolher uma diferente para cada lado.
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.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
