Como criar acordeão avançado com Elementor

Visitantes do site gostam de seções recolhíveis para verificar informações rápidas e recolhê-las com base em seus interesses. Então, acordeões avançados bem personalizados ajudam a manter seu site WordPress limpo e suavizar a experiência do usuário.

Neste guia, mostraremos passo a passo como criar um acordeão avançado com o Elementor.

O que é um acordeão?

Um acordeão é um elemento retrátil que permite ocultar e revelar conteúdo em uma página da web do WordPress.
Você pode usar o accordion to organize information into sections. The sections can be expanded or collapsed as needed, saving space and improving the user experience.

Benefícios de usar acordeões avançados no design de sites WordPress

⭕ O acordeão avançado Elementor fornece uma maneira limpa e organizada de apresentar informações.

⭕ Você pode reduzir o tempo de carregamento da página escondendo conteúdo menos importante em acordeões. Também pode melhorar a classificação do seu site nos mecanismos de busca.

⭕ Acessar informações adicionais com acordeões avançados é fácil. Então, pode incentivar os usuários a explorar seu site ainda mais. Além disso, os acordeões são adaptáveis a diferentes estilos de design e layouts.

⭕ Você pode projetar acordeão avançado do WordPress para permitir usuários com deficiências para acessar informações.

Apresentando o Módulos e widgets do ElementsKit 😍😍😍

Como crie um acordeão avançado no Elementor

Embora o widget acordeão esteja incluso no Elementor, você pode encontrar opções de estilo limitadas. Se você estiver buscando uma personalização mais avançada, considere usar um complemento do Elementor. 

Aqui, nós selecionamos o ElementsKit. O plugin offers an Advanced Accordion widget que permite que você crie um site mais atraente visualmente e funcional.

Como criar acordeão com ElementsKit

Um widget acordeão é um tipo de widget que permite criar seções recolhíveis no seu site WordPress. Ele fornece uma maneira de organizar o conteúdo em várias seções, cada uma das quais pode ser expandida ou recolhida para revelar seu conteúdo. Isso é frequentemente usado para exibir informações de forma compacta e amigável ao usuário.

Etapa 1: Obtenha o plugin ElementsKit

Acesso ao painel do WordPress:
1. Vá para Plugins
2. Clique em Adicionar novo plugin
3. Pesquisar ElementosKit
4. Depois de encontrá-lo, clique no botão Instalar agora

Você também pode baixe o plugin ElementsKit do WordPress.org rapidamente. Depois disso, você só precisa fazer o upload para a seção de plugins do seu painel.

No entanto, Advanced Accordion é um widget Pro do ElementsKit. Não se atrase! Escolha um plano flexível e aproveite criando acordeões avançados com facilidade.

Etapa 2: Ative o plugin

Depois de instalar o plugin, você precisa ativá-lo.

Etapa 3: Ative o widget Advanced Accordion

1. Vá para ElementsKit
2. Encontrar Widgets
3. Encontre o Advanced Accordion e ligue o botão de alternância
4. Clique em SALVAR ALTERAÇÕES

Etapa 4: Abra uma página do seu painel 

1. Navegar para páginas
2. Abra qualquer página existente ou adicione uma nova página
3. Clique em Editar com Elementor (para a nova página, você pode encontrar esta opção após abrir a página)

Etapa 5: adicione o Advanced Accordion ao editor

Pesquise pelo nome do widget, clique nele ou arraste e solte-o no editor.

Etapa 6: Explore as opções de personalização

Na parte de conteúdo, você verá –

• Acordeão:
  • Contente: Aqui, você pode adicionar conteúdo, editar o título, alternar o botão 'manter aberto'
  • Manter o primeiro slide aberto automaticamente: Se quiser manter o primeiro slide aberto, você pode ativar este botão.
  • Ájax: Se você habilitar esta opção, ela atualizará apenas o conteúdo relevante no acordeão, proporcionando uma experiência de usuário mais suave. Isso pode ser particularmente útil ao lidar com um grande número de itens do acordeão.
  • Estilo: Há vários estilos de acordeão para escolher.
• Ícone:
  • Posição do ícone: Defina a posição do ícone aqui.
  • Mostrar contagem de loops: Você pode mostrar a contagem de loops ou mantê-la oculta.
  • Ícone direito: Selecione o símbolo que aponta para a direita. Ele indica a expansão do item acordeão.
  • Ícone direito ativo: Selecione um ícone para indicar o estado de um ícone direito quando ele é clicado ou tocado.

Na parte de estilo, você pode personalizar o acordeão utilizando estas opções –

• Título: Aqui, você pode alterar o tipografia, cor, tipo de fundo, sombra de caixa, margem inferior, etc. para os títulos.
• Contente: Para estilizar o conteúdo do acordeão, você pode usar diferentes cores, tipografia, raio de borda, preenchimento e assim por diante.
• Fronteira: Para alterar o tipo de borda, largura, cor, sombra da caixa, etc. de cada aba ou acordeão, você pode utilizar esta opção.
• Ícone: Ele permite que você ajuste a margem, a cor e o tamanho do ícone.

That’s the long and short of how to create accordion with Elementor! ✌️

Por que você escolherá o widget ElementsKit Advanced Accordion em vez do widget Elementor Accordion?

Vamos conhecer algumas diferenças entre o ElementsKit Advanced Accordion e o Elementor Accordion.

Besides creating advanced accordions, you can create image accordions with ElementsKit to captivate your audience effectively. 👌

Agora é a sua vez

Agora, experimente você mesmo! Com o ElementsKit você pode efetivamente incorporate exceptional advanced accordions no design do seu site.

Dicas para você –

⭐ Experimente diferentes opções de personalização para obter a aparência e a funcionalidade desejadas.

⭐ Considere o design geral do seu site.

⭐ Teste o resultado final em diferentes dispositivos e navegadores.
⭐ Atualize seus acordeões regularmente.