header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
Contrate um profissionalAlcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

Editor do Wix Studio: adicionar e configurar caixas flexíveis

Neste artigo
  • Etapa 1 | Adicione uma caixa flexível
  • Etapa 2 | Adicione itens à sua caixa flexível
  • Etapa 3 | Adicione elementos à caixa flexível
Use caixas flexíveis para simplificar a forma como você mostra conteúdo. Essas ferramentas avançadas de layout são compostas por contêineres responsivos que se adaptam perfeitamente a qualquer tamanho de tela. Escolha entre uma variedade de tipos de exibição, como Colunas, Mosaico e Slider, para melhorar o estilo e a funcionalidade do site do seu cliente.

Etapa 1 | Adicione uma caixa flexível

Para começar, vá para o painel Elementos, selecione uma predefinição de caixa flexível e arraste-a para sua página. Você pode alterar o número de itens e a forma como eles são exibidos mais tarde.

Para adicionar uma caixa flexível:

  1. Clique em Elementos  no lado esquerdo do editor.
  2. Clique em Ferramentas de layout.
  3. Clique em Caixas flexíveis.
  4. 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.
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 à sua 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.

Etapa 3 | Adicione elementos à caixa flexível

Escolha o que você deseja exibir na sua caixa flexível ao adicionar elementos aos itens. Você pode ocultar ou mostrar elementos em diferentes breakpoints para criar uma experiência única para os visitantes, independentemente do dispositivo.

Para adicionar elementos a um item:

  1. Clique em Elementos  no lado esquerdo do editor.
  2. Selecione o tipo de elemento que deseja adicionar.
  3. Clique no elemento escolhido para adicioná-lo à sua página.
  4. 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.
Qual é o próximo passo?
Personalize e gerencie sua caixa flexível para exibir o conteúdo que deseja, como deseja.