Acordeão Avançado
Longos blocos de texto sobrecarregam, mas respostas ocultas frustram Um acordeão encontra o equilíbrio perfeito quando é cuidadosamente projetado Master Addons Advanced Accord Element lhe dá controle completo sobre esta ferramenta interativa clássica Escolha entre um comportamento limpo Accordion (um aberto de cada vez) ou flexível Toggle (múltiplo aberto) Preencha itens com texto, imagens ou até mesmo modelos salvos inteiros Então, estilize cada estado: o título normal, o hover, o item aberto ativo e a própria área de conteúdo Não é apenas para FAQs; é para listas de recursos, especificações de produtos, portfólios ou qualquer conteúdo que se beneficie de uma apresentação limpa e reveladora sob demanda.
Modos de comportamento duplo e conteúdo dinâmico
Comece definindo como seu acordeão se comporta Selecione o tipo de acordeão: Acordeão tradicional para um fluxo focado e aberto de um item ou Alterne para um estilo de lista de verificação mais flexível, onde os usuários podem abrir vários itens Em seguida, construa seus itens Para cada guia, defina um Título e escolha um Tipo de Conteúdo Vá além do texto simples use Conteúdo para rich text e mídia, ou selecione na Seção Salva, Widget Salvo ou Modelo de Página Salva para inserir blocos inteiros de conteúdo pré-projetados Isso o torna uma ferramenta poderosa para construção modular de páginas e reutilização de layouts complexos.
- Dois modelos de interação: Acordeão (aberto único) para processos escalonados, Alternar (aberto múltiplo) para listas de verificação ou recursos.
- Fontes de conteúdo rico: Preencha itens de acordeão com texto simples, imagens ou seções e modelos inteiros salvos do Elementor.
- Item ativo padrão: defina qualquer item como ativo como padrão quando a página for carregada.
- Gerenciamento fácil: adicione, remova e reordene itens com o botão + Adicionar item e o repetidor intuitivo.
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.
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.
Posso fazer com que um item comece a abrir quando a página for carregada?
Sim. ao editar um item individual na guia Conteúdo, você encontrará uma opção Ativo como padrão Defina isso como Sim para o item que deseja que seja pré-aberto Apenas um item deve ter esse conjunto em um tipo Acordeão para evitar conflitos.
O que são "Seção Salva" ou "Modelo de Página Salva" como tipos de conteúdo?
Estas são poderosas funcionalidades do Elementor Pro Se tiver uma secção (como um perfil de equipa) ou um modelo de página inteiro (como um formulário de contacto) guardado na sua biblioteca do Elementor, poderá seleccioná - lo para aparecer dentro do item de acordeão Isto permite - lhe incorporar layouts complexos e pré - concebidos dentro do seu acordeão.
Como funcionam os estados hover e ativos no celular?
Em dispositivos de toque, o primeiro toque geralmente acionará os estados Hover e Active em rápida sucessão (à medida que o item for aberto).O estilo que você aplica ao estado Active é mais importante para dispositivos móveis, pois mostrará qual item está aberto no momento. O estado Hover pode não ser visto como uma etapa separada.
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.
O acordeão é acessível para navegação no teclado e leitores de tela?
Um widget de acordeão devidamente codificado deve estar acessível O uso de Tags HTML de Título semânticas (como <div>, <h3>) ajuda a estruturar o conteúdo Os estados interativos e atributos ARIA para estados expandidos/colapsados são normalmente tratados pelo widget para garantir que os leitores de tela possam anunciar as alterações.
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
