Para melhorar a experiência do utilizador, os programadores Web utilizam frequentemente "Widget de acordeão" (acordeão) para organizar o conteúdo. Os widgets de acordeão podem mostrar e ocultar conteúdo num formato em camadas, o que dá à página um aspeto mais limpo e melhora a experiência de interação do utilizador. O widget de acordeão comelemento aninhadoO Acordeão oferece aos utilizadores uma flexibilidade ainda maior, permitindo a utilização do Acordeão em cada secção.Agrupamento de outros elementos de design, como imagens, botões, vídeosetc.

Este artigo descreve em pormenor como o Elementor Criação de widgets de acordeão com elementos aninhados e respectivos cenários e definições de aplicação comuns.

O que é um widget de acordeão com elementos aninhados?

O widget de acordeão com elementos aninhados é uma ferramenta avançada de apresentação de conteúdos que permite o aninhamento de outros elementos, como imagens, botões, texto, vídeos, etc., em cada painel de acordeão. Em comparação com o widget de acordeão padrão, este widget melhorado oferece mais liberdade criativa no design, permitindo adicionar diferentes formas de conteúdo a diferentes secções de acordeão para melhorar a experiência de interação do utilizador.

Casos de utilização comuns

1. Mostra de portefólio de fotografias: Digamos que é um fotógrafo que quer mostrar o seu trabalho, oferecerBotão de marcação de consultasresponder com cânticosPacotes de fotografia de exposiçãoDetalhes.Em vez de querer criar páginas separadas para cada caraterística. Utilizando um acordeão com elementos aninhados, uma galeria de fotografias pode ser apresentada numa secção, uma segunda secção fornece um formulário de reserva e uma terceira secção apresenta informações sobre pacotes de fotografia.
2. Testemunhos e críticas de clientes: Os programadores Web podem agrupar texto e imagens em painéis de acordeão para apresentar testemunhos de clientes e conteúdos de críticas. Cada painel pode conter uma fotografia do cliente, conteúdo do testemunho e botões para apresentar informações mais pormenorizadas.
3. Apresentação do menu do sítio Web de um restaurante: O sítio Web do restaurante pode ser utilizado comAcordeão de elementos aninhados para mostrar categorias de menu,Informações sobre reservas e recomendações do chefe. As imagens e descrições aninhadas na secção do menu proporcionam uma experiência visual intuitiva para o utilizador.
4. Apresentação de produtos de comércio eletrónico: As lojas em linha podem utilizar acordeões para apresentar diferentes categorias de produtos, informações promocionais, políticas de envio e processos de devolução. As imagens e os botões aninhados dão vida às apresentações dos produtos e os utilizadores podem navegar e percorrer facilmente o conteúdo do sítio.

Como criar um widget de acordeão com elementos aninhados

Passo 1: Adicionar widget de acordeão

1. Abra o editor Elementor e selecione umPágina ou modelo.
2. No painel de widgets, procure por "Acordeão" (acordeão), arraste-o e largue-o na localização pretendida na página.

3. Por predefinição, o widget Acordeão apresenta o primeiro painel, que pode ser editado clicando em itens individuais.

Passo 2: Personalizar o painel de acordeão

1. Em cada painel do acordeão, clique em "Adicionar novos elementos". As imagens, os botões, o texto ou outros widgets podem ser aninhados conforme desejado.

2. Cada parte do acordeão tem um contentor incorporado, cujo conteúdo pode ser livremente editado e personalizado.

3. Em "legenda", adicione nomes a cada secção do acordeão e atribua IDs CSS aos separadores para ajustes de estilo subsequentes.

Passo 3: Conteúdo, estilos e definições avançadas

Definições de conteúdo: No separador Conteúdo, pode controlar o esquema e o conteúdo do acordeão:

• Gestão de projectos: Os projectos de acordeão podem ser adicionados ou eliminados, e o título e o conteúdo de cada projeto podem ser editados.

• Definições de ícones: Personalizar os ícones de desdobramento e de dobragem do acordeão (ícone), ficheiro svg.

• Etiqueta HTML de título: Defina a etiqueta HTML para o título do acordeão (por exemplo h2,h3 etc.) para garantir a conformidade com a SEO.

• FAQ Arquitetura: Se utilizar um acordeãoFAQs sobre ecrãsSegue-se um exemplo do tipo de função que pode ser activada FAQ Arquiteturamarcadores para melhorar a otimização dos motores de busca.

Definições de estilo: O separador Estilo permite-lhe controlar o estilo geral do acordeão:

• Espaço entre projectos: Ajuste a distância entre cada item do acordeão.
• Distância do conteúdo: Controlar o espaçamento entre os títulos do acordeão e o conteúdo.
• Tipo de fundo: Cor de fundo personalizada para itens de acordeão.

• Tipo e raio da margem: Personalize o estilo do contorno, escolha o tipo de contorno (sólido, tracejado, pontilhado, etc.) e o raio do contorno para criar um efeito de canto arredondado.

• Recheio: Ajuste as margens internas do projeto de acordeão para garantir o espaçamento adequado entre o conteúdo e as margens.

Definições avançadas: O separador Avançado dá-lhe mais flexibilidade para otimizar ainda mais o widget das seguintes formas:

• Ajustar o espaçamento: Ajuste a posição e o tamanho do acordeão, definindo as margens exterior e interior.
• Código personalizado: Adicione código CSS ou JavaScript personalizado para obter mais funcionalidades.
• Design responsivo: Ajuste a apresentação do acordeão ao tamanho do ecrã do dispositivo para garantir uma experiência consistente em dispositivos móveis, tablets e computadores.

FAQ para Widgets Accordion com elementos aninhados

1. O widget Accordion é compatível com todos os temas do Elementor? Sim, o Accordion Widget é compatível com a maioria dos temas do WordPress, tanto nas versões gratuitas como nas pagas. No entanto, alguns temas personalizados podem exigir ajustes manuais do estilo CSS.
2. Posso aninhar vários elementos em cada painel do acordeão? Pode. Podem ser adicionadas imagens, botões, vídeos, texto e outros widgets em cada painel de acordeão para proporcionar mais flexibilidade no design da página.
3. O widget de acordeão suporta a estrutura de FAQ? Sim, é possível ativar o esquema de FAQ para o projeto Accordion, o que ajudará a melhorar as classificações de SEO do site, especialmente através da apresentação de rich media snippets nas páginas de resultados dos motores de busca (SERPs).
4. O widget Accordion suporta conteúdo dinâmico? Sim, é possível utilizar a funcionalidade Dynamic Tags do Elementor para inserir conteúdos dinâmicos, tais como publicações de blogues, comentários de utilizadores, informações sobre produtos, etc., em projectos de acordeão.

chegar a um veredito

Os widgets de acordeão com elementos aninhados oferecem-lhe uma liberdade criativa infinita para hierarquizar conteúdos complexos, otimizar a estrutura da página e melhorar a experiência do utilizador. Quer esteja a apresentar um produto, a fornecer informações sobre um serviço ou a criar esquemas de página interactivos, este tipo de widget pode ajudá-lo a atingir os seus objectivos.