Editor X: trabalhar com encaixe e margens
5 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
No mundo em que nossos dispositivos estão sempre mudando, é importante poder controlar a posição dos seus elementos para que eles fiquem exatamente como você deseja em diferentes tamanhos de tela. Você pode fazer isso usando o encaixe.
O Encaixe determina a posição vertical e horizontal dos elementos dentro da seção da página, contêiner ou célula da grade quando a tela é redimensionada.
Neste artigo, saiba tudo sobre como encaixar seus elementos:
Quer saber mais?
Confira nossa aula sobre encaixe e margens na Editor X Academy (em inglês).
Encaixe automático no Editor X
Quando você adiciona um elemento a uma seção de página, contêiner ou célula da grade, ele é automaticamente encaixado no canto superior ou inferior, o que estiver mais próximo.
A posição do encaixe é indicada pelas linhas pontilhadas no elemento. No exemplo abaixo, a arte vetorial está encaixada nos lados superior e esquerdo do contêiner:
Você pode ver a posição exata do elemento em Posição no painel Inspetor:
Ajustar o encaixe do elemento manualmente
Você pode substituir o encaixe automático e definir a posição manualmente no Inspetor.
Encaixe um elemento em qualquer lado; na parte superior, inferior, esquerda, direita ou até mesmo no centro da seção, contêiner ou célula da grade.
Para encaixar um elemento manualmente:
- Clique no elemento relevante.
- Clique no ícone Inspetor
na parte superior do Editor X. - Role para baixo até Posição.
- Clique nos pontos de encaixe relevantes (superior, inferior, direito ou esquerdo). Você também pode clicar no ícone Alinhar ao centro
.
Dica:
É 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.
Usar margens ao posicionar elementos
Use as margens para manter uma distância definida entre o elemento e as bordas da seção, contêiner ou célula da grade na qual ele está encaixado.
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 arrastando sua tela para redimensioná-la.
Para criar uma margem:
- Clique no elemento relevante.
- Clique no ícone Inspetor na parte superior do Editor X.
- Role para baixo até Posição.
- Em Encaixe, margens e preenchimento, selecione um lado (superior, inferior, esquerdo ou direito).
- Insira um valor para a margem.
Dica: clique no link unidades de medida (por exemplo: px, %) para alterá-lo. - (Opcional) Clique no ícone Aplicar a todos os lados
para definir a mesma margem em todos os lados.
Dicas:
- Você pode criar margens nas laterais de um elemento que não está encaixado. Isso funciona como uma proteção entre o elemento e o contêiner e evita a sobreposição.
- Geralmente recomendamos o uso de porcentagem (%) para que seus elementos sejam posicionados de forma consistente para cada tamanho de tela.
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.
Alinhar elementos
Usando as opções de alinhamento no painel Inspetor, você pode centralizar elementos e alinhá-los à esquerda, ao centro ou à direita.
Encaixar para cima
É 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.
Aplicar uma grade
Para layouts mais complexos, aplique uma grade CSS a sua seção/contêiner e encaixe os elementos nas linhas de grade. Coloque elementos dentro de suas próprias células de grade e encaixe-os em uma linha de grade para que eles sejam posicionados perfeitamente em todos os tamanhos de tela.
Aplicar uma pilha
Se você tiver um grupo de elementos posicionados em uma ordem vertical, o recurso de Pilha pode garantir que eles nunca se sobreponham. O empilhamento coloca os elementos dentro de um contêiner flexível que se ajusta automaticamente a diferentes tamanhos de tela, para que você possa manter um layout responsivo.
Escaneie sua página em busca de elementos sobrepostos:
Use o Verificador do site, a ferramenta gratuita oferecida pelo Editor X, para procurar esse problema automaticamente em cada página.
Esse artigo foi útil?
|