header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

Editor do Wix Studio: empilhar elementos

5 min
Neste artigo
  • Aplicar uma pilha
  • Alterar a direção da pilha
  • Gerenciar uma pilha
  • Fazer o design de uma pilha
Uma pilha é um contêiner de caixa flexível que "abraça" um grupo de elementos, estejam eles em uma ordem vertical ou horizontal. Isso garante que os elementos fiquem em ordem, com o espaçamento que você definir, e nunca se sobreponham.
Dito isso, você pode usar margens negativas para fazer com que os elementos se sobreponham intencionalmente.
Vá para a Wix Studio Academy (em inglês) para conferir webinars, tutoriais e cursos adicionais do Wix Studio.
Você está encontrando elementos sobrepostos?
Confira nosso vídeo de solução de problemas (em inglês) para saber o que verificar e como resolver esse problema. 

Aplicar uma pilha

  1. Clique em um elemento que você deseja que esteja na pilha.
  2. Mantenha a tecla Shift pressionada e selecione os outros elementos da pilha.
  3. Clique em Empilhar.
  4. (Opcional) Arraste a linha entre os elementos para definir as margens.
Arrastando os espaços entre itens empilhados para aumentar as margens
Dica:
Você também pode criar margens negativas para fazer com que os elementos se sobreponham intencionalmente. 
Arrastando as margens da pilha para a direção oposta para criar uma sobreposição entre a imagem e o texto

Alterar a direção da pilha

Quando você empilha elementos, a direção é determinada automaticamente pela ordem dos elementos. Se os elementos estiverem organizados verticalmente, por exemplo, a pilha será vertical. 
Você pode mudar a direção usando o dropdown. Isso reorganiza automaticamente os elementos para que eles fiquem na ordem correta. 
Um exemplo de uma pilha horizontal convertida em vertical, os elementos estão agora em uma ordem vertical

Gerenciar uma pilha

Você pode personalizar a pilha para corresponder ao novo conteúdo e requisitos. Adicione mais elementos à pilha, mova-os com apenas um clique de botão e separe elementos que não são mais necessários. 

Para gerenciar uma pilha:

  1. Selecione a pilha relevante.
  2. Escolha o que fazer a seguir:

Fazer o design de uma pilha

A pilha não precisa ser transparente, você pode personalizá-la para fazer com que o conteúdo se destaque na página. Adicione uma cor de background, borda e sombra. Você também pode deixar os cantos da pilha mais redondos ou quadrados. 

Para fazer o design de uma pilha:

  1. Selecione a pilha relevante.
  2. Clique na seta Abrir inspetor  no canto superior direito do editor.
  3. Role para baixo até Design
  4. Faça o design da pilha usando as opções disponíveis:
    • Defina a cor do background e sua opacidade.
    • Adicione uma borda para emoldurar a pilha. 
    • Escolha um raio para os cantos.
    • Ative a sombra e gerencie configurações como ângulo, distância, tamanho, etc.
Uma captura de tela do painel Inspetor e uma pilha selecionada na tela, mostrando as opções de design
Arrastando os espaços entre itens empilhados para aumentar as margens
Um exemplo de uma pilha horizontal convertida em vertical, os elementos estão agora em uma ordem vertical
Uma captura de tela do painel Inspetor e uma pilha selecionada na tela, mostrando as opções de design