Guía Divi: cómo usar los enlaces ancla en Divi
¡Hola Divilovers! En este post – tutorial de Divi les enseñaremos cómo usar los enlaces ancla en Divi. Comenzaré comentado que los enlaces ancla, anchor link, o enlaces de anclaje como lo conocemos en castellano, son los textos con los cual enlazamos un texto especifico a otras páginas, o secciones de esa página.
Tiempo de lectura estimado: 0 minutos
Índice
La principal función de los enlaces ancla, es mostrar una breve descripción del contenido enlazado, para que el usuario pueda entender y encontrar información ampliada sobre la temática que está leyendo, aportando información de utilidad. Se utiliza principalmente en estrategias de SEO, pero también para funciones de navegabilidad dentro de un sitio web.
Los enlaces ancla pueden mejorar la navegación y ayudar a organizar el contenido, especialmente en un sitio web con amplio contenido en una sola página.
En este articulo nos centraremos en como usar los enlaces ancla en Divi, así que manos a la obra.
Crear una one page de navegación vertical con enlaces ancla en Divi.
Comenzamos con algo practico, que ademas es una de las cosas más solicitadas por los usuarios en los foros de ayuda de Facebook, realizar una one page de navegación vertical con Divi:
Este tipo de diseño de menú es popular para sitios de una sola página o los bien llamados “One Page”. Esta característica es muy buscada pues los creadores de sitios web muchas veces necesitan crear solo una página de muy fácil navegación. Para eso solo debes crear los enlaces en el menú para saltar de una sección a otra en la página.
El primer paso es crear una nueva página, abrimos el constructor visual y seleccionamos “Elegir diseño prefabricado” buscamos y escogemos el diseño de la página de inicio de “Design Agency Landing Page” y lo activamos para usar este diseño como ejemplo de trabajo.
Ahora agregamos el ID de CSS a cada sección a la que deseemos vincular (o desplazarnos). Buscamos la sección titulada “What We Do”, abrimos la configuración de la sección, y nos vamos a la pestaña de avanzado, a continuación agregamos el siguiente ID de CSS:
CSS ID: Proceso
Ahora hacemos lo mismo con la parte de “Our Latest Work” y añadimos el ID de CSS:
CSS ID: Trabajos
Finalmente hacemos lo mismo con la parte de “Award winning Design” y añadimos el ID de CSS:
CSS ID: Premios
Cerramos la sección y guardamos los cambios.
Crear menú para asignar los enlaces
Luego, desde el personalizador de temas de WordPress nos vamos a Apariencia> Menús y creamos un nuevo Menú principal. Creamos tres enlaces personalizados con la siguiente URL y texto de enlace:
Enlace Personalizado 1
URL: #Proceso
Link Text: Proceso
Enlace Personalizado 2
URL: #Trabajos
Link Text: Trabajos
Enlace Personalizado 3
URL: #Premios
Link Text: Premios
No olvides seleccionar establecer tu ubicación de visualización en Menú principal. Luego guarda tu menú.
¡Listo! cuando visites tu página y cliques a algún enlace del menú de navegación principal, podrás ver que hay un desplazamiento hasta la sección a la que le asignamos esa ID particular como puedes ver a continuación:
Eso no es lo único que podemos hacer con los enlaces ancla, podemos hacer lo mismo pero asignado el enlace a un botón dentro de una página.
Crear un enlace ancla que enlace a cualquier parte del sitio web.
También podemos asignar un enlace ancla a cualquier módulo dentro de Divi para que enlace a cualquier parte de nuestro sitio web que tenga un enlace ancla especifico.
Lo primero que debemos hacer es definir y establecer la sección, fila o módulo que queremos enlazar. Por ejemplo, me gustaría enlazar la parte final de la página que hemos creado para el ejemplo.
Abrimos la sección, nos vamos a configuración avanzada y en ID de CSS asignamos ID de CSS:
CSS ID: Final
Ahora nos vamos al módulo incial en el primero voton y configuración en su sección de “Enlace” el siguiente enlace ancla:
URL: #final
Cerramos y guardamos los cambios.
Ahora vamos a nuestra página en Live y clicamos al botón principal de la páginas. Verás como la página se desplaza justo al final, posicionándose en la parte inferior, justo en la sección donde le asignamos la CSS ID.
Conclusiones:
Los enlaces ancla tienen muy buenos usos prácticos, pero no te vuelvas loco con ellos porque siempre debes considerar primero a tu audiencia y tus objetivos. Recuerda, un buen diseño se trata de usabilidad y función, por lo que, en algunos casos, los enlaces ancla en Divi pueden ser muy útiles. Pero en otros, solo significa que los usuarios van y vienen sobre las secciones de la página y terminan perdiéndose.
¡Por favor, deja un comentario si este pequeño tutorial te ha parecido útil, y no se te olvide echarle un vistazo a nuestros cursos y tutoriales premium sobre el tema Divi!
¿Tienes algún consejo o pregunta sobre enlaces ancla? Coméntanos tus experiencias en la sección de comentarios de este post.
¿Se puede crear un ancla a una sección entre 2 páginas en Divi, no dentro de la misma? Es decir, si por ejemplo tengo un botón de ver servicios en una página, me lleve a la sección de otra página donde estén esos servicios específicos.
Muchas gracias,
Si se puede José. Después de crear el ancla en la página de destino, solo debes colocar el enlace en el botón que desees que lleve a esa página, por ejemplo: pagina.com/servicio/#ancladeservicios
Si pude hacer las anclas, pero se pierde el cambio de color en el menu cuando haces click en una seccion
Hola! utilizaba este tipo de navegacion en mi pagina (Vreal.es) pero ha dejado de funcionar. Alguien sabe por que?
Gracias!
Hola Celina. Revisa que no hayan cambiado los enlaces permanentes. Tambien verifica que tienes correctamente enlazado todos los elementos.
Hola!
Yo tenía todos los cta anclados al formulario de contacto para presupuestos y no funciona ninguno, igual que Celina, ha dejado de funcionar, llevo dos días revisando toda la web y no encuentro la solución.
¿Se te ocurre que puede haber pasado?
Saludos!
Yolanda R.
¿Checaste actualizar los enlaces permanentes?
Hola Jefferson! Sí, busqué un tutorial de enlaces permanentes y está todo correcto.
Me defiendo como puedo en wordpress pero tampoco controlo tanto.
He creado una landing nueva y derivo los CTA a ella, estoy cambiando todos los enlaces.
Muchas gracias de todos modos.
Saludos
Yolanda R
Claro que si, un saludo.
Hola, que tal?
Estoy al igual que los anteriores comentarios, sin tener una respuesta a esto. La anclas no funcionan. He seguido los pasos de este tutorial pero no hay caso. Que otra cosa podría ser que esté afectando al tema?
Comparte la URL donde tienes los enlaces ancla.
Hola,
En mi caso, todo funciona perfectamente, pero he observado que en version movil no es asi, cuando la navegacion es entre paginas. He creado un ancla que me redirige a su seccion, en version escritorio, pero en movil, tan solo me redirige a la pagina en cuestion, pero no se desplaza hasta la seccion.
El ID de la seccion es: anclaje
La URL es: midominio.com/paginademo/#anclaje
Este es un comportamiento habitual para movil?
Gracias.
De hecho no, debería funcionar correctamente incluso en móvil.
Gracias por el aporte, pero ¿sabes cómo se hace cuando has utilizado el módulo de pestañas de divi y quieres crear un enlace para cada una de las pestañas? No aparece un CSS ID para cada pestaña.
El sistema trabaja con todos los elementos a los que se les pueda poner un “ID” Si las pestañas individuales de un módulo no se les puede poner un “ID” tendrás que buscar una alternativa.
Buenos días,
Me sucede algo con los botones dentro de los productos que no sé cómo gestionar, no sé si me podrían ayudar.
Para los productos tengo una plantilla generalizada, en la cual puedo incluir imagen diferente, texto diferente, etc. Pero en cuanto al botón (que sería para descargar una ficha técnica diferente en cada producto) lo que hace Divi es generalizarlo para todos ellos, por tanto aunque esté dentro de un producto e incluya un enlace diferente en dicho botón, se generaliza en el resto. ¿Cómo podría hacer para que en cada producto este botón lleve a un documento diferente?
Gracias.
Lo que debes hacer es crear un campo personalizado con ACF, y posteriormente, enlazar dinámicamente ese botón a ese campo personalizado. En el campo personalizado evidentemente deberás colocar el enlace particular al que quieres dirigirlo. Hablamos sobre esto en este tutorial de ACF: https://uxdivi.com/blog/tutorial-de-advance-custom-fields-acf-con-divi-y-su-contenido-dinamico