Widget de acordeão de elementor gratuito para perguntas frequentes e alternâncias
Advanced Accordion é um widget gratuito de Master Addons para seções de perguntas frequentes e conteúdo dobrável Escolha Acordeão para manter um item aberto de cada vez ou Alternar para deixar os visitantes abrirem vários Cada item tem um título e uma resposta, pode começar a abrir e pode usar seus próprios ícones de expansão e colapso Títulos de estilo para os estados Normal, Hover e Active, em seguida, estilize as respostas e os ícones. Master Addons Pro adiciona seções salvas, widgets salvos e modelos de página como conteúdo do item, que também é como você aninha um acordeão dentro de outro.
Como criar um acordeão de perguntas frequentes no Elementor
Você precisa do Elementor e do plugin gratuito Master Addons do WordPress.org.
- Verifique se o Acordeão Avançado está ligado Complementos mestres, widgets.
- No editor Elementor, procure por Acordeão Avançado e arraste-o para a página.
- Defina o tipo de acordeão como acordeão para obter um FAQ clássico.
- Adicione um item por pergunta, digite a resposta e defina a pergunta mais feita como Ativo como Padrão.
- Defina o título HTML Tag como H3 para que as perguntas se tornem títulos.
- Estile os títulos, respostas e ícones na guia Estilo.
Sobre o esquema de perguntas frequentes: este widget não gera dados estruturados do FAQPage Se você quiser resultados ricos em FAQ, ative a opção Esquema de FAQ no widget Accordion do próprio Elementor ou adicione as perguntas com um bloco de FAQ do plugin de SEO. Cada configuração é abordada no Configurações avançadas de widget Accordion.
Acordeão ou alternar comportamento
Tipo Acordeão define o comportamento: Accordion fecha o item aberto quando outro abre, e Toggle deixa vários ficarem abertos Para cada item, adicione o Título e o Conteúdo, ative Activo como Padrão para abri-lo em carga, e ligue Habilitar ícone personalizado para seus próprios ícones. Tipo de conteúdo é conteúdo simples no plugin gratuito Seção salva, widget salvo e modelo de página salva, além de uma cor de fundo por item, precisa de Pro.
- Alterne a velocidade em milissegundos para a animação aberta e próxima.
- Título HTML Tag de H1 a H6, div, span ou a, para que as perguntas possam ser títulos reais.
- Acordeões aninhados: salve um acordeão como modelo e carregue-o em um item com Pro.
Estilo e estrutura de títulos baseados no estado
A barra de título é o que os usuários clicam em 100% e cada estado visual é intencional Estilo o Título separadamente para seus estados Normal, Hover e Ativo (aberto) Para cada estado, defina um Tipo de Fundo exclusivo (cor, gradiente), Cor do Texto e Tipografia Controle o Alinhamento do Título, Preenchimento, Border, Border Radius e adicione uma Box Shadow Este nível de detalhe permite criar uma jornada visual clara: um padrão neutro, um hover convidativo e um estado “open distinto que confirma a ação do usuário.
- Design de estado triplo: aplique estilos distintos às barras de título Normal, Hover e Active.
- Antecedentes avançados: Use cores sólidas ou gradientes para diferentes estados para criar profundidade.
- Controle de caixa completa: ajuste o preenchimento, as bordas e a sombra da caixa para tornar cada barra de título um componente projetado.
Personalizável Alternar ícones com estados duplos
Vá além do ícone de triângulo genérico Ative o ícone personalizado para escolher qualquer ícone da biblioteca tanto para as ações Expandir (estado fechado) quanto para Recolher (estado aberto).Posicione o ícone para a esquerda ou direita Em seguida, estilize esses ícones independentemente para os estados Normal, Hover e Ativo, alterando sua cor, tamanho e plano de fundo Ajuste o espaçamento e o preenchimento de ícones ao redor do ícone para um alinhamento perfeito. Isso transforma um indicador funcional em uma parte coesa da sua linguagem de design.
- Ícones Duplos: Defina diferentes ícones para os estados “plus” (expandir) e “minus” (colapso).
- Estilo de Ícones Específico de Estado: Altere a cor e o fundo do ícone quando o item estiver pairado ou ativo.
- Alinhamento corretamente: ícone de controle Alinhamento, posição e espaçamento em relação ao texto do título.
Área de conteúdo e estilo de contêiner
O conteúdo que desliza para baixo merece sua própria consideração de design Estilo a área de Conteúdo com sua própria Cor de Fundo, Cor do Texto, Tipografia e preenchimento interno Adicione uma Sombra de Texto para legibilidade, se necessário Em seguida, estilize o contêiner geral de Itens que contém todas as seções de acordeão: defina o Espaçamento entre os itens, uma Fronteira global, Raio de Fronteira e Sombra de Caixa Isso garante que todo o widget pareça um componente unificado e polido, e o conteúdo aberto seja fácil e agradável de ler.
- Design da área de conteúdo: Estile o plano de fundo e o texto do conteúdo suspenso para obter uma legibilidade ideal.
- Polonês em nível de contêiner: aplique Border Radius e Box Shadow a todo o grupo de acordeões.
- Espaçamento entre itens: controle o espaçamento (margem) entre cada item de acordeão para obter uma aparência limpa e separada.
Acordeão Elementor vs Adições Mestres Acordeão Avançado
O Elementor Gratuito agora tem seu próprio widget Accordion. Veja como os dois se comparam, para que você possa escolher o widget certo.
| Característica | Acordeão Elementor | Acordeão Avançado Master Addons |
|---|---|---|
| Preço | Gratuito em Elementor | Gratuito, com conteúdo de modelo em Pro |
| Esquema de perguntas frequentes | FAQ Schema opção | Sem saída de esquema |
| Conteúdo aninhado | Coloque quaisquer widgets em cada item, incluindo outro acordeão | Texto em livre; salvou seções, widgets ou modelos com Pro |
| Comportamento aberto | Estado padrão e itens máximos expandidos | Acordeão ou Alternar, mais Activo como Padrão por item |
| Ícones por item | Ícones compartilhados | Ícones personalizados de expansão e colapso por item |
| Estilo título | Normal, Hover e Ativo | Normal, Hover e Active com fundo, borda e sombra |
Escolha o Acordeão do Elementor quando precisar de esquemas de perguntas frequentes ou widgets dentro de itens gratuitamente Escolha Acordeão Avançado para ícones por item e Alterne o comportamento com um estilo detalhado Widgets relacionados: Alternar conteúdo, Guias e Índice.
Perguntas frequentes para acordeão avançado
Qual é a diferença prática entre o tipo “Accordion” e o “Toggle”?
Acordeão: Apenas um item pode ser aberto de cada vez Abrir um novo item fecha automaticamente o anterior Melhor para páginas de FAQ ou instruções sequenciais onde você deseja minimizar a rolagem e focar a atenção.
Alternar: Vários itens podem ser abertos simultaneamente Os usuários podem expandir vários itens para comparar ou reunir informações O melhor para listas de verificação de recursos, listas de especificações de produtos ou conteúdo em que os usuários precisam ver várias seções de uma só vez.
O widget Advanced Accordion é gratuito?
Sim. o widget é gratuito com os tipos Accordion e Toggle, Active as Default, ícones personalizados e estilo completo seção salva, conteúdo de widget e modelo e cores de fundo por item precisam Master Addons Pro.
O que são tipos de conteúdo de Seção Salva e Modelo de Página Salvo?
São opções do Master Addons Pro que carregam algo da sua biblioteca de modelos do Elementor em um item, como uma seção de formulário de contato ou outro acordeão É assim que você constrói acordeões aninhados com este widget.
O acordeão adiciona esquema de perguntas frequentes?
No. Advanced Accordion não gera dados estruturados do FAQPage Para resultados ricos em FAQ, use o widget Accordion do Elementor com sua opção FAQ Schema ou um bloco FAQ de plugin de SEO.
Posso controlar a velocidade de animação de abertura e fechamento?
Sim. Na guia Conteúdo, você encontrará Alternar velocidade (ms).O valor está em milissegundos (por exemplo, 300).Um número menor (como 200) o torna mais rápido e rápido; um número maior (como 500) o torna mais lento e deliberado.
Como faço um item aberto por padrão?
Abra o item na guia Conteúdo e ative Ativo como padrão Com o tipo Acordeão, defina-o em apenas um item.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
