O recurso de rolagem até a âncora do Elementor funciona corretamente em computadores, mas apresenta problemas em dispositivos móveis com mais frequência do que a maioria dos proprietários de sites espera. Cabeçalhos fixos cobrindo as seções de destino, deslocamentos de rolagem incorretos, conflitos de plugins e restrições de JavaScript em dispositivos móveis são as causas mais comuns.
Este guia aborda todos os motivos pelos quais o problema ocorre e a solução exata para cada um deles, garantindo que seus links de âncora funcionem corretamente em todos os dispositivos.
O problema de rolagem até a âncora no Elementor em dispositivos móveis geralmente é causado por cabeçalhos fixos que cobrem a seção desejada, configurações incorretas de deslocamento da âncora, conflitos de plugins ou temas, ausência de destinos de âncora ou restrições de JavaScript em dispositivos móveis. Ajustar o deslocamento da rolagem, corrigir os IDs das âncoras e testar com um tema padrão resolve a maioria dos casos.
O que são links âncora e por que eles são importantes?
Os links de âncora permitem que os visitantes acessem diretamente seções específicas de uma página sem precisar rolar a tela. Em páginas longas, eles melhoram significativamente a velocidade de navegação e a experiência do usuário, principalmente em dispositivos móveis, onde rolar por conteúdo denso gera mais atrito.
Os mecanismos de busca também prestam atenção em como os visitantes interagem com o seu conteúdo. Um tempo de permanência maior e taxas de rejeição menores, resultantes de uma melhor navegação, enviam sinais de engajamento mais fortes que contribuem para um melhor posicionamento orgânico ao longo do tempo.
O que é uma âncora no Elementor?
O widget de âncora de menu do Elementor permite adicionar um ponto de âncora nomeado a qualquer seção da sua página. Você atribui um ID exclusivo à âncora e cria um link para ela a partir de um texto, um botão ou um item do menu de navegação.
Quando um visitante clica no link, a página rola diretamente para essa seção. Em dispositivos móveis, esse comportamento depende da configuração correta do deslocamento e do suporte a JavaScript, que é onde a maioria dos problemas se origina.
Por que os links âncora são importantes para a experiência do usuário e para o SEO?
Os links de âncora melhoram a navegação, reduzem as taxas de rejeição e contribuem para melhores sinais de SEO em dispositivos móveis e computadores. Veja a seguir o que eles melhoram diretamente.
Melhorar a experiência do usuário
Como mencionado anteriormente, os links de âncora facilitam a localização rápida de informações relevantes. Se uma determinada publicação ou página de um site for extensa, o recurso de âncora simplifica a navegação para os usuários.
Com um único toque, os usuários podem pular para o início ou para o fim da página/postagem, melhorando a experiência em dispositivos móveis. Habilitar a rolagem suave pode aprimorar ainda mais a experiência, permitindo que os usuários naveguem até seções específicas sem movimentos bruscos.
Navegação eficiente em sites com rolagem suave
Da mesma forma, em vez de rolagem infinita, o recurso de link de âncora permite que os usuários pulem diretamente para as seções da página que desejam, garantindo uma navegação fluida dentro de uma única página da web.
Isso torna a navegação em sites móveis mais eficiente, ajudando os usuários a economizar tempo, o que eles certamente apreciarão.
Navegação rápida com links de âncora
A navegação deficiente é um dos principais motivos para a alta taxa de rejeição em dispositivos móveis. Ao utilizar o recurso de links de âncora do Elementor, os proprietários de sites podem aumentar o tempo de permanência e o número de visualizações de página, reduzindo assim a taxa de rejeição.
Uma taxa de rejeição menor, por sua vez, pode ajudar a melhorar o posicionamento do seu site nos resultados de busca. Além disso, tornar a navegação visualmente atraente pode aprimorar ainda mais a experiência do usuário e reduzir as taxas de rejeição.
SEO aprimorado
Algumas das vantagens de usar links de âncora são: melhor experiência do usuário, maior tempo de permanência e visualizações de página, menor taxa de rejeição e melhor posicionamento nos resultados de busca. Todas essas vantagens aprimoram diretamente o SEO do seu site.
Motivos para o problema de rolagem até a âncora no Elementor em dispositivos móveis
Antes de analisarmos como corrigir o problema de rolagem até a âncora no Elementor em dispositivos móveis, vamos verificar as principais causas desse problema. Ao identificar a causa, você poderá implementar rapidamente a solução adequada para resolvê-lo.
Configurações do Elementor
Antes de analisar os motivos pelos quais o recurso de rolagem até a âncora não está funcionando em dispositivos móveis, comece verificando as configurações do Elementor.
É possível que o recurso "rolar até a âncora" esteja desativado ou não esteja configurado corretamente. Nesse caso, você pode resolver o problema ativando o recurso e reconfigurando-o.
Conflito de tema ou plugin
Na maioria dos casos, se um tema ou plugin não for compatível com o Elementor, o recurso de rolagem até a âncora pode não funcionar em dispositivos móveis. A incompatibilidade pode interferir no bom funcionamento desse recurso. O uso excessivo de plugins do WordPress também pode causar esse problema.
Falta de alvos
Os links de âncora possuem um atributo `target` que especifica uma ação a ser executada ao clicar no link. Se o atributo `target` ou o texto da âncora não for especificado, estiver ausente ou em branco, isso pode causar um problema de rolagem até a âncora em dispositivos móveis.
Problemas com JavaScript, HTML ou cache
A incompatibilidade ou as restrições do JavaScript em dispositivos móveis podem ser o motivo pelo qual o recurso de rolagem para âncora do Elementor não está funcionando em dispositivos móveis.
O armazenamento em cache é outro problema que pode impedir o funcionamento ideal dos links de âncora. Por fim, se a estrutura HTML de uma página ou postagem estiver mal configurada, isso pode afetar a funcionalidade dos links de âncora.
Ajustar o comportamento de rolagem usando widgets específicos ou CSS personalizado também pode resolver problemas relacionados a links de âncora, já que os navegadores modernos oferecem suporte a soluções CSS nativas, tornando-as mais acessíveis e preferíveis às alternativas em JavaScript.
Servidor com saúde precária
Se você estiver usando hospedagem web barata sem uma infraestrutura de servidor adequada, isso pode fazer com que o recurso de rolagem até a âncora não funcione em dispositivos móveis.
A saúde ideal do servidor é crucial para que os plugins funcionem perfeitamente em um site WordPress. A falta dela pode resultar em conflitos entre plugins e, nesse caso, afetar a funcionalidade dos links âncora em dispositivos móveis.
O problema de rolagem até a âncora no Elementor ainda não foi resolvido?
A equipe de suporte do WordPress pode ajudar a diagnosticar a causa e resolvê-la rapidamente, para que a navegação do seu site funcione perfeitamente em todos os dispositivos.
Métodos rápidos para corrigir o problema de rolagem até a âncora no Elementor em dispositivos móveis
Depois de descobrir a causa do problema de rolagem até o link em dispositivos móveis, você pode usar as soluções rápidas abaixo para corrigi-lo. São soluções simples que não exigem conhecimento técnico.
No entanto, se precisar de ajuda profissional para implementá-las, entre em contato com um especialista em WordPress.
Método 1: Escolha um tema padrão do WordPress
A maneira mais simples de corrigir o problema de rolagem até a âncora em dispositivos móveis é voltar a usar um tema padrão do WordPress.
Se essa solução funcionar, você saberá que o problema era a incompatibilidade do tema com o plugin Elementor. Antes de voltar ao tema padrão, faça um backup do site.
Método 2: Criar Alvos
Se a publicação ou página não tiver um link de destino, o recurso de rolagem até a âncora não funcionará corretamente em dispositivos móveis. Para corrigir isso, crie links de destino e selecione-os. Veja como:
- Configure o tema e digite o seguinte código
.menu-item a{ Cor: preto; }- Em seguida, você precisa do código abaixo para destacar o link de destino
.menu-itema.mPS2id-highlight{ color: blue; }Método 3: Usar um filtro JavaScript
Você também pode adicionar um filtro JavaScript ao widget de âncora do menu do Elementor. Aqui está o código para adicionar o filtro JavaScript necessário.
add_action( 'wp_footer', function() { if ( ! defined( 'ELEMENTOR_VERSION' ) ) { return; } ?><script> jQuery( function( $ ) { $( window ).on( 'elementor/frontend/init', function() { elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) { var isMobile = $(window).width() <= 760; if (isMobile) { return scrollTop - 1000; } else { return scrollTop; } } ); } ); } ); </script>Método 4: Ajustar a rolagem
Outra maneira fácil de corrigir o problema de rolagem até a âncora no Elementor em dispositivos móveis é ajustar o deslocamento de rolagem quando o menu estiver no modo móvel. Você pode usar um filtro JavaScript para ajustar o valor da rolagem.
Método 5: Impedir que o menu feche
Um problema comum em dispositivos móveis é o menu fechar muito rapidamente após tocar em um link, antes que a animação de rolagem seja concluída. Isso interrompe o comportamento de rolagem da âncora.
Para corrigir isso, atrase o fechamento do menu usando JavaScript ou plugins como o Elementor Custom Code. Como alternativa, modifique o JavaScript para manter o menu aberto até que a rolagem seja concluída.
Aqui está um exemplo básico usando jQuery:
jQuery(document).ready(function($){ $('.elementor-nav-menu a').click(function(e){ e.preventDefault(); var target = $(this).attr('href'); $('html, body').animate({ scrollTop: $(target).offset().top }, 600, function(){ // Fecha o menu após a rolagem $('.elementor-menu-toggle').trigger('click'); }); }); });Melhores plugins de âncora e rolagem para WordPress
Se nenhuma das soluções acima resolver o problema de rolagem até a âncora no Elementor em dispositivos móveis, considere usar outro plugin específico para essa funcionalidade.
Abaixo estão alguns plugins de âncora e rolagem para WordPress, também conhecidos como plugins de link de salto. Eles oferecem uma série de recursos que podem ajudar a melhorar a experiência do usuário.
Rolagem infinita do WordPress: Carregar mais via Ajax
Este é um plugin leve com mais de 50 mil instalações ativas. Ele permite adicionar o recurso de rolagem até a âncora a uma única publicação, página, página com carregamento lento, comentários e muito mais.
Ele também permite criar códigos curtos personalizados para rolagem infinita. O plugin Ajax Load More é compatível com WooCommerce e Easy Digital Downloads. Além disso, é compatível com vários sites e permite personalizar as configurações do plugin.
Preços: A versão básica é gratuita. A versão premium tem preços a partir de US$ 149 para um único site.
Role a página até o ID
Este plugin permite adicionar animações de rolagem suaves a links de âncora. Ele oferece funcionalidades avançadas, como animações de rolagem ajustáveis para sites de página única, links de retorno ao topo e navegação na página.
Ele também permite destacar o link e o texto desejados por meio de classes CSS prontas para uso. Outros recursos incluem rolagem com deslocamento e deslocamento específico para cada link, entre outros.
Preço: O plugin Page Scroll to Id é gratuito e compatível com o WordPress versão 3.3 ou superior.
Ultimate Blocks: Plugin de Blocos para Gutenberg
O plugin Ultimate Blocks oferece uma série de recursos para aprimorar a experiência do usuário. Desde links de âncora e rolagem, ele gera um "sumário" a partir dos títulos.
Permite ativar ou desativar a função de "rolagem suave". Além disso, você pode ajustar o deslocamento da rolagem para dispositivos móveis e dividir o sumário em colunas.
Preço: Disponível gratuitamente!
Rolagem frontal do WP para cima
Este é mais um excelente complemento ao plugin de rolagem do WordPress, com mais de 200.000 instalações ativas. Ele oferece uma variedade de opções de personalização, como a exibição de botões quando o usuário rola a página para baixo ou animações para os botões de voltar ao topo.
O WP Front Scroll Top é um plugin fácil de usar que permite criar botões com texto, imagens e Font Awesome. Além disso, com este plugin, você pode criar links para elementos dentro da página ou para outras páginas usando URLs.
Preço: Você pode baixar este plugin gratuitamente.
Pegue a rolagem infinita
Como o nome sugere, este plugin permite adicionar rolagem infinita à página e à postagem. É um plugin leve que ajuda os usuários a carregar e rolar o conteúdo mais rapidamente.
Também permite clicar ou rolar para carregar o conteúdo, e você pode adicionar uma imagem personalizada.
O plugin Catch de rolagem infinita é compatível com o WordPress versão 5.7 ou superior e possui 20 mil instalações ativas.
Preço: Gratuito no WordPress.org. Já o Catch Infinite Scroll PRO custa US$ 24,99 por uma licença de 1 ano.
Conclusão: Problema de rolagem até a âncora
O problema de rolagem até a âncora no Elementor em dispositivos móveis pode ser resolvido assim que a causa específica for identificada. Comece verificando as configurações do Elementor e limpando o cache. Se o problema persistir, teste com um tema padrão, adicione os destinos de âncora ausentes e ajuste o deslocamento de rolagem para dispositivos móveis.
Para casos persistentes, um plugin de rolagem dedicado oferece um controle mais confiável sobre o comportamento dos links do que a funcionalidade integrada do Elementor sozinha. Corrija o problema uma vez, teste em dispositivos reais e sua navegação móvel funcionará de forma consistente, sem problemas futuros.
Perguntas frequentes sobre o problema de rolagem até a âncora no Elementor em dispositivos móveis
Por que o link âncora do Elementor não rola para a posição correta em dispositivos móveis?
Cabeçalhos fixos são a causa mais comum. A página rola até a posição correta, mas o cabeçalho sobrepõe a seção desejada, fazendo com que pareça oculto. Ajuste o deslocamento de rolagem no seu filtro JavaScript ou aumente o preenchimento superior da seção desejada para compensar a altura do cabeçalho em dispositivos móveis.
Por que o link do menu funciona no computador, mas não no celular?
O menu para dispositivos móveis geralmente usa uma estrutura de navegação diferente do menu para computadores. Confirme se o mesmo ID de link âncora está associado ao item de menu tanto no layout para computador quanto no para dispositivos móveis. Teste ambas as visualizações após fazer qualquer alteração para confirmar se o comportamento de rolagem é consistente.
Os cabeçalhos fixos podem causar problemas de rolagem com âncoras no Elementor em dispositivos móveis?
Sim. Quando a página rola até a posição da âncora, o cabeçalho fixo sobrepõe a seção de destino e o conteúdo aparece oculto atrás dele. Adicione um espaçamento superior à seção de destino igual à altura do cabeçalho ou ajuste o deslocamento de rolagem em JavaScript para compensar o cabeçalho em dispositivos móveis.
O que devo verificar se o problema persistir após adicionar um widget de âncora de menu?
Confirme se o ID do widget de âncora corresponde exatamente ao href do link, incluindo maiúsculas e minúsculas. Limpe todos os caches, incluindo o cache do navegador, os caches de plugins e os caches de CDN. Teste em um dispositivo móvel real, em vez de um emulador de navegador, pois o comportamento de rolagem pode ser diferente entre os dois ambientes.
O Elementor Pro afeta a rolagem por âncora em dispositivos móveis?
Sim. Recursos do Elementor Pro, como efeitos de movimento, cabeçalhos fixos e modelos de cabeçalho personalizados, podem interferir no comportamento de rolagem por âncora em dispositivos móveis. Revise as configurações do cabeçalho fixo e desative os efeitos de movimento em dispositivos móveis se o problema começou após ativar os recursos do Elementor Pro. Teste cada recurso individualmente para identificar qual deles está causando o conflito.
