Ao projetar um site WordPress, há muitas coisas diferentes que você pode fazer para que ele pareça mais profissional e amigável para os visitantes. E obrigado a muitos temas WordPress e plug-ins que vêm com a capacidade de estender o WordPress de todas as maneiras, suas opções são praticamente ilimitadas. Uma dessas opções é adicionar um acordeão às suas páginas ou postagens do WordPress. Não importa se você planeja criar uma seção de perguntas frequentes , uma página de destino ou simplesmente deseja dar uma aparência mais organizada e organizada ao seu site, este elemento útil é exatamente o que você precisa.
Desta vez, decidimos ajudá-lo a aprender a criar e adicionar acordeões e alternadores no WordPress . Isso é muito fácil se você usar a ajuda do plugin certo. Mostraremos como fazer isso usando o widget Accordions and Toggles do plugin Qi Addons para Elementor . Mas, primeiro, falaremos um pouco sobre o que são acordeões e batoques e também explicaremos a principal diferença entre os dois.
Portanto, aperte o cinto e continue lendo:
O que são Acordeões e Alterna no WordPress Qual é a diferença entre um acordeão e um botão de alternância Quando usar o acordeão e um botão de alternância Adicionando Acordeões e Alternadores usando os Complementos Qi para o plugin Elementor
O que são Acordeões e Alternadores no WordPress
Resumindo, acordeões e botões de alternância são elementos de design usados para organize vários segmentos (ou partes de conteúdo) em uma unidade compacta. Isso geralmente significa construir diferentes seções separadas por guias que podem ser facilmente expandidas . Isso os torna especialmente úteis, pois permitem que você adicione muito conteúdo a essas seções enquanto economiza espaço na página.
Digamos que você queira criar uma página de FAQ (uma página que conterá as respostas às perguntas seus visitantes ou clientes em potencial perguntam com mais frequência), por exemplo. Usando acordeões e alternadores, você será capaz de organizar perguntas e respostas de uma forma que mostrará perguntas e descobrirá respostas em uma guia extensível. Mas, independentemente do que você precisa para usar acordeões e alternadores, é uma estratégia bastante amigável que ajudará a economizar muito espaço em sua página e fazer seu conteúdo parecer mais organizado como um todo.
Qual é a diferença entre um acordeão e uma alavanca
Apesar de parecerem semelhantes, as sanfonas e alternâncias têm algumas diferenças. Especificamente, quando uma seção de um acordeão é clicada, ela se expande, mostrando seu conteúdo oculto. Quando outra seção é clicada, a anterior fecha automaticamente conforme a outra se expande. Portanto, em um acordeão, você só pode ter uma seção aberta por vez.
Por outro Por outro lado, um botão de alternância permite que você mantenha a seção anterior aberta, mesmo quando outra for expandida. Claro, você pode fechar cada seção manualmente, se quiser.
Isto é a principal diferença entre um alternador e um acordeão-ambos têm a mesma função (guardar conteúdo extra e ajudá-lo a organizá-lo de uma forma que economize espaço e pareça amigável), mas eles têm comportamentos diferentes quando usados em uma página.
Resumindo, os acordeões permitem que você abra apenas uma seção, enquanto os botões de alternância permitem que várias seções sejam abertas ao mesmo tempo.
Complementos Qi gratuitos Ver mais 
Quando Use acordeões e botões de controle
Como já estabelecemos, os acordeões e botões de controle são ótimos para economizar espaço e organizar seu conteúdo. Portanto, você pode usá-los sempre que desejar fornecer muitas informações em uma página, ao mesmo tempo que a mantém arrumada e organizada para seus visitantes ao mesmo tempo. Por exemplo, quando deseja organizar diferentes informações sobre um produto ou serviço em sua página de destino ou loja online, ou quando você deseja criar uma página de perguntas frequentes mencionada acima-seja para sua empresa ou mesmo portfólio online . Você pode até usá-los se precisar escrever qualquer parte do conteúdo que tenha um conjunto complexo de instruções. Nesse caso, você pode usar acordeões e/ou alternadores para agrupar diferentes etapas em diferentes seções e, assim, tornar cada etapa mais fácil de digerir pelos leitores.
Em geral, não há limites para quando você deve usar acordeões e alterna em WordPress. Você só precisa decidir se é algo que será útil para você e se se encaixará no design geral do seu site.
Não importa se você prefere usar acordeão em vez de alternador ou o contrário , usando nosso plugin Qi Addons para Elementor e seu widget Accordions and Toggles, você terá acesso a ambos essas opções. Fique ligado enquanto o orientamos no processo de adição de acordeões e alternadores no WordPress. Também mostraremos alguns estilos de design diferentes que você pode criar com este widget útil enquanto estamos trabalhando nisso.
Caso prefira assistir a vídeos em vez de ler, também temos o vídeo tutorial sobre o mesmo assunto, portanto, certifique-se de dar uma olhada:
Adicionando acordeões e alternadores usando os complementos Qi para Plugin Elementor
Vindo com 60 widgets diferentes, Qi Addons for Elementor é um ótimo plugin que permite a personalização completa do seu site WordPress . Você pode construir lindas seções que correspondem completamente ao design do seu site em poucos minutos, sem usar nenhum tipo de codificação. Existem vários tipos de addons que você pode usar e todos vêm com seu próprio conjunto de recursos altamente flexíveis-de addons criativos e orientados para negócios a elementos de infográficos e tipografia. Resumindo, se você usar Complementos Qi para Elementor, suas opções de personalização são praticamente ilimitadas-não importa para qual tipo de site você deseja usá-los.
Um ótimo widget que também vem com este plug-in é um chamado widget Accordions and Toggles . Assim como todos os outros widgets desta coleção, ele vem com um conjunto de opções totalmente flexíveis que permitirão a você criar, personalizar e estilizar seus acordeões e alternadores da maneira que desejar. Você poderá definir ícones personalizados para abrir e fechar acordeões e alternadores, alterar fontes, usar e combinar cores diferentes para seu texto, plano de fundo e ícones e muito mais.
Agora, vamos através das configurações do widget em mais detalhes e mostrar como você pode alterar e combinar diferentes opções para obter acordeões e alternadores em vários estilos.
No entanto, antes de começarmos nosso tutorial, apenas uma observação rápida, embora óbvia-Qi Addons for Elementor é um plugin desenvolvido para o construtor de páginas Elementor. Portanto, você deve instalar o criador de páginas Elementor primeiro para usar nosso plugin Qi e seus widgets. E caso precise de mais informações sobre como usar este construtor incrivelmente fácil de usar e rico em recursos, você pode sempre verificar nosso Tutorial do Elementor .
Adicionando e personalizando o widget Accordions and Toggles
Em primeiro lugar, vá para o backend de sua página ou poste e pesquise para acordeões e alternadores na barra lateral Elementor . Nosso widget aparecerá imediatamente.
Em seguida, basta arrastá-lo para a direita. Neste ponto, faremos a maior parte da personalização na guia Conteúdo do widget, antes de prosseguirmos para a guia Estilo.
A primeira coisa que você notará aqui é que, por padrão, o widget possui dois itens com algum texto Lorem Ipsum padrão.
Você também notará que ao clicar em um item, o outro será fechado-este é o tipo de comportamento acordeão .
Este comportamento pode ser facilmente alterado para Alternar usando a opção Comportamento na seção Geral (guia Conteúdo).
Depois de você faça isso, você notará que ambos os itens permanecerão abertos quando você clicar neles. Resumindo, o comportamento Alternar permite que você mantenha todos os seus itens abertos ao mesmo tempo.
Além dessa alteração básica, todas as outras configurações para os comportamentos Acordeão e Alternar são as mesmas.
Agora que demonstramos o que o Alternador faz, voltaremos ao comportamento Acordeão e examinaremos todas as outras opções, mas você pode, é claro, usar o tipo de comportamento de sua preferência.
Seguindo para a opção Estilo localizada abaixo-por padrão, é definido como Padrão, mas você pode alterá-lo para Em caixa (com cada item tendo um sublinhado), Borda superior (uma borda será colocada acima cada item) e Borda entre (uma borda é colocada entre os títulos dos itens). Para nosso exemplo, definimos essa opção como Borda superior.
Em seguida, estão as opções Ícone Abrir e Ícone Fechar. Aqui você poderá escolher seus ícones para abrir e fechar na biblioteca de ícones ou fazer upload de um SVG (como fizemos).
Clique no botão Inserir mídia quando terminar de selecionar os ícones para abrir e fechar.
Agora seus ícones de abrir e fechar mudarão automaticamente quando você abrir e fechar itens (como deveriam).
Assim como r as configurações de itens, você notará que há dois itens por padrão. Você pode facilmente adicionar outros clicando em Adicionar Item. Adicionamos um item adicional, então nosso acordeão agora consiste em três itens.
Para substituir o conteúdo em seus itens, clique no item que deseja alterar e simplesmente insira seu título no campo Título. Você também poderá usar o campo Conteúdo para alterar a aparência do seu texto com mais detalhes. Além disso, você pode escolher entre o modo Visual e Texto (o último é ótimo para quem deseja adicionar qualquer código ou CSS para estilizar o texto).
Para nosso exemplo, transformamos nosso acordeão em uma seção de perguntas frequentes. Alteramos o texto de nossos títulos, bem como do restante dos itens (usando o campo Conteúdo) para corresponder aos títulos. Você irá, é claro, adicionar seu próprio conteúdo para os títulos e para o texto dos itens.
Estilizando o widget
Agora, na guia Estilo, você verá muitas opções isso permitirá que você estilize seus acordeões da maneira que desejar.
A primeira opção da lista permitirá que você defina sua tag de título . É definido como H3 por padrão, mas você pode escolher qualquer coisa de H1 a H6 (mudamos o nosso para H5).
Clicar na seção Tipografia abre uma nova lista de opções que o ajudarão a definir a tipografia de seus acordeões em todos os detalhes.
A opção Família permite que você altere a família da fonte do seu texto-você pode inserir o nome manualmente ou pesquisar a fonte desejada na lista suspensa (a nossa é definida como padrão).
A opção Tamanho ajuda a ajustar o tamanho da fonte. Definimos o nosso para 21 px.
Em seguida, há a opção Peso. Você pode definir como Negrito ou simplesmente usar um dos valores numéricos (deixamos nosso peso no Padrão).
Com a opção Transform de texto, você poderá colocar o título em maiúsculas, minúsculas, maiúsculas ou normal ( esse é o nosso padrão). Quanto ao estilo, você pode fazer com que pareça normal, transformá-lo em itálico ou oblíquo.
Há também a opção Decoração que permite definir Sublinhado, Sobreposição, Linha de passagem ou não usar nenhum deles (que também é nossa configuração padrão ).
A opção Line-Height ajuda a criar mais espaço ao redor do título. O valor padrão para essa configuração é ems, mas se você quiser, pode facilmente alterná-lo para pixels.
Por último, mas não menos importante, a opção Espaçamento entre letras oferece mais espaço entre as letras.
E é isso para as opções relacionadas à tipografia.
Depois, você encontrará as configurações que permitem escolher entre o modo Normal e Ativo. O modo Ativo permite estilizar a aparência do item de acordeão quando ele é aberto, enquanto Normal permite estilizar a aparência de outros itens de acordeão que não estão ativos.
Em configurações normais, há a opção Cor do título que você pode usar para alterar a cor dos títulos dos itens. Use o controle deslizante ou um código hexadecimal para escolher a cor desejada. Usamos o código hexadecimal para o nosso (é # ff714a).
Agora, você pode ver que o título do item Ativo mudou de cor junto com o Normal. Isso porque ainda não definimos a cor para o título Ativo.
A cor de fundo permite que você colora o fundo do campo de título em seu acordeão. Não o usaremos em nosso acordeão, mas queríamos mostrar um exemplo rápido de como pode ser a aparência, no entanto (alteramos a cor de fundo para o padrão logo em seguida):
Logo abaixo, há a opção de preenchimento de título. Ao aumentar os valores, você verá que o espaço ao redor dos títulos também aumenta uniformemente. No caso de desejar ter valores diferentes em lados diferentes, você pode simplesmente desvincular os campos usando o botão delink e redefinir todos os valores. A partir de então, você poderá adicionar valores diferentes para cada lado.
Adicionamos 27px para o preenchimento superior e 29px para o preenchimento inferior, deixando o preenchimento esquerdo e direito com zero pixels.
Em seguida, na guia Configurações ativas, você verá que há um conjunto de opções idêntico ao da guia Normal. Como mencionamos acima, essas configurações se aplicarão apenas ao item acordeão aberto.
Não alteramos a cor ativa do título, pois queríamos que todos os títulos dos itens tivessem a mesma cor, independentemente de serem ativo ou não. O mesmo vale para a cor ativa do fundo do título-as alterações serão aplicadas apenas ao item de acordeão ativo. Também deixamos este campo inalterado (por enquanto).
O preenchimento ativo do título permite que você defina diferentes preenchimentos em comparação com o normal. Desvinculamos os valores para os nossos e definimos o preenchimento superior em 27 e o inferior em 13.
Há também um efeito interessante que você pode criar usando essas opções-para ser mais específico, você pode configurá-los para que a cor mude quando um item for aberto.
Atualmente, ainda temos o acordeão que tem as mesmas cores de fundo ativas e normais. Para diferenciá-los, basta alterar a cor de fundo de uma (ou ambas) guias.
Na guia Normal, definimos a cor de fundo do título usando o código hexadecimal (# d5e7f6) e usamos o mesmo tom para nossa cor de fundo do conteúdo.
Quanto à cor de fundo ativa do conteúdo, nós a definimos para um tom de azul mais intenso (# c3e0f8).
Copiamos este código e fomos para Configurações ativas mais uma vez, onde colamos este código na cor ativa do fundo do título.
Agora, depois de clicar nos itens, você verá que a cor de fundo muda dependendo de seu estado normal ou ativo.
Claro, esta é apenas uma das muitas combinações de configuração que você pode usar ao criar seus próprios acordeões e alterna. Portanto, sinta-se à vontade para experimentar e escolher a aparência que melhor se adapta às suas preferências e combina melhor com o design do seu site.
Agora que mostramos um exemplo do que a alteração das cores de fundo pode fazer para a aparência geral de seus acordeões, nós reverteremos as opções de cores para as originais.
Há outra opção de cor que você pode usar para estilizar seu acordeão, chamada Cor de Conteúdo. Como o próprio nome sugere, ele muda a cor do texto nos itens. Definimos o nosso para a cor preta padrão. Claro, você pode mudar o seu para a cor de sua preferência.
Depois, existe a opção Content Padding que permite alterar o espaço ao redor do texto (aumentá-lo ou diminuí-lo). Desvinculamos nossos valores e definimos valores diferentes para cada lado (defina o direito em 30px, adicionamos 33px para o inferior e deixamos o preenchimento superior e esquerdo em 0px).
A opção Cor da borda permitirá você ajusta a cor das linhas entre os próprios itens. Você pode definir qualquer cor que desejar para esta borda. Adicionamos um código hexadecimal e tornamos o nosso uma cor cinza claro (# e1e1e1).
Logo abaixo, a opção Tamanho do ícone permite aumentar (ou diminuir) o tamanho dos ícones de acordeão. Definimos o nosso como 26 px.
Finalmente, há outra lista de configurações que tem uma chave-Normal e Hover. Estas são as configurações que permitem que você altere o“ normal ”Cor do ícone, bem como sua cor ao passar o mouse.
Se quiser que a cor mude ao passar o mouse sobre um ícone, certifique-se de definir a cor diferente na guia Hover.
Nós adicionamos o código hexadecimal aqui que é um tom ligeiramente mais pálido de laranja (# ff714aad). Agora, nosso ícone tem um efeito de desbotamento quando passamos o mouse sobre ele.
E isso conclui a maioria das opções disponíveis no widget Acordeões e Botões. Já a guia Avançado contém algumas opções relacionadas ao posicionamento e capacidade de resposta, animações, etc. de seus acordeões. Ainda assim, esta guia está disponível em todos os widgets Elementor e não é exclusiva para nosso widget de alternância de acordeões, e é por isso que não cobriremos essas opções neste tutorial.
Clique no botão Publicar/Atualizar para salvar seu acordeão quando estiver satisfeito com a aparência.
Finalmente, mesmo se você voltar à guia Conteúdo e mudar o comportamento do acordeão para Alternar, todos os itens permanecerão abertos quando você clicar neles, com todas as outras opções de personalização e estilo intactas.
Em suma, nunca é tarde demais para alterar qualquer uma das configurações em seu widget.
Resumindo
Se você deseja criar acordeões e/ou alternadores em seu site WordPress para torná-lo mais organizado e fácil de usar, sugerimos usar os Complementos QI para Elementor plugin e seu widget Accordions and Toggles. Este widget não é apenas super intuitivo e fácil de usar, mas também vem com várias opções que deixam muito espaço para experimentação e permitem que você crie e personalize acordeões de todas as maneiras.
Como nós’Como mencionei antes, esses são apenas alguns exemplos de como você pode combinar as opções disponíveis no widget Acordeões e Botões. Você pode experimentar as configurações para encontrar a aparência que melhor se adapta às suas preferências. Ou você pode ir para a página do widget e verificar alguns dos exemplos de estilo presentes lá, caso precise de inspiração adicional. A direção escolhida depende totalmente de você.
