Uma seção de FAQ vive ou morre por seu acordeão: as perguntas permanecem compactas, as respostas aparecem no clique e a página nunca parece longa Acordeão Avançado widget em Complementos Mestres para Elementor constrói esse padrão com um toque que a maioria dos widgets de acordeão pula: cada item pode conter texto simples ou um modelo de Elementor inteiro salvo, portanto, uma resposta pode ser um formulário de contato, uma tabela de preços ou até mesmo outro acordeão.
Este guia percorre o widget em uma seção de perguntas frequentes reais, desde a lista de itens até o acordeão estilizado na página ao vivo.
Procurando o que o widget faz em vez de como configurá-lo? o Visão geral do widget de acordeão do elementor cobre os recursos, opções de estilo e preços em uma página.
O que o widget Advanced Accordion faz #
O widget renderiza uma pilha de itens dobráveis Cada linha tem um título, uma área de conteúdo e um ícone de alternância que alterna entre os estados de expansão e colapso O Tipo Acordeão dropdown escolhe o comportamento: Acordeão mantém um item aberto de cada vez, fechando o último quando um novo abre; Alternar permite que os visitantes mantenham vários itens abertos ao mesmo tempo.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- O widget Acordeão Avançado habilitado no painel de opções Master Addons, em Widgets Básicos.
- Opcional: um modelo Elementor salvo se você quiser carregar um dentro de um item de acordeão.
Adicione e gerencie itens de acordeão #
No Conteúdo guia, a lista de itens contém uma entrada por pergunta. Clique em um item para expandir suas configurações, duplicar ou excluir linhas com os ícones ao lado de cada um e pressione Adicionar Item para estender a lista A demonstração executa um FAQ de encanamento de cinco perguntas.
Abaixo da lista estão os controles compartilhados:
- Mostrar ícone ativo/inativo?: alterna os ícones de expansão e colapso à direita de cada título.
- Expanda o ícone e o ícone de colapso: duas guias, um seletor de ícones cada. Mais sobre estes abaixo.
- Alternar velocidade (ms): quão rápido os itens abrem e fecham, 300 milissegundos por padrão Esse padrão parece rápido; depois de 600, o acordeão começa a parecer que está parando.
- Título HTML Tag: a marcação em torno de cada pergunta, div por padrão Escolha H3 se as perguntas devem alimentar a estrutura de cabeçalho da página.
Coloque texto ou um modelo inteiro dentro de um item #
Abra um único item e os controles por item aparecerão: Activo como Padrão inicia a página com esse item aberto, Habilitar ícone personalizado dá-lhe o seu próprio ícone de alternância, e Habilitar cor de fundo tonalidades exatamente nessa linha.
Aquele a lembrar é Tipo de conteúdo. Defina-o como texto para uma resposta digitada normal ou para Seção Salva e escolha qualquer modelo da sua biblioteca Elementor. A demonstração carrega uma seção de contato, completa com um formulário de trabalho, dentro do primeiro item de acordeão:
É também assim que funcionam os acordeões aninhados: guardar um acordeão como modelo, depois carregá-lo dentro de um item de outro acordeão Categorias com subquestões, módulos de curso com lições, esse tipo de estrutura Dois níveis é o limite prático; mais profundo que isso e os visitantes perdem a noção de onde estão.
Defina os ícones de expansão e colapso #
O Expandir ícone e Ícone de colapso cada guia abre a biblioteca de ícones do Elementor O ícone expandir é mostrado em itens fechados, o ícone de colapso no aberto.
Os pares correspondentes são os melhores: caret para baixo com caret para cima, mais com menos, chevron com chevron A demonstração se instala em carets.
Estilize os títulos #
O Estilo tab arromba Itens, Título, Conteúdo, e Alternar ícones. A seção Título carrega Normal, Pairar, e Ativo estados-membros, portanto a questão em aberto pode parecer diferente das demais.
- Tipo e cor de fundo: o preenchimento da barra de título por estado.
- Cor e tipografia do texto: o texto da pergunta.
- Alinhamento do título: esquerda, centro ou direita.
- Tipo de borda, raio de borda, sombra de caixa, preenchimento: a demonstração usa um raio de 8 pixels e preenchimento de 20 por 16 para barras suaves e espaçosas.
A demo dá aos títulos um fundo cinza claro e texto azul, e a tela é atualizada ao vivo enquanto o seletor de cores está aberto:
Estilize a área de conteúdo #
O Conteúdo a seção estiliza o painel de respostas: Cor de fundo, Cor do texto, Tipografia, Preenchimento, e Sombra de texto. Mantenha o fundo de resposta mais leve que as barras de título, para que os itens abertos sejam lidos como conectados, mas distintos.
Estilize os ícones de alternância #
O Alternar ícones seção termina as extremidades da linha.
- Posição do ícone: esquerda do título, direita dele, ou nenhum.
- Tamanho do ícone, espaçamento, preenchimento: a demonstração executa ícones de 18 pixels.
- Cores do ícone: Estados Normal, Hover e Active, cada um com fundo e cor do ícone.
O resultado na página #
Na página ao vivo, o acordeão se comporta exatamente como configurado: uma pergunta aberta de cada vez, os carets virando à medida que os itens alternam e as barras de título estilizadas mantêm a seção digitalizável.
Casos de uso comum #
- Seções FAQ em landing pages, páginas de preços e páginas de produtos.
- Formulários de contato ou orçamento dentro de uma resposta, usando o tipo de conteúdo da Seção Salva, como a demonstração.
- Acordeões aninhados para conjuntos de perguntas de categoria e subcategoria.
- Esboços de curso ou documentação onde cada módulo se expande em suas lições.
- Listagens de empregos com a função de título e detalhes no painel.
Dicas para um acordeão melhor #
- Escolha o tipo de acordeão para perguntas frequentes. Uma resposta aberta mantém os visitantes focados; Alternar se adequa ao conteúdo de referência que as pessoas comparam lado a lado.
- Abra a pergunta mais feita por padrão. Defina Active como Padrão na sua melhor pergunta para que a seção nunca comece totalmente fechada.
- Use H3 como Tag HTML de título nas páginas de perguntas frequentes. Os mecanismos de pesquisa leem as perguntas como títulos adequados.
- Mantenha os pares de ícones consistentes. Um caret que muda de direção comunica o estado instantaneamente; ícones incompatíveis fazem os visitantes pensarem.
- Peso do modelo mental nas seções salvas. Um formulário ou tabela dentro de um item é ótimo; uma seção de largura total com imagens pesadas será carregada mesmo enquanto estiver recolhida.
Tutoriais Vídeo #
Se preferir assistir ao Acordeão Avançado em ação, este vídeo aborda a facilidade com que alguém pode construir um, do início ao fim:
E este mostra como adicionar um acordeão aninhado, carregando um acordeão dentro de outro com o tipo de conteúdo da Seção Salva:
Perguntas frequentes #
O que é o widget Advanced Accordion em Master Addons?
É um widget Elementor para seções de conteúdo dobráveis Você adiciona itens com títulos e respostas, escolhe o comportamento de acordeão ou alternância, define expandir e colapsar ícones e estiliza os títulos, conteúdo e ícones por estado Os itens podem conter texto ou um modelo salvo completo.
Qual é a diferença entre o tipo Accordion e Toggle?
O Accordion mantém um item aberto de cada vez, fechando o item anterior quando um novo é aberto O Toggle permite que os visitantes abram vários itens de uma vez e fechem cada um independentemente Ambos são definidos a partir do menu suspenso Tipo de acordeão na guia Conteúdo.
Posso colocar um formulário ou modelo dentro de um item de acordeão?
Sim. Defina o Tipo de Conteúdo do item como Seção Salva e escolha qualquer modelo da sua biblioteca Elementor A demonstração carrega uma seção de contato completa com um formulário de trabalho dentro de um item de acordeão, e qualquer outro modelo salvo funciona da mesma maneira.
Como faço para criar um acordeão aninhado no Elementor?
Salve um acordeão como um modelo Elementor primeiro Em seguida, no acordeão pai, defina o Tipo de Conteúdo de um item para Seção Salva e escolha esse modelo O acordeão interno carrega dentro do item externo, dando-lhe dois níveis de conteúdo dobrável.
Um item pode permanecer aberto por padrão?
Sim. Expanda o item na guia Conteúdo e ligue o Ativo como Padrão Esse item começa a abrir quando a página é carregada, o que funciona bem para a pergunta que os visitantes mais fazem.
Embrulhando #
O widget Acordeão Avançado lida com o padrão padrão de perguntas frequentes e, em seguida, vai além: ícones e planos de fundo por item, estilo de três estados e um tipo de conteúdo Seção Salva que coloca formulários, tabelas ou acordeões aninhados inteiros dentro de qualquer item Navegue pelo conjunto completo de Widgets e extensões Master Addons para ver o que mais vem com o plugin e verifique o página preços para extras Pro como padrões de acordeão.
