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.

Use o verificador de responsividade para identificar oportunidades de empilhar elementos adjacentes, garantindo que eles nunca se sobreponham acidentalmente.

Para aplicar uma pilha:

Vá para o seu editor.
Clique em um elemento que você deseja que esteja na pilha.
Mantenha a tecla Shift pressionada e selecione os outros elementos da pilha.
Clique em Empilhar.
(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

Alternar entre a pilha horizontal e vertical

Quando você empilha elementos, eles se organizam automaticamente na horizontal ou na vertical com base na ordem em que você os colocar. Por exemplo, se os elementos forem colocados um abaixo do outro, a pilha aparecerá na vertical.

De qualquer forma, você pode alternar entre horizontal e vertical usando o dropdown que aparece ao selecionar a pilha. Essa ação reorganiza automaticamente os elementos para que eles fiquem na ordem certa.

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:

Vá para o seu editor.
Selecione a pilha relevante.
Escolha o que fazer a seguir:

Adicionar um elemento à pilha

Desconectar um elemento da pilha

Reordenar elementos na pilha

Desempilhar elementos

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:

Vá para o seu editor.
Selecione a pilha relevante.
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.

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:

Vá para o seu editor.
Selecione a pilha relevante.
Clique no ícone Abrir inspetor no canto superior direito do editor.

Role para baixo até Layout.
Use as opções disponíveis para ajustar o layout da pilha:
- Altere o layout da pilha de Horizontal para Vertical ou vice-versa.
- (Apenas para horizontal) Altere a direção de Esquerda para direita para Direita para esquerda 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
Alternar entre a pilha horizontal e vertical
Gerenciar uma pilha
Fazer o design de uma pilha
Ajustar o layout da pilha