Cómo añadir ancla de menú con Elementor

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ú.

Puedes mostrar todos tus anclajes en un menú de ancla, que va a dirigir a cada sección de tu sitio sin abrir otras pestañas o ventanas.
El menú de anclaje o menú de ancla, es un menú flotante y siempre está visible para los visitantes de tu sitio en su página. Un menú de anclaje permite a sus visitantes acceder a diferentes secciones de su sitio haciendo clic en el nombre del ancla en el menú.
El elemento de anclaje del menú es un elemento muy simple, que te permite agregar un anclaje de menú (id de ancla) en cualquier lugar de tu página.
Al agregar un ID de anclaje y luego configurar un enlace de anclaje en algún otro lugar de la página, las personas pueden hacer clic en el enlace de anclaje y acceder directamente a la sección con el ID de anclaje.

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

  1. Dale un nombre al ancla. (es decir, contáctenos)
  2. Edita el elemento del menú o widget que se vinculará a tu ancla
  3. Escriba ‘#’ + el nombre del ancla (es decir, # contact-us) en el campo del enlace URL del elemento del menú o elemento del widget

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

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.

Dantes

Dantes

Diseñador Web Wordpress especializado en Elementor, amante del marketing digital, la enseñanza y el aprendizaje continuo.

Suscríbete a mi Blog y recibe GRATIS mi curso Dominando Elementor en video (+70 lecciones)

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest

Lo más destacado

VIDEO DEL MOMENTO

Como abrir tus correos corporativos desde Gmail sin necesidad de Gsuite