La funzionalità di ancoraggio tramite scorrimento di Elementor funziona correttamente su desktop, ma presenta problemi sui dispositivi mobili più spesso di quanto la maggior parte dei proprietari di siti si aspetti. Le cause più comuni sono le intestazioni fisse che coprono le sezioni di destinazione, gli offset di scorrimento errati, i conflitti tra plugin e le restrizioni JavaScript sui dispositivi mobili.
Questa guida illustra tutte le possibili cause del problema e la soluzione esatta per ciascuna di esse, in modo che i link di ancoraggio funzionino correttamente su tutti i dispositivi.
Il problema dello scorrimento verso l'ancora in Elementor su dispositivi mobili è solitamente causato da intestazioni fisse che coprono la sezione di destinazione, impostazioni errate dell'offset di ancoraggio, conflitti con plugin o temi, destinazioni di ancoraggio mancanti o restrizioni JavaScript sui dispositivi mobili. Regolare l'offset di scorrimento, correggere gli ID di ancoraggio e testare con un tema predefinito risolve la maggior parte dei casi.
Cosa sono i link di ancoraggio e perché sono importanti?
I link di ancoraggio consentono ai visitatori di accedere direttamente a sezioni specifiche di una pagina senza dover scorrere. Nelle pagine lunghe, migliorano notevolmente la velocità di navigazione e l'esperienza utente, soprattutto su dispositivi mobili, dove lo scorrimento di contenuti densi crea maggiore attrito.
I motori di ricerca prestano attenzione anche a come i visitatori interagiscono con i tuoi contenuti. Un tempo di permanenza più elevato e una frequenza di rimbalzo inferiore, grazie a una migliore navigazione, inviano segnali di coinvolgimento più forti che favoriscono il posizionamento organico nel tempo.
Cos'è un'ancora in Elementor?
Il widget di ancoraggio del menu di Elementor consente di aggiungere un punto di ancoraggio denominato a qualsiasi sezione della pagina. È possibile assegnare un ID univoco all'ancoraggio e collegarlo tramite testo, un pulsante o una voce del menu di navigazione.
Quando un visitatore clicca sul link, la pagina scorre direttamente a quella sezione. Sui dispositivi mobili, questo comportamento dipende dalla corretta configurazione dell'offset e dal supporto JavaScript, ed è proprio qui che si originano la maggior parte dei problemi.
Perché i link di ancoraggio sono importanti per l'esperienza utente e la SEO?
I link di ancoraggio migliorano la navigazione, riducono la frequenza di rimbalzo e contribuiscono a un migliore posizionamento SEO sia su dispositivi mobili che desktop. Ecco cosa migliorano direttamente.
Migliorare l'esperienza utente
Come accennato in precedenza, i link di ancoraggio consentono di trovare rapidamente informazioni pertinenti. Se un articolo o una pagina di un sito web è piuttosto lunga, la funzione di ancoraggio facilita la navigazione per gli utenti.
Con un solo tocco, gli utenti possono spostarsi all'inizio o alla fine della pagina/del post, migliorando l'esperienza utente su dispositivi mobili. L'attivazione dello scorrimento fluido può ulteriormente migliorare l'esperienza utente, consentendo di navigare tra sezioni specifiche senza movimenti bruschi.
Navigazione web efficiente con scorrimento fluido
Allo stesso modo, anziché dover scorrere all'infinito, la funzione di collegamento tramite link consente agli utenti di passare direttamente alle sezioni della pagina desiderate, garantendo una navigazione fluida all'interno di una singola pagina web.
Questo rende la navigazione sui siti web da dispositivi mobili più efficiente, aiutando gli utenti a risparmiare tempo, cosa che apprezzeranno sicuramente.
Navigazione rapida con link di ancoraggio
Una navigazione scadente è una delle principali cause di un'elevata frequenza di rimbalzo sui dispositivi mobili. Utilizzando la funzionalità di link di ancoraggio di Elementor, i proprietari di siti web possono aumentare il tempo di permanenza degli utenti e le visualizzazioni di pagina, riducendo così la frequenza di rimbalzo.
Un tasso di rimbalzo inferiore, a sua volta, può contribuire a migliorare il posizionamento del tuo sito nelle SERP. Inoltre, rendere la navigazione visivamente accattivante può migliorare ulteriormente l'esperienza utente e ridurre il tasso di rimbalzo.
SEO migliorato
Alcuni dei vantaggi derivanti dall'utilizzo dei link di ancoraggio includono una migliore esperienza utente, un aumento del tempo di permanenza e delle visualizzazioni di pagina, una minore frequenza di rimbalzo e un posizionamento più elevato nei risultati di ricerca. Tutti questi vantaggi miglioreranno direttamente la SEO del tuo sito.
Motivi del problema di scorrimento verso l'ancora di Elementor sui dispositivi mobili
Prima di vedere come risolvere il problema dello scorrimento verso l'ancora di Elementor sui dispositivi mobili, analizziamo le cause principali di questo problema. Individuandone la causa, è possibile implementare rapidamente la soluzione giusta per risolverlo.
Impostazioni Elementor
Prima di esaminare i motivi per cui la funzione di ancoraggio tramite scorrimento non funziona sui dispositivi mobili, inizia controllando le impostazioni in Elementor.
Potrebbe darsi che la funzione "scorri fino all'ancora" sia disabilitata o non configurata correttamente. In tal caso, è possibile risolvere l'errore abilitando la funzione e riconfigurandola.
Conflitto tra temi o plugin
Nella maggior parte dei casi, se un tema o un plugin non è compatibile con Elementor, la funzione di scorrimento verso l'ancora potrebbe non funzionare sui dispositivi mobili. L'incompatibilità potrebbe interferire con il corretto funzionamento di questa funzione. Anche un numero eccessivo di plugin di WordPress potrebbe causare questo problema.
Mancanza di obiettivi
I link di ancoraggio hanno un attributo target che specifica "un'azione" da eseguire una volta cliccato il link. Se il target o il testo di ancoraggio non sono specificati, sono mancanti o vuoti, può causare un problema di scorrimento verso l'ancoraggio sui dispositivi mobili.
Problemi con JavaScript, HTML o cache
L'incompatibilità o le restrizioni di JavaScript sui dispositivi mobili potrebbero essere la ragione per cui la funzione di ancoraggio a scorrimento di Elementor non funziona su dispositivi mobili.
La cache è un altro problema che potrebbe impedire ai link di ancoraggio di funzionare in modo ottimale. Infine, se la struttura HTML di una pagina o di un articolo non è configurata correttamente, ciò potrebbe influire sulla funzionalità dei link di ancoraggio.
Regolare il comportamento dello scorrimento tramite widget specifici o CSS personalizzato può anche risolvere i problemi relativi ai link di ancoraggio, poiché i browser moderni supportano soluzioni CSS native, rendendole più accessibili e preferibili alle alternative JavaScript.
Scarsa salute del server
Se utilizzi un hosting web economico senza un'infrastruttura server adeguata, la funzione "scorri per ancorare" potrebbe non funzionare sui dispositivi mobili.
Un server in condizioni ottimali è fondamentale per il corretto funzionamento dei plugin su un sito web WordPress. In caso contrario, potrebbero verificarsi conflitti tra i plugin e, di conseguenza, compromettere la funzionalità dei link di ancoraggio sui dispositivi mobili.
Il problema di scorrimento verso l'ancora di Elementor non è ancora stato risolto?
Il team di supporto di WordPress può aiutarti a diagnosticare la causa e a risolverla rapidamente, in modo che la navigazione del tuo sito funzioni senza intoppi su ogni dispositivo.
Metodi rapidi per risolvere il problema dello scorrimento verso l'ancora in Elementor su dispositivi mobili
Una volta individuata la causa del problema di scorrimento per ancorare i contenuti su dispositivi mobili, è possibile utilizzare le soluzioni rapide riportate di seguito per risolverlo. Si tratta di soluzioni semplici che non richiedono competenze tecniche.
Tuttavia, se hai bisogno di assistenza professionale per implementarle, contatta un esperto di WordPress.
Metodo 1: Scegliere un tema WordPress predefinito
Il modo più semplice per risolvere il problema dello scorrimento verso l'ancora sui dispositivi mobili è ripristinare un tema WordPress predefinito.
Se questa soluzione funziona, saprai che il problema era dovuto all'incompatibilità del tema con il plugin Elementor. Prima di ripristinare il tema predefinito, esegui un backup del sito web.
Metodo 2: Creare obiettivi
Se il post o la pagina non contiene un link di destinazione, la funzione di ancoraggio a scorrimento non funzionerà correttamente sui dispositivi mobili. Per risolvere il problema, crea dei link di destinazione e selezionali. Ecco come fare:
- Imposta il tema e digita il seguente codice
.menu-item a{ Colore: nero; }- Successivamente, è necessario il codice seguente per evidenziare il collegamento di destinazione
.menu-itema.mPS2id-highlight{ colore: blu; }Metodo 3: Utilizzare un filtro JavaScript
È inoltre possibile aggiungere un filtro JavaScript al widget di ancoraggio del menu di Elementor. Ecco il codice per aggiungere il filtro JavaScript necessario.
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>Metodo 4: Regolare lo scorrimento
Un altro modo semplice per risolvere il problema di scorrimento verso l'ancora di Elementor su dispositivi mobili è regolare l'offset di scorrimento quando il menu è in modalità mobile. È possibile utilizzare un filtro JavaScript per regolare il valore di scorrimento.
Metodo 5: Impedire la chiusura del menu
Un problema comune sui dispositivi mobili è la chiusura troppo rapida del menu dopo aver toccato un link, prima che l'animazione di scorrimento sia completata. Questo interrompe il comportamento di scorrimento dei link.
Per risolvere questo problema, ritarda la chiusura del menu utilizzando JavaScript o plugin come Elementor Custom Code. In alternativa, modifica il codice JavaScript in modo che il menu rimanga aperto fino al completamento dello scorrimento.
Ecco un esempio di base che utilizza 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(){ // Chiudi il menu dopo lo scorrimento $('.elementor-menu-toggle').trigger('click'); }); }); });I migliori plugin Anchor e Scroll per WordPress
Se nessuna delle soluzioni sopra descritte risolve il problema dello scorrimento verso il pulsante di ancoraggio di Elementor su dispositivi mobili, valuta la possibilità di utilizzare un altro plugin specifico per questa funzionalità.
Di seguito sono elencati alcuni plugin per WordPress relativi ad ancoraggi e scroll, noti anche come plugin per link di ancoraggio o di salto. Questi offrono una serie di funzionalità che possono contribuire a migliorare l'esperienza utente.
WordPress Infinite Scroll: Ajax Carica altro
Si tratta di un plugin leggero con oltre 50.000 installazioni attive. Consente di aggiungere la funzionalità "scorri fino all'ancora" a un singolo articolo, a una pagina, a una pagina con caricamento differito, ai commenti e altro ancora.
Consente inoltre di creare shortcode personalizzati per lo scorrimento infinito. Il plugin Ajax Load More è compatibile con WooCommerce e Easy Digital Downloads. Inoltre, è compatibile con installazioni multisito e permette di personalizzare le impostazioni del plugin.
Prezzi: La versione base è disponibile gratuitamente. Il della versione premium prezzo parte da 149 dollari per un singolo sito web.
Pagina Scorri fino a ID
Questo plugin consente di aggiungere un'animazione di scorrimento fluida ai link di ancoraggio. Offre funzionalità avanzate, come l'animazione di scorrimento regolabile per siti web a pagina singola, link "torna all'inizio" e navigazione interna alla pagina.
Consente inoltre di evidenziare il link e il testo desiderati tramite classi CSS predefinite. Altre funzionalità includono lo scorrimento con offset e l'offset specifico per i link, tra le altre.
Prezzi: il plugin Page Scroll to Id è gratuito e compatibile con WordPress versione 3.3 o successive.
Ultimate Blocks: plugin Gutenberg Blocks
Il plugin Ultimate Blocks offre una serie di funzionalità per migliorare l'esperienza utente. Dai link di ancoraggio alla prospettiva di scorrimento, genera un "indice" a partire dalle intestazioni.
Consente di attivare o disattivare la funzione di scorrimento fluido. Inoltre, è possibile regolare l'offset di scorrimento per dispositivi mobili e suddividere l'indice in colonne.
Prezzi: disponibile gratuitamente!
WPFront Scroll Top
Questo è un altro eccellente plugin di scorrimento per WordPress, con oltre 200.000 installazioni attive. Offre una vasta gamma di opzioni di personalizzazione, come la visualizzazione di pulsanti quando l'utente scorre la pagina o animazioni per i pulsanti "torna in alto".
WP Front Scroll Top è un plugin semplice da usare che consente di creare testo, immagini e pulsanti Font Awesome. Inoltre, con questo plugin, è possibile creare un collegamento a un elemento all'interno della pagina o a pagine diverse tramite URL.
Prezzi: puoi scaricare questo plugin gratuitamente.
Cattura lo scorrimento infinito
Come suggerisce il nome, questo plugin permette di aggiungere lo scorrimento infinito a pagine e articoli. È un plugin leggero che aiuta gli utenti a caricare e scorrere i contenuti più velocemente.
Consente inoltre di caricare i contenuti cliccando o scorrendo con lo scorrimento, e di aggiungere un'immagine personalizzata.
Il plugin Catch infinite scroll è compatibile con WordPress versione 5.7 o successive e ha 20.000 installazioni attive.
Prezzi: Gratuito su WordPress.org. Catch Infinite Scroll PRO, invece, costa 24,99 dollari per una licenza annuale.
Conclusione: Problema di scorrimento verso l'ancora
Il problema dello scorrimento verso gli anchor di Elementor su dispositivi mobili è risolvibile una volta identificata la causa specifica. Inizia controllando le impostazioni di Elementor e svuotando la cache. Se il problema persiste, prova con un tema predefinito, aggiungi gli anchor mancanti e regola l'offset di scorrimento per dispositivi mobili.
Nei casi più frequenti, un plugin di scorrimento dedicato offre un controllo più affidabile sul comportamento degli anchor rispetto alla sola funzionalità integrata di Elementor. Risolvete il problema una volta per tutte, testate su dispositivi reali e la navigazione mobile funzionerà correttamente senza ulteriori inconvenienti.
Domande frequenti sul problema di Elementor con lo scorrimento verso l'ancora su dispositivi mobili
Perché il link di ancoraggio di Elementor non scorre nella posizione corretta sui dispositivi mobili?
La causa più comune è rappresentata dalle intestazioni fisse. La pagina scorre fino alla posizione corretta, ma l'intestazione si sovrappone alla sezione di destinazione, facendola apparire nascosta. Regola l'offset di scorrimento nel filtro JavaScript o aumenta il padding superiore della sezione di destinazione per compensare l'altezza dell'intestazione sui dispositivi mobili.
Perché il link del menu funziona su desktop ma non su dispositivi mobili?
Il menu per dispositivi mobili spesso utilizza una struttura di navigazione diversa rispetto al menu per desktop. Verifica che lo stesso ID del link di ancoraggio sia collegato alla voce di menu sia nel layout desktop che in quello mobile. Dopo aver apportato qualsiasi modifica, testa entrambe le visualizzazioni per assicurarti che il comportamento dello scorrimento sia coerente.
Le intestazioni fisse possono causare problemi di scorrimento dei link di Elementor sui dispositivi mobili?
Sì. Quando la pagina scorre fino alla posizione dell'ancora, l'intestazione fissa si sovrappone alla sezione di destinazione e il contenuto appare nascosto dietro di essa. Aggiungi un padding superiore alla sezione di destinazione pari all'altezza dell'intestazione oppure regola l'offset di scorrimento JavaScript per compensare l'intestazione sui dispositivi mobili.
Cosa devo controllare se il problema persiste dopo aver aggiunto un widget di ancoraggio al menu?
Verifica che l'ID del widget di ancoraggio corrisponda esattamente all'attributo href del link, comprese le maiuscole e le minuscole. Cancella tutte le cache, incluse quelle del browser, dei plugin e della CDN. Esegui il test su un dispositivo mobile reale anziché su un emulatore di browser, poiché il comportamento dello scorrimento può differire tra i due ambienti.
Elementor Pro influisce sullo scorrimento dei link sui dispositivi mobili?
Sì. Funzionalità di Elementor Pro come effetti di movimento, intestazioni fisse e modelli di intestazione personalizzati possono interferire con il comportamento dello scorrimento dei link sui dispositivi mobili. Controlla le impostazioni delle intestazioni fisse e disattiva gli effetti di movimento sui dispositivi mobili se il problema è iniziato dopo aver attivato le funzionalità di Elementor Pro. Testa ogni funzionalità singolarmente per identificare quale causa il conflitto.
