Editor do Wix Studio: usar caixas multiestados

4 min de leitura
As caixas multiestados permitem que você mostre conteúdo diferente para diferentes situações na mesma caixa contêiner, exibindo um estado de cada vez. Escolha a quantidade de estados que sua caixa deve ter, faça o design delas e dê a elas IDs que você usará mais tarde no seu código.
Seu código define quando cada estado deve ser exibido. Você pode criar condições para que cada estado apareça automaticamente ou permitir que os visitantes naveguem por eles por conta própria. 
Antes de começar:
Esse recurso requer um código, certifique-se de ativar o Código.

Etapa 1 | Adicione uma caixa multiestado

Primeiro, é necessário adicionar uma caixa multiestado ao seu site diretamente do painel Adicionar. Arraste a caixa para o local desejado na sua página.

Para adicionar uma caixa multiestados:

  1. Clique em Elementos  no lado esquerdo do Editor.
  2. Clique em Layout.
  3. Clique em Caixas multiestados.
  4. Arraste uma caixa multiestado para o local relevante na sua página.
Use caixas multiestado dentro de repetidores:
Após adicionar uma caixa multiestado a um item do repetidor, ele é adicionado automaticamente ao resto dos itens com exatamente o mesmo design. Isso é útil para listas com itens repetidos como Perguntas frequentes ou galerias de produtos.

Etapa 2 | Adicione e faça o design dos estados

Após adicionar a caixa, faça o design dos estados que ela exibe. Você pode personalizar esses estados como quiser: use-os para pequenos selos como disponibilidade de produto (por exemplo: "Novo", "Esgotado") ou crie um design completamente diferente para cada estado.
Clique abaixo para saber como: 
Dica de design:
Os estados podem ter diferentes propriedades de altura, o que permite que você revele informações adicionais, por exemplo. No entanto, a largura dos seus estados é sempre a mesma.

Etapa 3 | Adicione código

A última etapa para tornar a caixa multiestado funcional é adicionar código que controla quando cada estado aparece.
Usando as funções e eventos disponíveis na API do Velo para caixas multiestados, você pode definir e implementar regras para exibir e navegar pelos seus estados.
Importante:
Ao adicionar o código relevante, certifique-se de escrever os IDs do estado corretamente, com a mesma grafia e letras maiúsculas ou minúsculas.
A seguir:

Esse artigo foi útil?

|