Cómo solucionar el problema de desplazamiento al anclaje de Elementor en dispositivos móviles

Rifat Elementor Dec 14, 2023

Elementor es un popular complemento de creación de páginas para WordPress que permite a los usuarios crear sitios web impresionantes e interactivos sin ningún conocimiento de codificación. Una de sus muchas características es la capacidad de crear enlaces de anclaje que se desplazan a secciones específicas de una página. Sin embargo, algunos usuarios han informado de un problema con estos enlaces de anclaje que no funcionan correctamente en dispositivos móviles, lo que puede resultar frustrante tanto para los propietarios de sitios web como para los visitantes.

Si tiene este problema, ¡no se preocupe! Hay varias soluciones disponibles que pueden ayudarlo a solucionar el problema de desplazamiento para anclar de Elementor en dispositivos móviles. En esta guía, exploraremos algunas de las formas más efectivas de solucionar y resolver este problema, incluido el ajuste de la configuración de su sitio web, el uso de código personalizado y la instalación de complementos. Con estos consejos y trucos, podrá asegurarse de que los enlaces ancla de su sitio web funcionen sin problemas en todos los dispositivos, brindando una mejor experiencia de usuario a sus visitantes.

En Elementor, ¿qué es un ancla?

El menú de salto es otro nombre para el menú de anclaje. Este ID de anclaje lo llevará al lugar que haya especificado como preferencia. El menú de anclaje permite a los espectadores navegar a la página siguiente, hacer clic en cualquier enlace y realizar cualquier búsqueda. Este es, en general, el operador de un sitio web de WordPress.

Cómo puede ayudarle el uso de Anchor en su sitio

Un ancla puede servir para múltiples propósitos. Este enlace optimiza la experiencia de navegación en su sitio web. Las ventajas son las siguientes:

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Mejora la experiencia del usuario

Los enlaces ancla facilitan la navegación. Sus visitantes pueden simplemente hacer clic, tocar y elegir el servicio que desean obtener. Esto mejora la experiencia en línea.

Le permite regresar al principio del contenido

Si se desplaza demasiado, los enlaces ancla pueden ayudarle a llegar a la parte superior de la página. Esta herramienta le ahorrará tiempo y le mantendrá encaminado.

Garantiza una navegación eficiente

Además de desplazarse, los enlaces de anclaje también se pueden utilizar para hacer clic, volver a la página anterior, etc. Facilita la navegación eficiente.

Rendimiento más rápido

Puede obtener una respuesta inmediata del comando. En lugar de ingresar instrucciones, los enlaces de anclaje permiten una navegación más rápida.

Por qué la función Desplazarse hasta anclar de Elementor no funciona en dispositivos móviles

Es difícil explicar por qué el desplazamiento para anclar en Elementor no funciona en dispositivos móviles. Sin embargo, después de una investigación exhaustiva, pudimos determinar los siguientes hechos:

Objetivos insuficientes

Si su página carece de enlaces de destino, como Sobre-Agencia, Como-Fazer, Servicios, contactos, etc., este puede ser un factor que impida que su enlace de desplazamiento funcione.

Las extensiones causan dificultades

Si su dispositivo Android está cargado con extensiones, esto también puede estar bloqueando el funcionamiento de la función de desplazamiento.

Demasiados complementos

Si su sitio web tiene una cantidad excesiva de complementos, esta podría ser otra razón por la cual su anclaje de WordPress ha dejado de responder. Los complementos adicionales chocan entre sí. Esto puede hacer que su sitio web se vuelva inaccesible.

Mala condición del servidor

Si el servidor de su sitio web no puede manejar complementos, esto podría ser una causa que impida que sus enlaces funcionen.

5 de los consejos más efectivos para arreglar Elementor Scroll to Anchor

elementor anchor

A pesar de la razón por la cual el desplazamiento para anclar Elementor no ha sido efectivo, los siguientes consejos lo ayudarán a reparar su sitio web. Aquí va;

Creando objetivos

Es posible que su enlace de desplazamiento no funcione si su página no tiene enlaces de destino. Por esta razón, primero necesita construir enlaces de destino y luego enfatizarlos de la siguiente manera:

Primero, seleccione su tema e ingrese los siguientes códigos en su hoja.

.menu-item a{
     Color: black;


}

Si desea que le informen si su enlace es visible o no para su audiencia, elija esta opción. Para hacerlo, proporcione el siguiente CSS:

.menu-itema.mPS2id-highlight{
      color: red;
}

Utilice un filtro de Javascript

Para el widget de anclaje de Elementor, se puede utilizar un filtro de JavaScript. Ejecute los siguientes programas para agregar el filtro:

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>
    <?php
} );

Ajustar el desplazamiento

Ajuste el desplazamiento compensado mientras el menú está abierto en modo móvil como solución alternativa.

Evitar que el menú se cierre

Aunque esta no es una solución viable, la única opción es mantener abierta la barra de menú desplegable. Esto facilitará la navegación si el ancla de desplazamiento se atasca.

Elija el tema predeterminado

Una cosa que puede hacer para arreglar el ícono de ancla en su sitio es arreglar el ícono. Elija el tema predeterminado para WordPress. Esto es superior.

Cómo agregar fácilmente un ancla a su sitio web Elementor usando un complemento

Un complemento es el método más conveniente para agregar un enlace ancla a un sitio web. Para agregar un ancla, siga los pasos a continuación:

Instale el complemento para agregar enlaces antes de agregar cualquier enlace. Luego, cree un bloque de código corto donde deberían aparecer los enlaces de anclaje. Ejecute los siguientes códigos cortos:

[ps2id id='section-1'/]

Inserte los enlaces de anclaje en un nuevo bloque de código corto. Colócalo donde quieras que aparezca el enlace. Ejecute los siguientes códigos:

[ps2id url='#some-id']link text[/ps2id]

Luego, reemplace 'some-id' con el nombre del ancla construido y link-text con el ancla deseada. Guarde los cambios ahora. Estás listo.

Los 5 mejores complementos de anclaje y desplazamiento

Hay docenas de complementos que mejoran enormemente la accesibilidad a la conexión. Tras una investigación exhaustiva, proponemos los cinco complementos de anclaje que se enumeran a continuación como los mejores.

Agregar enlaces de anclaje

El complemento Agregar enlaces de anclaje es una herramienta poderosa que permite a los propietarios de sitios web crear enlaces de anclaje para etiquetas de encabezado en sus publicaciones, de manera similar a cómo Github crea enlaces dentro de sus archivos Readme.md. Este complemento es increíblemente confiable e inserta enlaces de anclaje en los encabezados y elementos de contenido seleccionados, lo que garantiza una experiencia de usuario perfecta para los visitantes del sitio web. Además, Add Anchor Links es compatible con PHP (5.6) y PHP 7, lo que lo hace compatible con una amplia gama de configuraciones de sitios web. Los usuarios pueden deshabilitar CSS y especificar el tipo de publicación a la que se agregarán enlaces de anclaje, lo que brinda flexibilidad y control sobre la funcionalidad del complemento. En general, Add Anchor Links es un complemento esencial para cualquier propietario de un sitio web que busque optimizar su contenido para una mejor experiencia de usuario.

Características clave

  • Seleccione el tipo de publicación donde se agregarán los enlaces de anclaje.
  • Deshabilitar CSS.
  • Compatible con PHP (5.6) y PHP 7

Desplazamiento de página hasta ID

Page scroll to id es un poderoso complemento que mejora la experiencia del usuario al reemplazar el comportamiento tradicional de "salto" de los navegadores con una animación de desplazamiento suave al hacer clic en enlaces que contienen el valor href "#". Ofrece todas las herramientas necesarias y funcionalidades avanzadas para sitios web de una sola página, navegación en la página y enlaces para volver al principio. Con más de 30 tipos de aceleración y duración de animación de desplazamiento ajustable, los usuarios pueden personalizar su experiencia de desplazamiento. El complemento también resalta enlaces y destinos con clases CSS listas para usar y permite el desplazamiento vertical y/u horizontal. Además, presenta desplazamiento compensado por píxeles o selectores de elementos con expresiones personalizadas y opciones específicas de enlaces como la duración del desplazamiento y el objetivo resaltado. Este complemento puede mejorar la navegación del sitio web y brindar una experiencia de usuario más placentera.

Características clave

  • Animación de desplazamiento ajustable
  • Desplazamiento vertical y horizontal
  • Desplazamiento compensado por píxeles
  • Resaltado de enlaces y objetivos
  • Desplazarse por diferentes páginas
  • Insertar botones de enlace e identificación de destino

Bloques definitivos

Ultimate Blocks es un complemento de WordPress que ofrece una amplia colección de más de 18 bloques con múltiples funcionalidades combinadas bajo un mismo paraguas. Este complemento es una excelente opción para quienes buscan un complemento de bloque de tabla de contenido con opciones de enlace de anclaje. El bloque de tabla de contenido le permite crear una tabla de contenido automatizada con solo un clic, lo que facilita a los usuarios saltar a la sección que desean leer. Además, puede activar o desactivar el desplazamiento suave y personalizar el título, el fondo, el color de la lista y el color del icono de la lista. En general, Ultimate Blocks es un complemento completo que puede ahorrarle tiempo y esfuerzo en la creación de contenido para su sitio web.

Características clave

  • Ajuste de desplazamiento de desplazamiento
  • Desplazamiento suave
  • Romanizar enlaces de anclaje
  • Eliminar signos diacríticos de enlaces de anclaje
  • Alineación de lista
  • Más de 18 bloques útiles
  • Estilo de lista de contenido
  • Dividir la tabla de contenidos en columnas

Bloque de anclaje

El complemento Anchor Block proporciona una solución sencilla para agregar enlaces de enlace al contenido de su sitio web utilizando Gutenberg Block Editor. Viene con un bloque dedicado que le permite agregar una identificación para su ancla y un margen superior opcional. Con este complemento, puede generar enlaces internos a cada sección de sus páginas con facilidad, lo que lo convierte en una herramienta esencial para mejorar la experiencia del usuario de su sitio web. Aunque no viene con sofisticadas animaciones de desplazamiento, Anchor Block es sencillo y fácil de usar, lo que lo convierte en una forma sencilla de agregar enlaces de enlace al contenido de su sitio web.

Características clave

  • Complemento fácil de usar
  • Bloque dedicado para el editor de bloques Gutenberg
  • Añade ID para tu ancla
  • Opción para agregar margen superior opcional en píxeles
  • Representación frontal con un ancla
  • Elemento de menú de enlace personalizado

Enlaces de desplazamiento sencillo y suave

Easy Smooth Scroll Links es un complemento potente que permite a los usuarios aplicar animaciones de desplazamiento a los anclajes de página y un desplazamiento suave de una manera fácil y sin complicaciones. Con más de 30 efectos de animación de desplazamiento para elegir, los usuarios pueden personalizar la velocidad de desplazamiento y el valor de compensación para adaptarlo a sus preferencias. El complemento también admite el uso de códigos cortos, lo que facilita su implementación en cualquier creador de páginas, e incluye un botón de anclaje del editor visual para un uso sencillo en el editor visual sin códigos cortos. Compatible con los principales navegadores, Easy Smooth Scroll Links es una herramienta imprescindible para cualquiera que busque mejorar la experiencia del usuario de su sitio web.

Características clave

  • Ajustar la velocidad de desplazamiento y el valor de compensación
  • 30 efectos de animación de desplazamiento
  • Botón de anclaje del editor visual
  • Soporte de código corto
  • Excluir ciertos anclajes del desplazamiento
  • Funciona en todos los navegadores principales

Terminando

Todo propietario de un sitio web desea un sitio web de WordPress completamente funcional. Sus usuarios pueden sentirse decepcionados si no funciona correctamente. La incapacidad de Elementor para desplazarse hasta un ancla en un dispositivo móvil es un problema común que encuentra todo propietario de un sitio web. Para simplificar tu vida, hemos destacado los trucos más efectivos. Creemos que esta información le ayudará a reparar el suyo.

Divi WordPress Theme