fbpx
Cómo crear un ancla de menú fácilmente con Elementor
⏱ Tiempo de lectura: 3 min.

Cómo crear un ancla de menú fácilmente con Elementor

El ancla es una herramienta importante a la hora de diseñar una página web o "One page", este te permite crear botones para moverte dentro de la misma página, es decir, crear un sistema de navegación fluida sin cambiar de página.
Índice de contenido

Cómo crear un ancla fácilmente con Elementor

El ancla de menú es un método magnífico para que vean sitios específicos de nuestra web, ya que este ayuda al usuario a que llegue de manera rápida a los sitios que desee con un solo clic, y existen dos forma de uso:

  • Desde el widget “Ancla de menú”
  • Nombrar con un ID de CSS a un elemento

Widget Ancla de menú

Para usarlo, tenemos que buscar la herramienta Ancla de menú desde el buscador de widgets de Elementor

Gráfico del buscador de Elementor buscando Ancla de menú.

Y lo arrastraremos hacia donde queremos generar el ancla.

No te preocupes, el ancla no es visible por el usuario que visite tu página, ni ocupa espacio en este.

Una vez hecho esto nombraremos a nuestro ancla, como queramos, en mi caso lo nombre precios.

Recuerda que el ID del ancla solo acepta carácteres como las letras en mayúsculas y minúsculas, los números y los guiones ( -, _ ), el espacio no cuenta como carácter.

Ahora escogemos el elemento o widget que vincularemos a nuestro ancla, en mi caso será el botón “¡Comprar ya!”
 
Nos iremos al campo del URL y colocaremos primero “#” + Nombre de tu ancla, yo coloque #precios, porque el ID de mi ancla fue “precios”.
Gráfico de la ubicación de los menús de WordPress con el URL del ancla.

Guardamos los cambios y ¡Listo!

Ahora visualizamos si todo está correctamente hecho.

Si queremos hacer lo mismo con un elemento de Elementor, colocaremos donde va el URL o enlace del mismo, en mi caso usare un botón.

Gráfico de donde colocar el URL del ancla en un elemento de elementor.

Nombrar ID de CSS a un elemento

Esto es una opción valida también, haremos que un elemento, bloque o sección tenga una ID de CSS, que servirá como nombre para vincular con el ancla.

Para crearlo tenemos que seleccionar la herramienta que queremos que tenga el ancla, nos iremos a la sección “Avanzado” y ahí  buscaremos e “ID de CSS” y lo nombraremos según nos guste, en mi caso, será “precios”.

Gráfico que muestra donde colocar el ID de CSS a un elemento en Elementor.

Ahora, haremos los mismos pasosd el proceso anterior, seleccionamos el elementor o menú que estará vinculado y colocamos en el enlace o URL el “#” y el nombre del ancla.

¡Listo! ya sabes como agregar un ancla a tu página web a traves el widget “Ancla de menú” o con el “ID de CSS”, recuerda siempre nombrar correctamente a tus anclas, y que estén escritos igual con el elemento enlazado.

Espero que haya sido de mucha ayuda este tutorial sobre Elementor, si te quedo una duda o tienes alguna pregunta que hacerme, tienes la caja de comentarios para hacerlo, estaré gustoso de responderte.

De cualquier manera, eso seria todo por ahora, muchas gracias por leer y ¡CHAU CHAU!

Si te sirvió, compartelo:

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Amas elementor tanto como yo?

Suscríbete y demos el siguiente paso para esta relación con Elementor

Este sitio web utiliza cookies para proporcionar una mejor experiencia al usuario. Más información