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

2 min de leitura
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:

  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 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.

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:

  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.

Esse artigo foi útil?

|