Principais conclusões
- Quatro títulos de tabulação que se encaixam em uma coluna de desktop de 1.200 px têm cerca de 390 px em um telefone, então eles envolvem, esmagam ou transbordam.
- O widget Tabs da Elementor tem um controle Breakpoint que muda a faixa para um acordeão vertical abaixo da largura que você escolher Mobile é o padrão.
- O Scroll Horizontal é a outra opção: os títulos ficam em uma linha e os visitantes passam por eles.
- O Widget de guias de complementos mestres empilha seus títulos em uma coluna de largura total em um telefone, com o painel aberto embaixo Isso é legível, mas não é um acordeão.
- Três ou menos títulos curtos geralmente sobrevivem intocados a um telefone. Depois disso, escolha acordeão ou role deliberadamente.
As guias são um padrão de desktop Eles assumem espaço horizontal para vários títulos mais um painel, e um telefone tem cerca de um terço dessa largura.
Elementor dá-lhe duas maneiras de sair, e widgets addon comportar de forma diferente novamente As capturas de tela do telefone abaixo são capturas 390 px de uma página de teste real, então o que você vê é o que a configuração faz.
Índice
O que corre mal
Uma faixa de tabulação quer uma linha Dê menos largura do que os títulos precisam e você obtém um dos três resultados, nenhum deles bom:
- Os títulos passam para uma segunda e terceira linhas, e a tira para de ser lida como uma tira.
- Em vez disso, eles esmagam, até que cada rótulo tenha alguns pixels de texto ilegível.
- Ou o último transborda da borda, geralmente trazendo consigo uma barra de rolagem de página horizontal.
Os alvos de toque pioram As diretrizes de toque colocam uma meta confortável em torno de 44 px, e um título esmagado está bem abaixo disso, então as pessoas erram e atingem o vizinho.
Opção 1: mudar para um acordeão
Este é o comportamento que a maioria das pessoas deseja, e o widget Tabs faz isso sem CSS.
- Selecione o widget Tabs e abra Configurações Adicionais na guia Conteúdo.
- Defina o ponto de interrupção para a largura onde a tira deve desistir O celular é o padrão e geralmente é a resposta certa; tablet faz sentido quando os títulos são longos.
Abaixo dessa largura, cada título fica diretamente acima de seu próprio painel e tocar em um abre. Um título por linha significa um alvo de toque de largura total e o conteúdo permanece recolhido para que a página não fique mais longa.
Opção 2: deixe a tira rolar
Ative o Rolo Horizontal e os títulos ficam em uma linha em qualquer largura, com a linha rolando lateralmente Os visitantes deslizam ao longo dele para alcançar os que estão fora da tela.
Isso se adapta a uma tira que se lê como uma sequência, como meses ou tamanhos, onde manter a ordem visível importa mais do que ver todas as opções de uma só vez Sua fraqueza é a descoberta: um visitante que não percebe que os pergaminhos de linha nunca encontra as guias posteriores Deixando a próxima metade do título visível na borda ajuda, porque uma etiqueta de corte é um convite óbvio para deslizar.
Rolar e o ponto de interrupção do acordeão não são mutuamente exclusivos, portanto, se você definir ambos, decida qual deles realmente deseja abaixo do ponto de interrupção e verifique o resultado por telefone.
O que as guias addon fazem em um telefone
O widget Master Addons lida com telas estreitas empilhando: os títulos se tornam uma coluna de largura total e o painel aberto fica abaixo de toda a lista.
Cada título recebe um alvo de toque de largura total, que resolve o esmagamento. Ele não combina cada título com seu próprio painel, portanto, com seis ou sete guias, um visitante passa por toda a lista antes de chegar a qualquer conteúdo.
A regra prática: o addon está bem em um telefone com três ou quatro guias, e o widget principal com um ponto de interrupção é melhor quando há mais.
Qual opção para qual página
| Situação | Configuração |
|---|---|
| Três ou quatro títulos curtos, principalmente tráfego de desktop | Deixe, depois verifique um telefone |
| Cinco ou mais abas | Guias principais com ponto de interrupção definido como móvel |
| Títulos longos como “Shipping e returns” | Guias principais com ponto de interrupção definido como tablet |
| Títulos que são lidos como uma sequência, como meses ou tamanhos | Rolo Horizontal |
| Principalmente tráfego telefônico e painéis longos | Um widget de acordeão em vez de guias |
| Títulos de ícones, três ou quatro guias | Widget de complemento, coluna empilhada está bem |
Quando as guias param de funcionar no celular
“Tabs que não funcionam em” móvel geralmente acaba sendo uma de quatro coisas:
- Um efeito de hover O hover não existe em uma tela sensível ao toque, portanto, uma guia definida para ligar o hover precisa de um toque, às vezes dois Defina o efeito para clicar em qualquer página com tráfego telefônico.
- CSS em cache Depois de alterar o ponto de interrupção, regenere o CSS do Elementor e limpe o cache da página, ou o telefone continua servindo a folha de estilo antiga.
- Um script diferido. O diferimento agressivo do JavaScript mantém o script de tabulação de volta até que o visitante interaja com a página, portanto o primeiro toque não faz nada. Exclua o script do widget no plugin de otimização.
- Um alvo de toque que é muito pequeno Nada é quebrado, o título é apenas menor que um polegar, e o ponto de interrupção do acordeão o corrige.
Perguntas frequentes
Como faço as abas Elementor se transformarem em um acordeão no celular?
Selecione o widget Tabs, abra Configurações Adicionais e defina Ponto de interrupção Abaixo dessa largura a faixa muda para um layout de acordeão vertical, com o celular como padrão.
Por que meus títulos de guias se sobrepõem em um telefone?
A tira tem menos largura do que os títulos precisam Definir um ponto de interrupção de acordeão, ligar o Horizontal Scroll ou encurtar os títulos.
As guias prejudicam o SEO móvel?
Não. O conteúdo de uma guia está no HTML e é indexado independentemente de o painel estar aberto ou não.
Devo usar abas ou acordeão no celular?
Se a maior parte do seu tráfego é de telefones e os painéis são longos, construa-o como um acordeão desde o início As guias com um ponto de interrupção são a melhor chamada quando a área de trabalho é a visualização principal.
Por que meu primeiro toque não faz nada?
Geralmente um efeito de hover ou um script diferido Defina o efeito de guia para clicar e exclua o script de guia do adiamento de JavaScript.
Pensamentos finais
Nada disso precisa de CSS O controle Breakpoint do Elementor cobre o caso comum, o Horizontal Scroll cobre sequências e os widgets de complementos são empilhados em uma coluna legível Em seguida, abra a página em um telefone real e toque em cada título, porque essa é a etapa que as pessoas pulam.
Leitura relacionada
