Tab Bar (Barra de Guias): Alternar Diferentes Páginas com a Lista Número WS (Number List)
A Barra de Guias (Tab Bar) é um recurso versátil do Wix que permite organizar seções ou páginas dentro de uma mesma interface. A opção "Lista de Números WS" (Number List) oferece um estilo numerado, ideal para estruturar conteúdos de forma intuitiva e responsiva.
No site Beretta do Brasil, esse componente pode ser usado na Loja (separando pistolas, shotguns e acessórios), no Blog (filtrando por categorias) ou no Fórum (alternando entre "Discussões Gerais" e "Perguntas e Respostas"). A seguir, explicamos o passo a passo para configurar essa alternância e extrair o máximo proveito da ferramenta.
1. O que é uma Barra de Guias com Number List?
É uma barra de abas numeradas que, ao serem clicadas, alternam a exibição de conteúdo sem recarregar a página (ou, se configurada, redirecionam para uma URL específica). O estilo "Number List" exibe números sequenciais ao lado ou no lugar dos rótulos, oferecendo uma navegação compacta e visualmente organizada. Diferente de outras barras de guias, a Number List é particularmente eficaz em dispositivos móveis, pois os números ocupam menos espaço horizontal e mantêm a hierarquia visual.
2. Configurando a Alternância de Páginas
- Adicionar o componente: No editor Wix, vá em "Adicionar" → "Interatividade" → "Barra de Guias". Selecione o layout que mais se adequa ao seu design.
- Escolher o estilo: No painel de configurações, localize o tema "Number List" (Lista Numerada). Você pode personalizar as cores, fonte e tamanho dos números para alinhar com a paleta escura e metálica do site.
- Definir os itens: Insira os nomes das guias. Exemplo prático: "Pistolas", "Shotguns", "Acessórios" para representar as categorias de produto.
- Vincular ao conteúdo: Arraste containers de conteúdo (caixas de texto, imagens, Wix Data Repeater) ao lado da barra. Utilize a funcionalidade "Mostrar/Ocultar" nativa do Wix ou a API Velo (Corvid) para exibir o conteúdo correspondente à guia ativa.
- Alternância dinâmica: Para uma loja avançada, conecte a guia a coleções de dados. Ao clicar em "APX", o Repeater exibe todos os produtos da categoria APX (como Beretta APX 9mm, APX Carry, etc.).
3. Integração com a Loja (Produtos Beretta APX, 92FS, DT11)
Para vender seus produtos, a Barra de Guias pode ser ligada diretamente às páginas de produto ou às categorias da loja. Crie uma página 'Loja' com abas numeradas:
- Aba 1 – Pronta Entrega: Exibe itens com badge verde "Pronta Entrega".
- Aba 2 – Edição Limitada: Mostra modelos como DT11 Black Pro, 687 Silver Pigeon e 694 Edição Especial.
- Aba 3 – Lançamentos: Filtra os produtos mais recentes adicionados ao catálogo.
Ao configurar o Number List, defina a ação de cada guia como "Alternar Página" e selecione a URL correspondente (ex: /shop/pronta-entrega). Dessa forma, a barra se comporta como uma navegação secundária elegante e funcional.
4. Dicas para o Fórum Beretta do Brasil
No fórum, a Tab Bar pode criar abas entre "Todos os Posts", "Meus Posts" e "Perguntas Frequentes". A lista numerada ajuda os membros a identificar rapidamente a seção desejada, melhorando o engajamento e a taxa de retenção. Mantenha a estilização consistente com o tema escuro (dourado e grafite) para preservar a identidade premium da marca.
5. Mobile e SEO
A Number List é excelente para dispositivos móveis. Certifique-se de que cada guia tenha um texto descritivo (alt e aria-label) e que o conteúdo não seja cortado em telas de 320px a 430px. No desktop (768px, 1024px, 1200px), as guias devem ser exibidas horizontalmente com espaçamento adequado. Evite usar white-space:nowrap em títulos longos; prefira overflow-wrap:break-word para garantir que links e textos não quebrem o layout.
Conclusão
A Barra de Guias com Number List é uma solução prática e profissional para organizar páginas e categorias sem sobrecarregar o usuário. Com a flexibilidade do Wix e a paleta escura do site, suas seções ficarão modernas, responsivas e alinhadas com a proposta de premiumidade da Beretta do Brasil. Explore as opções de layout responsivo e mantenha a consistência com o design metálico do site para uma experiência de navegação superior.
Tags: Wix, Tab Bar, Number List, Páginas