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 acordeão para organizar informações em seções. As seções podem ser expandidas ou recolhidas conforme necessário, economizando espaço e melhorando a experiência do usuário.

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 oferece um widget Advanced Accordion 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.

Esse é o resumo de como criar acordeão avançado com 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.

💡 Adicione exclusividade ao seu site WordPress aplicando Mascaramento de imagem Elementor!

Agora é a sua vez

Agora, experimente você mesmo! Com o ElementsKit você pode efetivamente incorporar acordeões avançados excepcionais 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.