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
  1. Início
  2. Wix Studio, Parceiros e empresas
  3. Wix Studio
  4. Use o Editor do Wix Studio
  5. Design no Editor do Wix Studio
  6. Ajuste layouts e posicionamento
  7. Editor do Wix Studio: empilhar elementos

Editor do Wix Studio: empilhar elementos

6 min
Neste artigo
  • Aplicar uma pilha
  • Alterar a direção da pilha
  • Gerenciar uma pilha
  • Fazer o design de uma pilha
  • Ajustar o layout da 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.
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

Empilhar elementos é uma maneira rápida de organizar seu design com espaçamento consistente, criando um layout limpo e refinado. Ao selecionar vários elementos que estão um ao lado do outro (no mesmo elemento pai), a opção de empilhá-los aparece. 

Para aplicar uma pilha:

  1. Vá para o seu editor.
  2. Clique em um elemento que você deseja que esteja na pilha.
  3. Mantenha a tecla Shift pressionada e selecione os outros elementos da pilha.
  4. Clique em Empilhar.
  5. (Opcional) Arraste a linha entre os elementos para definir 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. Vá para o seu editor.
  2. Selecione a pilha relevante.
  3. 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. Vá para o seu editor.
  2. Selecione a pilha relevante.
  3. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela do painel Inspetor sendo aberto no Editor do Wix Studio.
  1. Use as opções disponíveis em Design para personalizar a pilha:
    • 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

Ajustar o layout da pilha

Ajuste o layout da pilha para garantir que cada elemento esteja espaçado, alinhado e preenchido de forma que combine com a sua visão criativa ou com as necessidades do cliente. 

Para ajustar o layout da pilha:

  1. Vá para o seu editor.
  2. Selecione a pilha relevante.
  3. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela do painel Inspetor sendo aberto no Editor do Wix Studio.
  1. Role para baixo até Layout.
  2. Use as opções disponíveis para ajustar o layout da pilha:
    • Altere a direção de Horizontal para Vertical ou vice-versa.
    • Insira um valor em Espaçamento do item para criar margens iguais entre os elementos da pilha (por exemplo: itens).
    • Escolha um alinhamento para os itens da pilha: Esquerda, Direita, Centro ou Justificado.
    • Adicione preenchimento nas laterais. 
Uma pilha na tela ao lado do painel Inspetor, destacando a seção de layout
Você sabia?
Você pode ajustar o preenchimento e o espaçamento diretamente na tela. Arraste a linha entre os elementos ou clique duas vezes na linha se preferir inserir um valor preciso. Você pode até mesmo mudar a unidade de tamanho, se necessário. 

Esse artigo foi útil?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar
Neste artigo
  • Aplicar uma pilha
  • Alterar a direção da pilha
  • Gerenciar uma pilha
  • Fazer o design de uma pilha
  • Ajustar o layout da pilha

Esse artigo foi útil?

|