Elementor Advanced Tabs Widget: Guias Horizontais, Verticais e de Imagem Grátis
O widget Guias Avançadas em Complementos Mestres divide conteúdo longo em guias limpas e clicáveis, e é gratuito Escolha uma predefinição de borda ativa horizontal, vertical ou esquerda, adicione um ícone ou imagem a cada título de guia e escolha se as guias ativam o clique ou o hover Preencha cada guia com texto do editor ou, com o Master Addons Pro, carregue uma seção salva, widget ou modelo de página Funciona bem para recursos de produtos, perguntas frequentes, planos e guias passo a passo.
Veja o widget de guias em ação
O bloco abaixo é o widget, não uma captura de tela Quatro guias, ícones nos títulos e o primeiro definido para abrir por padrão Clique em um título para alternar o painel.
- Visão geral
- Especificação
- Entrega
- Garantia
Um bloco, quatro painéis
As guias mantêm uma página longa curta Tudo abaixo fica no mesmo bloco, e apenas o painel que você escolher está na tela, então uma especificação, uma nota de entrega e uma página de garantia param de competir pelo mesmo pergaminho.
Este é o widget em si Clique em um título acima para alternar o painel.
Especificação
Cada painel leva o conteúdo ordinário do editor: títulos, parágrafos, listas e imagens Nada aqui é uma captura de tela.
- Títulos de tabulação com um ícone, uma imagem ou texto sozinho
- Predefinições de borda ativa horizontal, vertical ou esquerda
- Ative o clique ou passe o mouse
Entrega
Um painel de entrega ou envio é a segunda guia clássica da página de um produto, pois as pessoas o procuram e ninguém o quer na descrição principal.
Defina qual guia abre primeiro com Definir como padrão no item.
Garantia
O último painel é um bom lar para termos, devoluções e qualquer outra coisa que seja importante para um comprador, mas não pertença ao campo.
Como adicionar guias no Elementor
Cinco passos de uma página vazia para um bloco de guias funcional.
- Procure por guias no painel de widgets do Elementor e arraste o widget para a página.
- Abra o repetidor de Tabs e adicione um item por painel Cada item tem um Título de Tab e um editor de conteúdo.
- Defina Tipo de Ícone em cada item como Nenhum, Ícone ou Imagem e, em seguida, escolha o ícone ou carregue a imagem.
- Escolha uma Predefinição de Estilo: Guias Horizontais, Guias Verticais ou Borda Ativa Esquerda.
- Defina o efeito de guia para clicar ou passar o mouse e alterne Definir como padrão na guia que deve ser aberta primeiro.
Guias horizontais e verticais com predefinições de estilo
Comece a partir de uma predefinição integrada As guias horizontais colocam os títulos em uma linha no topo, as guias verticais os alinham na lateral e a borda ativa esquerda marca a guia aberta com uma borda colorida O Master Addons Pro adiciona uma predefinição de conteúdo tabular para um visual em caixa Cada predefinição é apenas um ponto de partida, para que você possa reestilizá-la para combinar com sua marca.
- Layouts horizontais e verticais: escolha a direção da aba que se encaixa no seu conteúdo.
- Predefinições visuais: comece a partir de um layout projetado em vez de um widget em branco.
- Mudança fácil: mude de guias horizontais para verticais sem reconstruir o conteúdo.
Guias verticais, ao vivo
O mesmo widget com Style Preset definido como Tabelas Verticais Os títulos correm para a esquerda, o painel fica ao lado deles e, em uma tela estreita, a tira se acumula acima do conteúdo.
- Pesquisa
- destinar
- Construir
- Entrega
Pesquisa
As abas verticais colocam os títulos em uma coluna à esquerda e o painel ao lado delas Eles se adequam a um processo, onde a ordem é importante e cada etapa tem um parágrafo ou dois.
destinar
Com quatro ou cinco degraus, uma faixa vertical lê melhor do que uma linha horizontal, porque títulos longos têm espaço e o olho os segue pela página.
Construir
Alternar entre os dois com o controle Style Preset Tabs Horizontais, Tabs Verticais e Borda Ativa Esquerda são as três predefinições da lista.
Entrega
Em uma tela estreita, a faixa vertical fica acima do painel, de modo que o conteúdo permanece legível sem um segundo layout.
Modelos salvos dentro das guias (Pro)
A versão gratuita preenche cada guia do editor de texto Com o Master Addons Pro, cada guia pode usar um Tipo de Conteúdo diferente: Editor de Texto simples, uma Seção Salva, um Widget Salvo ou até mesmo um Modelo de Página Salva inteiro Isso significa que você pode colocar uma tabela de preços complexa, um formulário de contato, uma galeria de imagens ou qualquer outro bloco de conteúdo pré-projetado em uma guia É como ter várias páginas em uma, sem a desordem.
- Integração de modelo: insira qualquer modelo Elementor salvo em uma guia para possibilidades ilimitadas de design.
- Design consistente: reutilize suas seções e widgets existentes para manter uma aparência coesa.
- Perfeito para comparações: use guias para alternar entre diferentes especificações de produtos, planos de preços ou listas de recursos.
Estilo de guias: cores, bordas e tipografia
Obtenha uma aparência perfeita e polida estilizando cada parte das guias Projete o contêiner de guias e a área Conteúdo separadamente Para as guias, controle os estados Normal e Ativo com diferentes cores, fundos, bordas e tipografia Ajuste o preenchimento, margem e tamanho do ícone Para a área de conteúdo, estilize o fundo, o preenchimento, as margens e a tipografia Esse nível de controle garante que suas guias pareçam integradas e profissionais.
- Estilo baseado em estado: defina cores, planos de fundo e bordas exclusivos para guias ativas e inativas.
- Suporte a ícones: adicione ícones às suas guias e controle seu tamanho e posição.
- Design da área de conteúdo: Estile o contêiner de conteúdo para combinar com a estética do seu site.
Alterne as guias ao clicar ou passar o mouse
Decida como os usuários interagem com suas guias Defina o Efeito Tab para Clique (tradicional) ou Passe o mouse (para uma navegação mais rápida).Você também pode definir qual guia está aberta por padrão Essa flexibilidade permite criar a experiência exata do usuário que deseja, seja para uma vitrine de produto em ritmo acelerado ou um guia passo a passo cuidadoso.
- Clique ou Hover: escolha o gatilho que se adapta ao seu conteúdo O Hover é o padrão.
- Guia Ativo Padrão: defina qual guia está aberta quando a página for carregada.
Guias Elementor vs Addons Mestre Guias Avançadas
O widget Tabs do próprio Elementor está no plugin gratuito, e é bom em uma coisa que este não pode fazer: ele mantém outros widgets dentro de cada painel, porque cada guia é um contêiner A negociação é o que os títulos das guias podem carregar e quanto do estilo está exposto.
| Característica | Guias Elementor (núcleo livre) | Guias de complementos mestres |
|---|---|---|
| Solte outros widgets dentro de uma guia | Sim, cada painel é um recipiente | Não, o painel leva conteúdo do editor |
| Títulos laterais (verticais) | Sim | Sim, a predefinição de Tabelas Verticais |
| Transforma-se em um acordeão no celular | Sim | Não |
| Imagem como título da guia | Não | Sim, tipo de ícone definido como imagem |
| Ícone no título da guia | Sim | Sim |
| Predefinições de estilo | Não | Três, mais Conteúdo Tabular com Pro |
| Ativar o hover | Não | Sim, Efeito Tab definido como Hover |
| Modelo salvo dentro de uma guia | Não é necessário, use widgets | pró |
Então a versão curta: se um painel precisa de um formulário, uma galeria ou uma tabela de preços dentro dele, use o widget principal Se a faixa de guias em si é o problema de design, com títulos de imagens, predefinições ou comutação hover, este tem os controles.
O que o widget Tabs faz e não faz
Verificado no painel de widgets As linhas “no” são tão úteis quanto as demais, porque duas delas são as perguntas que as pessoas mais fazem.
| Configuração | Apoiado |
|---|---|
| Tabulações horizontais | Sim, a predefinição padrão |
| Tabulações verticais | Sim |
| Predefinição da borda ativa esquerda | Sim |
| Ícone no título da guia | Sim, da biblioteca de ícones do Elementor |
| Imagem como título da guia | Sim, tipo de ícone definido como imagem |
| Títulos somente texto | Sim, tipo de ícone definido como Nenhum |
| Ative o clique ou passe o mouse | Sim, Efeito Tab |
| Escolha qual guia abre primeiro | Sim, Defina como Padrão no item |
| Alinhamento de guia e conteúdo | Sim |
| Cores ativas e inativas | Sim |
| Seção salva, widget ou modelo de página em uma guia | pró |
| Predefinição de Conteúdo Tabular | pró |
| Layout de coluna para a faixa de guias | pró |
| Abra uma guia a partir de um URL ou link | Não |
| Acordeão no celular | Não |
Widgets relacionados para o mesmo trabalho: Acordeão Avançado para listas de perguntas frequentes, Alternar conteúdo para trocar um bloco de conteúdo, Tabela Dinâmica para especificações, Tabela Preços para planos, e Índice para páginas longas.
Guias de imagem e ícone no Elementor
Cada título da guia pode transportar um ícone da biblioteca Elementor ou uma imagem própria Defina o tipo de ícone como imagem, escolha uma imagem da biblioteca de mídia e o título se tornará uma guia de imagem Esta é uma opção gratuita e funciona com todas as predefinições gratuitas.
- Tipo de ícone por guia: Nenhum, ícone ou imagem.
- Use imagens para guias de produtos ou categorias e ícones para listas de recursos.
- Mantenha um estilo em uma barra de guias, pois a mistura de imagens e ícones parece ocupada.
Para conteúdo que abre no lugar em vez de trocar de painel, tente o Acordeão Avançado ou Alternar conteúdo (profissional).
Perguntas frequentes para guias
Posso usar ícones e texto nos títulos das guias?
Sim. Para cada guia, defina Tipo de ícone como Ícone ou Imagem e, em seguida, escolha um ícone da biblioteca ou uma imagem da sua biblioteca de mídia. O controle Tamanho do ícone na guia Estilo define o tamanho do ícone.
Como faço para que as guias fiquem bem no celular?
Use o modo responsivo do Elementor para ajustar a tipografia, o preenchimento e as margens para tablet e telefone Visualize as guias verticais em uma tela pequena antes de publicar, já que a coluna de títulos ocupa largura.
Qual a diferença entre a predefinição "Conteúdo Tabular" e as demais?
O Conteúdo Tabular é uma predefinição Pro. Ele dá à área de conteúdo da guia um fundo, borda e preenchimento distintos, fazendo com que pareça uma caixa conectada às guias. É uma aparência mais estruturada e contida em comparação com os estilos clássico sublinhado ou border-left.
Posso colocar um modelo salvo dentro de uma guia?
Sim, com Master Addons Pro. Defina o tipo de conteúdo no item como Seção salva, Widget salvo ou modelo de página salva e escolha o modelo. No plugin gratuito, cada painel recebe o conteúdo do editor.
Posso definir qual guia abre primeiro?
Sim. Alternar Definir como Padrão no item que você deseja abrir quando a página carregar Se nenhuma estiver definida, a primeira guia será aberta.
Posso vincular uma guia a um URL externo ou outra seção da página?
O elemento Tabulações avançadas é projetado para alternar conteúdo dentro do widget Para vincular a URLs externos ou seções de página, talvez seja necessário uma solução diferente, como um menu de navegação ou links âncora No entanto, você pode colocar um botão com um link dentro do conteúdo da guia.
Como isso é diferente do widget Tabs do próprio Elementor?
O widget gratuito de guias do Elementor permite que você coloque quaisquer widgets dentro de cada guia e coloque os títulos acima, abaixo ou ao lado do conteúdo Master Addons Advanced Tabs oferece um gatilho de hover, rótulos de ícones ou imagens e predefinições prontas, como Left Active Border, e você pode adicionar quantos widgets de guias avançadas a uma página conforme necessário O Pro adiciona as seções predefinidas e salvas de Conteúdo Tabular, widgets ou modelos de página como conteúdo de guias.
Como funciona a predefinição "Left Active Border"?
A predefinição de Borda Ativa Esquerda normalmente destaca a guia ativa com uma borda colorida ou fundo no lado esquerdo É um visual moderno e limpo que funciona bem para guias verticais ou até horizontais, se você quiser um indicador distinto.
As abas se transformam em acordeão no celular?
Não. A faixa de aba permanece uma faixa de aba e envolve telas estreitas. O widget Tabs do próprio Elementor muda para um acordeão, de modo que uma é a melhor escolha se um acordeão móvel for o requisito.
Devo usar abas ou um acordeão?
Guias quando os painéis são alternativas que um visitante escolhe entre, como especificação, entrega e garantia. Um acordeão quando os itens são uma lista, as pessoas leem, como um FAQ, pois vários podem ser abertos ao mesmo tempo e empilhados naturalmente em um telefone.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
