Editor do Wix Studio: empilhar elementos
5 min de leitura
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
- 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](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/8066edcc-cce8-4125-b9bd-695fb324dcc2/bbeb2364-9f29-45db-a9f1-3e0400cc9009.gif)
Dica:![Arrastando as margens da pilha para a direção oposta para criar uma sobreposição entre a imagem e o texto](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/17/b9fbfcf5-e172-4bde-8ec7-a1617ab0a7c2/1cc2ee2d-d415-4b30-a265-577645be4e24.gif)
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](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/17/b9fbfcf5-e172-4bde-8ec7-a1617ab0a7c2/1cc2ee2d-d415-4b30-a265-577645be4e24.gif)
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](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/97d55a97-9873-4f3c-9934-e9fee921e967/10a23464-f3e2-45e9-8593-71678b65ad43.gif)
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:
- 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:
- Selecione a pilha relevante.
- Clique na seta Abrir inspetor
no canto superior direito do editor.
- Role para baixo até Design.
- 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](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/44515945-055e-4c5d-b4c1-c33c7fe8cc7f/0917549a-0198-4283-a7dc-57685eb493fd.png)