Abas
Abas com ícone e título que trocam o painel de conteúdo (texto, imagem ou vídeo e botão) — módulos de produto, serviços por segmento, "o que está incluído" por área.
Intermediário6 min de leitura
Nesta página
Visão geral
Abas com ícone e título que trocam o conteúdo exibido (título, texto, imagem ou vídeo do YouTube e botão opcional). Duas disposições: vertical (lista de abas ao lado do conteúdo) ou horizontal (abas acima). A troca pode ser ao clicar ou ao passar o mouse (hover). No celular a lista vertical vira horizontal com rolagem lateral.
| Propriedade | Valor |
|---|---|
| Nome no editor | Abas |
| Onde encontrar | Painel de widgets do Elementor, categoria Converto |
| Identificador no Elementor | lgr-tabs |
| Identificador no Markdown | tabs |
| Papel na página | Interesse (explorar recursos) |
| Campos de conteúdo | 3 |
| Opções de estilo | 44 (19 responsivas) |
Quando usar
Situações em que este widget é indicado:
- A página apresenta vários recursos, módulos ou serviços de um produto e cada um precisa de uma explicação com imagem (ex.: telas do sistema).
- Há conteúdo demais para mostrar tudo de uma vez e o visitante escolhe o que quer ver (módulos, segmentos, planos de uso).
Como adicionar
- Abra a página no editor do Elementor.
- No painel de widgets, abra a categoria Converto e arraste Abas para a página (ou clique em + em uma área vazia).
- Preencha a aba Conteúdo e ajuste a aba Estilo.
O widget também pode vir pronto em um modelo de página ou ser inserido pelo Converto Construtor.
Opções da aba Conteúdo
Conteúdo
| Opção | Tipo | Detalhes |
|---|---|---|
| Título | Texto | Padrão: Tudo o que você precisa, em um só lugar · Título da seção, acima das abas. Vazio não exibe. |
| Descrição | Área de texto | Padrão: Explore as abas e veja como cada recurso funciona na prática. |
| Abas | Lista | |
| ↳ Ícone da aba | Ícone | |
| ↳ Título da aba | Texto | Padrão: Aba |
| ↳ Título do conteúdo | Texto | Padrão: Título do conteúdo |
| ↳ Texto do conteúdo | Texto formatado | Padrão: Explique em uma ou duas frases o que o visitante … |
| ↳ Mídia | Seleção | Opções: Nenhum (none), Imagem (image), Vídeo (video) · Padrão: none |
| ↳ Escolha a Imagem (opcional) | Imagem ou arquivo | |
| ↳ Link do YouTube | Texto | |
| ↳ Proporção do Vídeo | Seleção | Opções: Horizontal Padrão (16:9) (16/9), Vertical / Shorts (9:16) (9/16) · Padrão: 16/9 |
| ↳ Início automático | Sim/Não | Padrão: yes |
| ↳ Repetir | Sim/Não | Padrão: yes |
| ↳ Mudo | Sim/Não | Padrão: yes |
| ↳ Texto do botão (opcional) | Texto | |
| ↳ Link do botão | Link |
Opções da aba Estilo
A aba Estilo reúne 44 opções em 8 seções (a última é Animações, comum a todos os widgets Converto).
| Seção | O que ajusta |
|---|---|
| Textos | Título da seção, Título da seção / Altura da Linha, Descrição da seção, Descrição da seção / Altura da Linha, Título da aba, Título da aba / Peso, Título do conteúdo, Título do conteúdo / Altura da Linha, Título do conteúdo / Peso, Texto do conteúdo, Texto do conteúdo / Altura da Linha |
| Cores | Título da Seção, Descrição da Seção, Título do Conteúdo, Texto do Conteúdo, Fundo da aba ativa, Texto da aba, Ícone da aba, Texto da aba ao passar o mouse, Fundo da aba ao passar o mouse, Texto e ícone da aba ativa, Fundo do conteúdo, Botão / Fundo, Botão / Texto, Botão / Fundo ao passar o mouse, Botão / Texto ao passar o mouse |
| Disposição | Posição das abas, Trocar de aba, Alinhamento das abas, Largura da lista de abas, Espaço entre as abas, Espaço entre abas e conteúdo |
| Abas e Conteúdo | Arredondamento da aba, Tamanho do ícone da aba, Arredondamento do conteúdo, Margem interna do conteúdo, Arredondamento da mídia |
| Plano de Fundo | Plano de Fundo |
| Sobreposição de Fundo | Sobreposição de Fundo, Opacidade |
| Espaçamentos | Espaço superior, Espaço inferior, Anular espaço de cima, Anular espaço de baixo |
| Animações | Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada) |
Comportamento responsivo
19 opções deste widget são responsivas: o Elementor permite definir valores diferentes para desktop, tablet e celular (ícones de dispositivo ao lado do campo). Para ajustes finos por largura de tela, use a sintaxe curta de media queries no campo CSS da aba Avançado.
Campos no Converto Construtor (Markdown)
Use o identificador tabs na linha <!-- converto:tabs -->. Campos de conteúdo (bloco :::content):
| Campo | Tipo | Obrigatório | Detalhes |
|---|---|---|---|
title | Texto | Não | Título da seção, acima das abas. Escreva um título próprio para a página; o padrão é genérico. Vazio não exibe. |
description | Texto | Não | |
tabs_list | Lista | Sim | Abas na ordem de exibição; a primeira abre ativa. De 3 a 8 abas (até 5 na disposição horizontal para caber sem rolagem). |
↳ tab_icon | Ícone | Não | Ícone da aba (Font Awesome); escolha um diferente e coerente com cada aba. |
↳ tab_title | Texto | Sim | Nome curto da aba (1 a 4 palavras). |
↳ content_title | Texto | Não | Título do conteúdo da aba, no formato de uma frase de benefício (ex.: "Suas contas a pagar, organizadas."). |
↳ content_text | Texto formatado | Não | Texto do conteúdo, de 1 a 3 frases. |
↳ media_type | Seleção | Não | none (padrão, só texto), image ou video (YouTube). · Opções: image, video |
↳ content_image | Imagem ou arquivo | Não | Usado quando media_type = image. Imagem do conteúdo (tela do produto, ilustração). Nunca é cortada; fica abaixo do texto, centralizada e com a largura da área. Proporção livre (recomendado 1200 px de largura). · Quando media_type = image |
↳ youtube_url | Texto | Não | URL completa do vídeo do YouTube (ou Shorts). Usado quando media_type = video. O vídeo carrega na primeira vez que a aba abre e pausa ao sair dela. · Quando media_type = video |
↳ video_aspect_ratio | Seleção | Não | Usado quando media_type = video. · Opções: 16/9, 9/16 · Quando media_type = video |
↳ video_autoplay | Sim/Não | Não | Usado quando media_type = video (padrão yes). · Quando media_type = video |
↳ video_loop | Sim/Não | Não | Usado quando media_type = video (padrão yes). · Quando media_type = video |
↳ video_muted | Sim/Não | Não | Usado quando media_type = video (padrão yes; o autoplay do YouTube só funciona mudo). · Quando media_type = video |
↳ button_text | Texto | Não | Texto do botão da aba. Vazio não exibe botão. |
↳ button_link | Link | Não |
Os controles da aba Estilo também podem ser usados no bloco :::style, pelos identificadores do próprio widget (campo omitido mantém o padrão). Veja a linguagem Markdown Converto.
Exemplo
<!-- converto:tabs -->
:::content
title: Tudo o que você precisa, em um só lugar
description: Explore as abas e veja como cada recurso funciona na prática.
tabs_list:
- tab_icon: fa-regular fa-circle-check
tab_title: Aba
content_title: Título do conteúdo
content_text: Explique em uma ou duas frases o que o visitante encontra nesta aba.
media_type: image
button_text: Texto de exemplo
button_link: https://exemplo.com/oferta
- tab_icon: fa-regular fa-circle-check
tab_title: Aba
content_title: Título do conteúdo
content_text: Explique em uma ou duas frases o que o visitante encontra nesta aba.
media_type: image
button_text: Texto de exemplo
button_link: https://exemplo.com/oferta
:::Recursos comuns a todos os widgets
- Textos aceitam variáveis de página (
{{rotulo}}) e marcação de texto. - Aba Avançado: campos CSS e JS por elemento (CSS e JS personalizado).
- Seção Animações na aba Estilo (Animações de entrada).
Este artigo foi útil?
Artigos relacionados
Biblioteca de widgets
Comparador
Comparação lado a lado de 2 a 5 planos ou versões (ou contra concorrentes), com recursos agrupados em seções.
Biblioteca de widgets
Contador
Contagem regressiva para um prazo REAL (fim de oferta, turma, bônus, início de evento) ou uma oferta de boas-vindas com tempo limitado contada a partir do primeiro acesso.
Biblioteca de widgets
Cartões Empilhados
Pilha de cartões com foto fixada na tela enquanto o visitante rola — perfis de público, casos de uso ou resultados com números.