Principais conclusões
- As guias são para um punhado de seções paralelas que um visitante escolhe entre Um acordeão é para uma lista onde a maioria dos itens é ignorada.
- Tabs cap out em torno de quatro ou cinco títulos porque a tira fica sem largura Um acordeão leva vinte sem reclamação.
- Um acordeão pode ter vários painéis abertos de uma só vez, e pode compará-los na tela As guias mostram exatamente um.
- Os acordeões foram construídos para telas estreitas As guias do Elementor lidam com telefones mudando para um acordeão abaixo de um ponto de interrupção definido, que é uma dica sobre qual padrão ganha lá.
- Nenhum dos dois esconde conteúdo do Google Ambos os widgets colocam todos os painéis na página HTML e ocultam os fechados com CSS.
Ambos os padrões fazem o mesmo trabalho: colapsar uma página longa para que um visitante leia a parte que veio para A diferença é o que os itens colapsados são um para o outro.
Tabs dizem “pick one of these” Um acordeão diz “aqui está uma lista, abra o que você precisa” Obtenha isso ao contrário e a página luta contra o visitante, que é o que faz isso valer dois minutos de pensamento.
Índice
A diferença real
| Guias | Acordeão | |
|---|---|---|
| Títulos sentar | Em uma linha ou coluna lateral | Empilhados, cada um acima do seu próprio painel |
| Abrir de uma vez | Um | Um ou vários, à sua escolha |
| Contagem de itens confortável | Três a cinco | Cinco a vinte |
| Todos os títulos visíveis | Sim | Sim |
| Altura da página quando fechada | Fixado pelo painel mais alto | Cresce à medida que os painéis se abrem |
| Lê como | “Escolha um” | “Scan a lista” |
| Telas estreitas | Precisa de um fallback | Funciona conforme construído |
A linha que impulsiona a maioria das decisões é a contagem de itens Uma faixa de tabulação é limitada pelo espaço horizontal, e um acordeão é limitado apenas pela paciência.
Quando as guias estão certas
As abas se ajustam quando as seções são pares e o visitante lerá uma delas Três sinais:
- Três a cinco seções, poucas o suficiente para caber em uma tira.
- Conteúdo paralelo, como Descrição, Especificação, Comentários e Envio em uma página de produto: o mesmo tipo de coisa, fatia diferente.
- Cada visitante quer um deles Ninguém lê todos os quatro, todos lêem um.
As guias também mantêm a página com uma altura previsível, o que importa quando algo fica diretamente abaixo e você não quer que ele pule na tela.
Quando um acordeão está certo
Um acordeão cabe quando os itens são uma lista e não um conjunto de escolhas:
- Seis ou mais itens Uma FAQ com doze perguntas não tem layout de tabulação que funcione.
- A maioria dos itens é ignorada porque um visitante abre as duas perguntas que se aplicam a eles.
- Itens de comprimento muito diferente, onde uma resposta é uma frase e outra é de cinco parágrafos Tabs dimensionariam para o mais longo.
- Painéis que um visitante deseja abrir ao mesmo tempo, para ler duas políticas lado a lado.
As perguntas frequentes são o caso mais claro, e é por isso que a maioria das seções de perguntas frequentes que você encontra são acordeões Políticas de preços, etapas de solução de problemas e seções de documentação se comportam da mesma maneira.
Elementor tem um widget Accordion no plugin gratuito. O Acordeão Avançado Master Addons adiciona algumas coisas por cima: um controle Accordion Type que alterna entre o comportamento do acordeão (um painel de cada vez) e o comportamento de alternância (cada painel independente), ícones personalizados de expansão e colapso, Ativo como padrão por item, uma velocidade de alternância em milissegundos e a tag HTML do título.
O que os telefones decidem
Um acordeão já é uma pilha vertical de linhas de largura total, então uma tela de 390 px não muda nada sobre isso As guias são o padrão que tem que se adaptar.
O widget Tabs da Elementor muda para um layout de acordeão vertical abaixo de um ponto de interrupção que você escolher, com o mobile como padrão As guias Addon empilham seus títulos em uma coluna de largura total com o painel abaixo da lista.
A correção para guias em um telefone, em outras palavras, é se tornar um acordeão Se a maior parte do seu tráfego for móvel, construir o acordeão desde o início ignora um layout que só existe na área de trabalho.
A questão SEO
O conteúdo recolhido é indexado Ambos os widgets colocam todos os painéis na página HTML e ocultam os inativos com CSS, então o rastreador do Google lê tudo isso Você pode confirmar isso em sua própria página visualizando o código-fonte e pesquisando texto de um painel fechado.
Vale realmente a pena se preocupar com duas coisas:
- Não esconda do que se trata a página Se um visitante tiver que clicar para descobrir o que você vende, esse conteúdo não pertence à guia três, o que quer que o rastreador possa ler.
- Os dados estruturados do FAQ vêm do seu plugin de SEO e não de qualquer widget. Rank Math e Yoast constroem a marcação FAQPage a partir de seu próprio bloco ou campo de esquema, portanto o acordeão é a apresentação e o esquema é definido separadamente.
Onde Toggle se encaixa
O Toggle surge nessa comparação porque o Elementor costumava ter um widget Toggle e porque “toggle” significa duas coisas diferentes.
O antigo widget Toggle do Elementor era um acordeão com outro nome: uma pilha de linhas expansíveis Ele foi descontinuado desde a versão 3.15, e editar um agora mostra um aviso dizendo para você arrastar o widget Accordion em vez disso Em uma instalação atual, a questão tabs versus acordeão já o absorveu.
O outro significado é um switch de dois estados, onde um controle inverte a página entre duas versões do mesmo conteúdo Isso é o que o Complementos mestres alternam conteúdo o widget faz: dois rótulos, uma alternância entre eles e um bloco de conteúdo atrás de cada. Mensalmente em relação ao preço anual é o caso óbvio, e métrica em relação às unidades imperiais é outro.
Esse é um terceiro padrão em vez de uma variação dos dois primeiros Use-o quando houver exatamente dois estados e o visitante estiver alternando entre eles Três ou mais opções significam guias, e uma lista para digitalizar significa um acordeão Se o que você deseja é um acordeão cujos painéis abrem e fecham independentemente, que é o controle Tipo de acordeão definido como Alternar.
Usando ambos juntos
Eles combinam bem, porque respondem a perguntas diferentes.
Uma página de comparação de planos pode usar guias para Mensal e Anual, com um acordeão de detalhes de recursos dentro de cada guia O nível externo é uma escolha entre dois pares; o nível interno é uma lista para digitalizar As guias aninhadas tornam isso simples, já que cada painel é um contêiner que aceita um widget de acordeão.
Tabulações dentro das abas é a combinação que não funciona, porque pede ao visitante para lembrar qual par de títulos escolheu.
O que Elementor lhe dá para cada um
Ambos os widgets estão no plugin gratuito e ambos são widgets aninhados, portanto os painéis contêm contêineres.
As guias adicionam Direção para horizontal ou vertical, Rolagem Horizontal para uma longa linha de título e o Ponto de Interrupção que muda para um acordeão O widget Acordeão tem Itens Máximos Expandidos, que decide se abrir um painel fecha os outros O widget Master Addons faz esse trabalho com seu controle Tipo Acordeão.
Widgets de complementos estendem ambos No lado das guias você obtém predefinições de estilo, títulos de imagem e comutação de hover, abordados no guias avançadas postar. No lado do acordeão você obtém os controles de ícone, o modo de alternância e o estado padrão por item.
Perguntas frequentes
Um acordeão é melhor que abas?
Para seis ou mais itens, para FAQs e para páginas com muitos dispositivos móveis, sim. Para três a cinco seções paralelas em uma página de desktop, as guias são lidas melhor.
O Google indexa conteúdo dentro de guias e acordeões?
Sim. os painéis estão no HTML quer estejam abertos ou fechados, por isso o rastreador lê-os.
Posso colocar um acordeão dentro de uma aba?
Sim. Cada painel de guias aninhadas é um contêiner, então um widget de acordeão cai direto.
Quantas abas são demais?
Cinco é o teto prático, e menos se os títulos são longos ou carregam ícones Passado que a tira envolve e um acordeão é o melhor padrão.
E quanto ao widget Alternar?
O widget Toggle do Elementor está obsoleto desde 3.15 e aponta para o widget Accordion Uma alternância no sentido switch, alternando entre duas versões do mesmo conteúdo, é um padrão separado e precisa de um widget construído para ele.
Qual deles devo usar para um FAQ?
Um acordeão As perguntas são uma lista para digitalizar em vez de um conjunto de escolhas, e o layout permanece legível em doze perguntas, que nenhuma faixa de tabulação gerencia.
Pensamentos finais
Conte os itens, em seguida, pergunte o que eles são para o outro Um pequeno conjunto de pares onde todos lê um é tabs Uma longa lista onde a maioria dos itens são ignorados é um acordeão Mobile resolve qualquer dúvida restante, uma vez que abas em um telefone se transformam em um acordeão de qualquer maneira.
Leitura relacionada
