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
  • Perguntas frequentes
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.
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. 

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. 
Uma captura de tela de um elemento sendo arrastado para outra célula pai e uma notificação de que isso afeta 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 em px* ao lado de Y ficando negativo à medida que movemos o elemento de pilha para fora de seu elemento pai, a célula. 
Uma captura de tela mostrando um elemento de pilha sendo movido para fora de sua célula pai, criando um valor negativo de Y no Inspetor

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.
Captura de tela de um contêiner encaixado para cima e nos lados direito de sua célula pai no Editor do Wix Studio
Dica:
O Verificador de responsividade pode ajudar você a identificar elementos que devem ser encaixados na parte inferior do pai ao invés da parte superior, o que pode estar criando espaços no site online. 

Usar margens ao encaixar elementos

As margens funcionam como um intervalo, evitando sobreposições com outros elementos. Quando um elemento é encaixado, as margens ajudam a manter uma distância definida entre o elemento e as bordas de seu pai. Você também pode adicionar margens aos lados que não estão encaixados. 

Para criar ou editar uma margem:

  1. Selecione o elemento relevante.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Role para baixo até Posição.
  2. Insira um valor para a margem relevante (esquerda, direita, superior ou inferior).
Um contêiner no editor e no painel Inspetor, destacando a área Margens do painel
Dica:
O Verificador de responsividade pode ajudar você a identificar elementos com margens desnecessárias, pois podem limitar sua capacidade de redimensionar o elemento pai.

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:

  1. Selecione o elemento relevante.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Role para baixo até Layout.
  2. 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. 
Uma captura de tela de um contêiner na tela, ao lado das configurações de preenchimento no painel Inspetor

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.
Solução de problemas:
Se no momento você estiver vendo sobreposições indesejadas entre elementos, confira este guia de solução de problemas.

Perguntas frequentes