Como criar alternâncias e acordeões no WordPress
Acordeões e Alternâncias são elementos úteis que adicionam mais funcionalidades à sua página, permitem estruturar melhor o conteúdo e ajudam na organização geral do site. Adicioná-los não é especialmente complicado, mas pode ser especialmente fácil com a ferramenta certa.
É por isso que optamos pelos Complementos Qi para Elementor, fáceis de usar, que incluem uma ampla variedade de opções de personalização e são incrivelmente fáceis de usar. Este plugin é atualmente a maior coleção de 60 widgets gratuitos que você pode usar para adicionar mais funcionalidades ao seu site. Além disso, há uma incrível coleção de mais de 40 widgets Qi premium. E o que também é muito importante é que ele seja compatível com todos os temas do WordPress.
Adicionando acordeões e alternando widget gratuito com complementos Qi para Elementor
O Qi Addons permite que você personalize completamente os acordeões e alterne o estilo para o tema do WordPress que você está usando, de fontes a cores e bordas e tudo mais.
Para se inspirar, recomendamos verificar a página de widgets. Mostraremos como o aplicamos.
A percepção básica de como o Elementor funciona é tudo o que você precisa entender nesta seção. Esta é na verdade uma linha contendo duas colunas com uma imagem na coluna da esquerda e acordeões na coluna da direita. Claro, um acordeão pode ocupar toda a linha ou qualquer parte da linha, conforme sua necessidade.
Antes de continuarmos, vamos verificar algumas características básicas de estilo que este addon vem com. Então vamos começar pelo Comportamento. Dois tipos de comportamento são possíveis – Acordeões onde apenas um item pode ser aberto em um ponto no tempo e Toggles que permite que mais de um item seja aberto ao mesmo tempo.
O estilo pode ainda ser definido com bordas e várias opções estão disponíveis:
- Padrão – sem bordas
- Em caixa – com bordas,
- Borda superior – só tem borda na parte superior acima do título
- Border Between- tem apenas a fronteira entre o título e a descrição
Como adicionar Accoridons e alternar com Qi Addons
Para começar, vamos definir a linha para ser dividida em duas colunas e adicionar uma imagem à coluna da esquerda, apenas para tornar a seção mais atraente visualmente.
Depois que a imagem for adicionada, encontraremos o widget Acordeões e alternâncias digitando na barra de pesquisa ou rolando o menu. Quando o widget for encontrado, basta clicar nele, segurá-lo e mover para onde deseja colocar o novo elemento.
Adicionamos o widget Acordeões e Alternâncias ao lado direito da linha e você pode ver todas as configurações relacionadas a ele à esquerda. As configurações padrão do widget são definidas de forma que o texto e o estilo correspondam automaticamente ao tema que você está usando, portanto, caso você não veja necessidade de alterá-lo, basta concluir o processo aqui, o widget ficará como naturalmente pertencia ao tema.
A próxima coisa que você precisa definir é Behavior e Style. Já mencionamos as opções de Comportamento e Estilo para que você possa definir aqui o que funcionar para você. Para o propósito deste artigo, selecionamos a opção Acordeões no menu Comportamento e Estilo padrão.
O que falta fazer agora, é adicionar itens. Role para baixo para encontrar as opções de item. Você notará dois pequenos ícones no canto superior direito da guia Itens. O primeiro é para copiar um item existente e o pequeno X ao lado é para remover um item. Abaixo da guia Item está o botão Adicionar Novo que serve para adicionar novos itens. Ao clicar para inserir um novo item, você precisa definir um título primeiro e, em seguida, digitar o texto no campo designado abaixo. Você notará muitas opções semelhantes às oferecidas em vários editores de texto para estilizar e formatar o texto. Recomendamos que você organize o texto e o título neste momento, pois você terá imediatamente uma prévia de como ficará no final.
Depois de inserir o texto, você pode definir a Altura do conteúdo. Esta opção refere-se ao tamanho do campo de alternância. Se você definir a Altura do Item Mais Alto, cada item terá o mesmo tamanho que o maior. Se você selecionar a opção Altura do item individual, o tamanho de cada item corresponderá ao tamanho do conteúdo nele.
Se você deseja alterar os ícones padrão que aparecem ao abrir e fechar o item, basta clicar no campo Abrir Ícone ou Fechar Ícone e duas novas opções serão exibidas. Um é para adicionar novos ícones da Biblioteca de Ícones e o outro é para adicionar um SVG.
Agora podemos passar para as configurações de estilo. Aqui é onde você faz o ajuste fino do acordeão e alterna o estilo do widget.
Você pode escolher o estilo do título e definir a Tipografia do título. Como mencionamos, as opções padrão são definidas de forma que o estilo do widget corresponda ao tema que você está usando. Mas você sempre pode experimentar todas as outras opções simplesmente selecionando-as e as alterações serão imediatamente visíveis no widget do lado direito da tela. Explore as opções e veja o que funciona melhor para você.
As próximas configurações referem-se às mudanças de estilo que ocorrem em um item quando ele é fechado ou aberto. Você pode, por exemplo, definir o texto para ter uma cor diferente quando for aberto, ou o fundo pode ter uma cor diferente. Há também a opção de definir um preenchimento diferente quando o item está ativo, ou seja, aberto.
Se você preferir tutoriais em vídeo, dê uma olhada neste criado pelos autores de Qi:
Para concluir
À medida que você se sentir mais familiarizado com o plug-in, você explorará opções ainda mais refinadas para ajustar o estilo do seu widget de acordeão e alternância. Esta ferramenta intuitiva é perfeita para iniciantes, pois é incrivelmente fácil de usar, enquanto os usuários avançados também vão gostar de usá-la, pois oferece uma abundância de opções de personalização.