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.
Predefinições e layouts de vários estilos
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.
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.
Estile as guias e o conteúdo de forma independente
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.
Escolha Como as guias respondem aos usuários
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 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 (Pro).
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 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.
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
