Editor do Wix Studio: adicionar e configurar caixas flexíveis
2 min de leitura
Neste artigo
- Etapa 1 | Adicione uma caixa flexível
- Etapa 2 | Adicione itens a uma caixa flexível
- Etapa 3 | Adicione elementos a uma caixa flexível
Use caixas flexíveis para simplificar a exibição do conteúdo do seu site. Caixas flexíveis são ferramentas de layout compostas por contêineres responsivos que se ajustam automaticamente ao tamanho da tela dos seus visitantes.
Etapa 1 | Adicione uma caixa flexível
Abra o painel Elementos para selecionar uma predefinição de caixa flexível e arraste-a para sua página. Existem muitos designs para você escolher de acordo com o tipo de conteúdo que deseja exibir (por exemplo: somente imagens, imagens e texto, etc.)
Para adicionar uma caixa flexível:
- Clique em Elementos
no lado esquerdo do Editor.
- Clique em Ferramentas de layout.
- Clique em Caixas flexíveis.
- Arraste e solte a caixa flexível escolhida na página.
![O painel Elementos no Editor do Wix Studio. O cursor está passando sobre um layout de caixa flexível.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/13/01ca719d-aedc-47b3-a69d-476a537fa799/a93c59dd-8480-44f0-9b02-ce435ce11c02.png)
Funciona assim:
Arraste as alças na tela para ver como o conteúdo da caixa flexível é perfeitamente reorganizado entre breakpoints.
Etapa 2 | Adicione itens a uma caixa flexível
Uma caixa flexível é composta por vários itens que são contêineres responsivos. Você pode alterar o número de itens em uma caixa flexível e ela redimensiona automaticamente os itens para que caibam no espaço disponível.
Para adicionar um novo item, você pode clicar em Adicionar item ou usar o painel Gerenciar itens no Inspetor.
![Uma caixa flexível em branco no Editor. O cursor está passando sobre o botão Adicionar itens.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/13/cc394dfe-14d1-4137-9c71-978a46bc4e97/db16b309-3bb0-4afe-9c2b-e8e5a09c8a4e.png)
Etapa 3 | Adicione elementos a uma caixa flexível
Escolha o que deseja exibir na sua caixa flexível ao adicionar elementos aos itens. Você pode ocultar/mostrar elementos em diferentes breakpoints para criar uma experiência única para os visitantes, não importa o dispositivo.
Para adicionar elementos a um item:
- Clique em Elementos
no lado esquerdo do Editor.
- Selecione o tipo de elemento que deseja adicionar.
- Clique no elemento escolhido para adicioná-lo à sua página.
- Arraste o elemento para o item da caixa flexível e solte-o quando vir Anexar.
![Um botão que foi arrastado para uma caixa flexível. A mensagem Anexar é exibida.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/17/057f5bbf-0aa8-48bf-b993-002c6427bbf4/fbafaa01-78e3-4504-93f0-0b68cce93b2d.png)
Qual é o próximo passo?
Personalize e gerencie sua caixa flexível para exibir o conteúdo que deseja, como deseja.