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 widget Guias Avançadas em Master Addons for Elementor leva o básico widget de guias do elementor e adiciona muito mais flexibilidade Você obtém três layouts predefinidos gratuitos mais uma predefinição Pro, a opção de adicionar uma imagem ou ícone a cada guia e, com o Master Addons Pro, a capacidade de carregar uma seção Elementor salva dentro de qualquer painel de guias Para uma visão geral e demonstrações rápidas, consulte o Elementor avançado tabulações widget página.
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 predefinições visuais, adicionar imagens ou ícones a guias individuais, usar texto simples (gratuito) ou um modelo salvo (Pro) como conteúdo do painel e estilizar estados normais, de pairar e 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 (isso precisa do Master Addons Pro).
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, e a última precisa de Pro:
- 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 (Pro): 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 O Pro também adiciona 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 Nenhum, Ícone, ou Imagem para o rótulo da aba.
- Imagem /Ícone: 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, com Pro, Seção Salva, Widget salvo, ou Modelo de página salva.
- 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.
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 (Pro) #
Com Master Addons Pro, altere 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 a predefinição Pro Tabular Content 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 ou imagens a cada guia; preencher painéis com texto ou com seções salvas no Pro; e estilizar os estados normal, hover e ativo.
Posso carregar um modelo Elementor dentro de uma guia?
Sim, com o Master Addons Pro. Defina o Tipo de Conteúdo da guia para 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, uma predefinição Pro, transforma os rótulos em botões maiores no estilo de cartão, que funcionam 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, para que uma guia possa usar uma imagem enquanto outra usa um ícone 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.
