Widget Elementor: Ancla de Menú
Web-Sastre
Diseñadora Web WordPress
para empresas familiares y bloggers.
¡Hola! El Widget Ancla de Menú lo encontrarás disponible tanto en la versión gratis de Elementor como en la versión Pro.
Colócalo justo antes del contenido que quieras mostrar, úsalo para navegar dentro de una entrada o página con mucho contenido, o para ir a un punto en concreto de otra página y ampliar la información.
Con esta navegación fluida, le ahorramos tiempo a nuestros visitantes y les estaremos ofreciendo una experiencia del usuario de calidad.
Tabla de contenido
1.-
Widget Ancla de Menú
Busca el Widget en el Panel de edición de Elementor y arrástralo justo encima del contenido al que quieras redirigir tus visitantes.
Actualmente, una vez tenemos el Widget en su sitio no vemos nada. Lo digo porque antes, en modo edición podías verlos, y hace ya unas actualizaciones que aparecen invisibles. Si queremos editarlo deberemos recorrer a la herramienta Navigator. Allí puedes editarle el nombre para que te sea más fácil localizarlo en el futuro.
La herramienta Navigator la encontrarás en el parte inferior del panel de edición de Elementor.
Con el Widget seleccionado, vamos al Panel de Edición de Elementor.
Aquí le pondremos un ID para luego usarlo en los enlaces. Usa un ID que esté relacionado con la temática del contenido.
Fíjate que Elementor te muestra un aviso de los caracteres que puedes usar como ID.
2.-
Uso del Widget Ancla de Menú
Una vez escrito el ID, lo usaremos como enlace escribiendo #nombre-ID. Si el enlace se encuentra dentro de la misma página bastará con usar sólo el ID, si el enlace está en otra página añadiremos el ID al final de la URL completa.
3.-
Ejemplos
Ejemplo en un texto
Vamos a ponerle a nuestro widget el ID ejemplo-1. Estamos dentro del widget Texto y he añadido el texto del Ancla de menú como enlace (#ejemplo-1). Pulsa aquí
Ejemplo en un botón
A continuación haremos el Ejemplo 2 usando un botón.
Añade el Widget Botón a tu página.
En la pestaña Contenido de edición del Botón, añade en Texto, el texto que quieras ver en el botón y en Enlace el ID que hemos puesto en el Ancla de Menú, igual como en el caso anterior, con el # delante. (#ejemplo-2). Cambia el estilo del botón para que se ajuste al diseño de tu página web.
Aquí llegamos al pulsar en el ejemplo 1.
Entonces puedes añadir el ID del ancla menú en todos los Widgets que permitan un enlace. Si quieres que tu visitante vaya a un punto en concreto de otra página, en la otra página añadirás el Ancla de Menú con un ID, y en la página con el enlace pondrás toda la URL (Por ejemplo: https://dominio.com/servicios/#ID-ancla-menu).
Ejemplo en los Menús
Igualmente al crear los menús, puedes añadir en las URLs los ID de los Anclas de Menú para llevar al usuario a punto en concreto de la página. Esto es muy útil para submenús, van a ser enlaces que dirigen a la misma página pero en puntos diferentes.
Para añadir el enlace a los Menús, lo tienes que hacer en el Escritorio de WordPress > Apariencia > Menús
Después de toda la URL, añade el ID usando el #. Pulsa en añadir al menú y guarda el menú.
Si no añades toda la URL, si el sitio web tiene más de una página, el punto del menú con el ID no va a funcionar.
Además de mejorar la experiencia de navegación de nuestros visitantes, al usar los ID en los widgets Ancla de menú proporcionamos información al motor de búsqueda, y eso va a influir positivamente al SEO de nuestro sitio web.
Un último consejo, haz pruebas pulsando en los enlaces que has creado con los Ancla de Menú. Si al pulsar el texto queda demasiado cerca del borde superior de la página, añade un margen inferior al Widget Ancla de menú para sepáralo un poco, va a quedar mucho mejor.
Si necesitas ayuda en la creación de tu página web o blog WordPress, no dudes en ponerte en contacto conmigo. Para ayudas puntuales tengo bolsas de horas muy prácticas que puedes usar cuando las necesites. O si quieres que sea yo tu diseñadora web WordPress, ¡cuéntame tu proyecto!
