Cuando vayas a crear una página one-page, es decir aquel sitio que en una sola página muestra todas las secciones, ya que al dar clic en el menú o en un botón nos lleva a la sección que hemos clickeado, todo eso se logra por medio de las anclas de menú.
Una de las formas de crearlo es haciendo lo siguiente:
Widget de ancla de menú
El widget de anclaje de menú te permite crear una página con una navegación de desplazamiento suave interna.
Arrastras el widget de anclaje de menú a la parte superior del área donde desea que se desplace el enlace
- Dale un nombre al ancla. (es decir, contactanos)
- Edita el elemento del menú o widget que se vinculará a tu ancla
- Escriba ‘#’ + el nombre del ancla (es decir, #contactanos) en el campo del enlace URL del elemento del menú o elemento del widget
- Verifica que el nombre del ancla sea el mismo que colocas en el ancla. En este caso contactanos y #contactanos
Nota : El widget no ocupa espacio real y es invisible para el visitante.
Opciones de elementos de anclaje de menú
Nombre: este nombre será el ID que tendrá que usar en su enlace de anclaje.
Clase CSS: Para una mayor personalización puedes añadir estilos CSS.
Puedes ver el vídeo de abajo para tu mayor comprensión
Acá tengo otro video más actualizado
A continuación la explicación del vídeo en texto:
El siguiente elemento que tenemos es el de ancla de menú el cual sirve para llevarnos de un lugar hacia otro por ejemplo eso se puede poner para cualquier parte en tu sitio web digamos que tuviéramos un botón aquí y quisiéramos que cuando den clic en llevarles a una parte específica en la misma página.
O a lo mejor quiere es que se contacten y cuando den clic ahí, les dirija por ejemplo al formulario de contacto o si estoy aquí digamos puedo colocar un botón que dice conciertos que les diré digamos a una parte justo que está hablando de eso así que para que puedas ver en qué consiste esta parte de ancla de menú digamos qué en esta sección de tres es que esta gira las entrevistas y éxitos.
Aquí voy a insertar una ancla de menú así que para eso yo arrastro el elemento hacia donde yo quiero dirigir digamos qué el ancla de menú quiero colocarlo aquí y puedes ver como ya se ha añadido el ancla
Esto no se ve en la parte donde los usuarios verían la página pero aquí desde el elemento ya se ve que está insertado así que en la parte izquierda solamente tenemos que colocar un nombre por ejemplo poner el nombre de music, listo voy a copiar este nombre ponemos copiar y ahora voy a irme a una parte de mi sitio en el cual yo quisiera.
Cuando le describa ahí, vamos hacer que me lleve a la parte donde dice music aquí de paso voy a cambiar esta parte para diseñar un botón así que me voy acá esta parte le voy a borrar y vamos viendo si aquí yo añado un botón
Para esto voy a borrar este texto y ahora sí voy a añadir este botón listo, quiero ver si les subo a lo mejor unos pixeles……uy se me fue…. a lo mejor unos 100 pixeles y también quiero que en este caso este botón este centrado.
Y aquí voy a poder colocar por ejemplo digamos más música y aquí viene la parte interesante en donde dice enlace aquí voy a colocar el nombre que le coloque anteriormente en el ancla de menú es decir music ahí está y aquí solamente pongo actualizar
Por ejemplo cargo mi sitio de nuevo aquí incluso puedo ver que me tocaría subir más el botón pero aquí lo más importante es que quiero que veas cómo funciona en este caso el el ancla de menú.
Así que digamos que aquí tengo este botón y yo le voy a darle clic y puedes ver cómo me lleva a la parte de acá y esto te sirve por ejemplo para crear páginas o secciones de solamente una página
Y cuando le den clic en determinadas partes les va a llevar a zonas determinadas donde queremos que vean esa información voy a hacer digamos otro ejemplo, me voy a irme a la parte de acá esto voy a cerrarlo.
En esta parte también voy a añadir otro, aquí tenemos que está un fondo que es la parte de la columna no es de la sección creo que es de esta parte quiero borrarlo y ya ahí estoy bueno en esta parte por lo que podría ser también es borrar esta columna
Si quiero quitarle esta parte de acá y por ejemplo aquí tenemos la parte que está de más música voy duplicar un widget para este botón voy a añadir un margen, voy a quitarle se le quite ese margen
Que es el que estaba anterior y aquí voy a poner por ejemplo digamos contacto ok listo así que por ejemplo cuando le den clic en contacto yo quisiera que por ejemplo les lleve a este formulario de contacto.
Así que para eso me voy a los elementos de menú aquí escribo ancla aquí está y arrastro y le colocó donde yo quiero en este caso quiero que me lleve acá, le añado un nombre contacto con minúsculas voy a ponerlo en contacto
Le voy a copiar y ahora me regreso a la parte de mi voto o sección o bueno puede ser cualquier elemento incluso imagen o vídeo y lo ubico para editarlo y en vez de que esté esta parte y que era la parte anterior aquí va la de contacto pongo actualizar
Y ahora vamos a previsualizar los cambios aquí tenemos el nuevo botón que dice contacto y ahora si le doy clic en contacto que me lleva al formulario y es así como yo puedo crear redirecciones en una sola página a diferentes partes de mi sitio creando por medio de la parte de ancla de menú.
Y por último también recuerda que elementor tiene la parte de avanzado donde podemos manejar la parte de los márgenes y otros elementos o secciones que vienen dentro, para que puedas personalizarlo totalmente.
12 comentarios en «Cómo añadir ancla de menú con Elementor»
Muchas gracias! toda la tarde dando vueltas con html (que ni idea tengo) y con tu explicación en un minuto lo hice!
Qué bueno Flavio me alegro por ello
Muchas gracias por la explicacion! me funcionan perfecto los anclas en el home, mi consulta es: si me voy a otra pagina (contacto por ej.) pero en el menu tengo un ancla puesta que es de la pagina del inicio, no va a ese lugar desde la pagina de contacto.. no se si me explico y si hay alguna forma de hacerlo para que funcione.
Hola Melania por lo general esta opción se utiliza para páginas one-page. Cuando añades una página aparte como contacto y quieres dirigirte a las secciones de tu home no te va a funcionar porque estás desde tu dominio.com/contacto Para eso te sugiero que en esta página de contacto te crees un menú dirigiendo a las secciones de tu home por ejemplo tudominio.com/#tuseccion y ahi si te va a funcionar. Espero que te sirva
Dante, gracias he llegado aquí buscando cómo resolver el mismo reto que tenía Melania y Wow! me ha sido de gran ayuda. Saludos.
Hola, a ver si pudieras ayudarme… uso elementor. Quiero poner un enlace (ancla) que vaya a otro apartado de la misma página. La diferencia es que el enlace es una imagen y quiero que al pinchar en la imagen, me lleve al contenido que hay dentro de un acordeón. Los acordeones los tengo cerrados por defecto (quiero que estén así, lo hice introduciendo un código de html). La cosa es que lo hago pero me lleva al acordeón CERRADO. ¿Hay alguna manera de hacer que cuando haga click en la imagen, me lleve al acordeón pero ABIERTO, es decir, que esté mostrando el contenido? Muchísimas gracias por anticipado.
Hola José Ángel en este link puedes ver sobre lo que preguntas
https://crocoblock.com/blog/how-to-link-tabs/
buenas, muchas gracias por el articulo. he seguido todos los pasos para anclar a traves de los botones de menu pero no me esta funcionando. Hay ago mas que deberia hacer? a que se debe este fallo? he anadido en el enlace del boton #y la palabra, y luego en la secion en id de css la misma palabra sin # pero no funciona. Gracias
Hola Aida en realidad son los mismos pasos que hago son los que tu has realizado, verifica que tengan el mismo nombre tanto en el menu como en el enlace ancla. Ya voy a crear otro video explicando desde el menú
Corregí algunas cosas en el artículo, como verificar que el nombre del enlace sea el mismo del ancla. Verifícale eso puede que ahí te sirva
Hallo Dante una pregunta, como puedo hacer que al dar click en mi botón se muestre en la url en la pagina de la sección en que estoy situado ,eje: mi sitio se llama a.com y cuando de click en el botón b del menu en la url del navegador se muestre a.com/#b. Gracias.