As guias são uma das maneiras mais fáceis de evitar que uma página longa pareça esmagadora. Em vez de empilhar tudo verticalmente, você divide o conteúdo em seções clicáveis que os visitantes podem explorar em seu próprio ritmo.
O Guias Avançadas widget em Complementos Mestres para Elementor leva o básico widget de guias do elementor e adiciona muito mais flexibilidade Você obtém quatro layouts predefinidos, a opção de adicionar uma imagem, ícone ou animação Lottie a cada guia e a capacidade de carregar uma seção Elementor salva dentro de qualquer painel de guias.
Abaixo, orientarei você sobre como configurá-lo do zero usando as mesmas opções de layout mostradas no vídeo de demonstração.
O que o widget Elementor Advanced Tabs faz #
Em sua essência, esse widget cria um conjunto de rótulos de guias mais uma área de conteúdo Quando alguém clica em um rótulo, o painel correspondente aparece.
Comparado ao widget padrão de guias Elementor, a versão Master Addons oferece mais controle. Você pode alternar entre quatro predefinições visuais, adicionar imagens ou ícones a guias individuais, usar texto simples ou um modelo salvo como conteúdo do painel e estilo normal, hover e estados ativos separadamente.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo Se ainda não o instalou, verifique o guia instalação.
- O widget Guias Avançadas habilitado no painel de opções de complementos mestres.
- Opcional: um modelo Elementor salvo se você quiser carregar um dentro de uma guia.
Adicionar o widget Guias Avançadas #
Abra o editor Elementor e procure o Guias Avançadas widget sob a seção Master Addons. arraste-o para sua página e você verá a barra de guias horizontal padrão com três guias de amostra: Controle Inteligente, Melhor Desempenho e Fácil Personalização.
Escolha um layout predefinido #
A maneira mais rápida de mudar o visual é o Predefinição Estilo dropdown na guia Conteúdo Você tem quatro opções:
- Guias horizontais: os rótulos são executados na parte superior com conteúdo embaixo Este é o padrão.
- Guias verticais: os rótulos são empilhados à esquerda e o conteúdo aparece à direita.
- Fronteira Ativa Esquerda: semelhante às guias verticais, mas a guia ativa obtém uma borda colorida à esquerda.
- Conteúdo Tabular: os rótulos tornam-se botões maiores em estilo de cartão acima do painel de conteúdo.
Você pode alternar entre estes instantaneamente, então experimente todos eles e veja qual deles se encaixa melhor no seu conteúdo Também há um Layout Coluna controle que permite ajustar quantas colunas os rótulos das guias ocupam, o que é útil quando você deseja rótulos mais estreitos e mais espaço para conteúdo.
Configure as guias e o conteúdo #
Depois de escolher um layout, expanda o Conteúdo seção para ver a lista de guias Cada item tem seu próprio painel de configurações Você pode duplicar, excluir ou reordenar guias e clicar em Adicionar Item quando precisar de mais.
Configurações por guia #
- Definir como padrão: escolha qual guia abre primeiro quando a página for carregada.
- Tipo de ícone: escolher Ícone, Imagem, ou Lottie para o rótulo da aba, ou deixe em branco.
- Imagem /Ícone /Lottie: o recurso visual mostrado ao lado do título da guia.
- Título da guia: o texto em que os visitantes clicam.
- Tipo de conteúdo: usar Conteúdo para um editor de texto normal, ou Seção Salva para puxar um modelo Elementor.
- Conteúdo da guia: o conteúdo ou modelo real que preenche o painel.
Na demonstração, a primeira guia usa uma imagem Basta definir o Tipo de ícone como Imagem, abrir a biblioteca de mídia e selecionar seu arquivo A imagem aparece ao lado do título da guia e dentro do painel de conteúdo.
Para a segunda aba, a demo muda para um ícone Escolha o tipo de Ícone e escolha algo que corresponda ao rótulo, Neste caso, um ícone no estilo velocímetro funciona bem para “Better Performance.”
Carregue uma seção salva dentro de uma guia #
Aqui é onde fica interessante Mude o Tipo de conteúdo para Seção Salva e escolha qualquer modelo da sua biblioteca Elementor A demonstração carrega um acordeão de perguntas frequentes completo dentro de uma guia, o que significa que seu painel pode conter títulos, acordeões, formulários ou qualquer outra coisa que você salvou como modelo.
Estile as guias e o conteúdo #
Vá para o Estilo guia para alterar cores, tipografia, espaçamento e bordas Os controles são agrupados em duas seções principais:
- Guias: abrange os rótulos das guias, incluindo cor do título, tipografia do título, cor de fundo, cor do conteúdo, tipografia de conteúdo, alinhamento de conteúdo, raio da borda, sombra da caixa, preenchimento e margem.
- Conteúdo: estiliza o painel que mostra quando uma guia está ativa.
A maioria desses controles suporta estados normais, de pairar e ativos, de modo que a guia que alguém está visualizando no momento pode parecer diferente do resto O Alinhamento Conteúdo os botões também permitem alinhar o texto do painel para a parte superior, central ou inferior da área de conteúdo.
Configurações avançadas #
O Avançado a guia tem os controles habituais do Elementor que você esperaria: margem, preenchimento, animação de entrada, visibilidade responsiva, CSS personalizado e atributos Use-os para ajustar o posicionamento ou ocultar as guias em tamanhos de tela específicos.
O resultado na página #
Uma vez publicadas, as guias funcionam exatamente como você configurá-las A guia padrão abre primeiro, os visitantes clicam através dos rótulos e qualquer seção ou mídia salva que você adicionou aparece no painel correspondente.
Casos de uso comum #
- Detalhes de recursos nas páginas dos produtos, com uma aba por recurso.
- Preços ou comparações de planos usando conteúdo tabular ou rótulos verticais.
- Seções FAQ dentro de uma guia carregando um acordeão salvo como conteúdo do painel.
- Descrições de serviço onde cada guia cobre um serviço diferente.
- Portfólio ou estudos de caso com uma imagem ou ícone por guia e detalhes no painel.
Dicas para melhores guias #
- Combine a predefinição com o seu conteúdo. As guias horizontais funcionam melhor com rótulos curtos, as guias verticais são ótimas para listas mais longas e o conteúdo tabular faz com que cada opção se destaque.
- Defina sua guia mais importante como padrão. Usar Definir como padrão assim, os visitantes veem primeiro o seu melhor conteúdo.
- Mantenha ícones e imagens consistentes. Misturar imagens, ícones e rótulos de texto simples na mesma barra de guias tende a parecer confuso.
- Não sobrecarregue as seções salvas. Uma forma ou acordeão dentro de uma aba é perfeito, mas uma seção de herói pesado pode desacelerar as coisas mesmo quando escondido.
- Verifique a visualização móvel antes de publicar. As guias verticais podem ficar altas em telas pequenas, portanto, visualize primeiro o layout responsivo.
Perguntas frequentes #
O que é o widget de guias avançadas em complementos mestres?
É um widget Elementor para construir conteúdo com guias Você pode escolher layouts horizontais, verticais, de borda ativa esquerda ou tabulares; adicionar ícones, imagens ou animações Lottie a cada guia; preencher painéis com texto ou seções salvas; e estilizar os estados normal, hover e ativo.
Posso carregar um modelo Elementor dentro de uma guia?
Sim. defina o Tipo de Conteúdo da guia como Seção Salva e escolha qualquer modelo da sua biblioteca Elementor Esse modelo será renderizado dentro do painel quando a guia estiver ativa.
Como faço uma guia aberta por padrão?
Abra o item de guia na guia Conteúdo e ative Definir como padrão. Mantenha-se em uma guia padrão para que o painel sempre comece em um estado claro.
Qual é a diferença entre as guias horizontais e o conteúdo tabular?
As guias horizontais colocam os rótulos em uma única linha acima do conteúdo O conteúdo tabular transforma os rótulos em botões maiores no estilo de cartão, o que funciona bem quando você deseja que cada guia pareça uma escolha separada.
Posso usar diferentes tipos de ícones para diferentes guias?
Sim. Cada guia tem seu próprio controle de Tipo de Ícone, então uma guia pode usar uma imagem enquanto outra usa um ícone ou arquivo Lottie Para uma aparência mais limpa, tente manter o estilo visual consistente em todas as guias.
Embrulhando #
O Guias Avançadas widget é uma maneira sólida de construir guias avançadas Elementor com vários layouts e painéis de conteúdo ricos Misture e combine as predefinições com imagens por guia, ícones ou seções salvas até obter o design desejado.
Se você quiser ver o que mais está disponível, navegue pelo conjunto completo de Widgets e extensões Master Addons. E se você está curioso sobre os recursos do Pro, dê uma olhada no página preços.
