Componente 2 columns tabs
Um bloco de conteúdo em duas colunas: à esquerda, uma lista de tabs; à direita, o conteúdo do tab selecionado.
Informações gerais
O 2 Columns Tabs é um bloco de conteúdo em duas colunas: à esquerda apresenta uma lista de tabs (opções/tópicos) e à direita mostra o conteúdo do tab selecionado. A ideia é permitir que o utilizador troque de tópico sem sair do sítio, mantendo sempre o contexto e evitando scroll excessivo.
Exemplos visuais do bloco
Variações de layout e composição
O bloco 2 Columns Tabs pode assumir diferentes composições visuais, mantendo sempre a mesma lógica funcional: uma coluna de navegação por tabs e uma coluna de conteúdo dinâmico. Os exemplos abaixo ajudam a perceber como este componente se adapta a diferentes contextos editoriais e visuais, desde abordagens mais informativas até composições com maior peso gráfico.
Como usar na prática
Estrutura do componente
Crie os tabs
- Cada tab deve ter um título curto (1–4 palavras).
- Pode incluir ícone ou label pequena, por exemplo “Novo”, “Pro” ou “3 passos”.
- Pensa na coluna esquerda como um índice.
Preencha o conteúdo
- Cada tab abre um painel com título, texto e, se necessário, bullets, imagem, exemplo ou CTA.
- Cada painel deve fazer sentido sozinho, mesmo que o utilizador leia apenas aquele tab.
Boas práticas de conteúdo
Como manter a componente clara
Organização
- Nomes consistentes: o mesmo tom e formato em todos os tabs.
- Equilíbrio de tamanho: painéis com comprimentos semelhantes evitam saltos excessivos.
- Um tema por tab: se houver duas ideias grandes num painel, provavelmente precisas de outro tab.
Leitura rápida
- Bullets ajudam: 3–5 bullets funcionam muito bem.
- CTAs por tab: podem existir, mas evita ações totalmente diferentes sem motivo.
Configurações avançadas
Imagem + resumo das opções
Imagem de referência das configurações avançadas do componente, em qualidade superior à versão reduzida usada no artigo.
Configurações gerais
- Skin aplica uma variante visual do bloco.
- Disabled block desativa sem apagar.
- Offset cria deslocamento no layout.
- Border right column separa visualmente as colunas.
- Block ID e Extra Class servem para âncoras e estilos específicos.
- Background color e Color definem contraste e legibilidade.
Styles Button + Styles
- Button left column coloca o CTA junto às tabs.
- Button Style e Button align definem estilo e alinhamento do botão.
- Column Left Size ajusta a largura da coluna esquerda.
- Vertical align alinha o conteúdo entre colunas.
Spacings + Tabs + Animation
- Margin e Padding controlam o respiro do bloco.
- Align, Color, Color Hover e Space ajustam o comportamento visual dos tabs.
- Col Left Animation Type e Col Right Animation Type controlam as animações de cada coluna.
Demo e downloads
Exemplos e configurações