Editor do Wix Studio: empilhar elementos

5 min de leitura
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.
Neste artigo, saiba mais sobre:
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

Esse artigo foi útil?

|