Editor X: usar caixas multiestado
5 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
As caixas multiestado 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 conta própria.
Antes de começar:
- Como esse recurso requer um pouco de código, certifique-se de ativar o Modo avançado (Velo by Wix).
- As caixas multiestado estão atualmente no modo beta no Editor X. Isso significa que ainda estamos trabalhando para adicionar novos recursos e fazer melhorias gerais nesse recurso.
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.
Confira como
na parte superior do Editor X.
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 (ex.: "Novo", "Esgotado") ou crie um design completamente diferente para cada estado.
Clique abaixo para saber como:
Selecionar e criar um estado
Adicionar um estado
.Renomear um estado
Remover um estado
Reordenar estados
para cima ou para baixo para alterar a ordem dos estados.
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 no modo avançado
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 multiestado, 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.
Próximo:
Saiba mais sobre como trabalhar com sua caixa multiestado e código (em inglês).
Esse artigo foi útil?
|