Seleccionar página

Guía Divi: cómo usar los enlaces ancla en Divi

En este tutorial de Divi les enseñaremos cómo usar los enlaces ancla en Divi. Comenzaré comentado que los enlaces ancla, anchor link, o enlaces...

Por Jefferson M.

May 11, 2020

¡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: 4 minutos

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.

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.

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

15 Comentarios

  1. Avatar

    ¿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,

    Responder
    • Jefferson M.

      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

      Responder
  2. Avatar

    Si pude hacer las anclas, pero se pierde el cambio de color en el menu cuando haces click en una seccion

    Responder
  3. Avatar

    Hola! utilizaba este tipo de navegacion en mi pagina (Vreal.es) pero ha dejado de funcionar. Alguien sabe por que?
    Gracias!

    Responder
    • Jefferson M.

      Hola Celina. Revisa que no hayan cambiado los enlaces permanentes. Tambien verifica que tienes correctamente enlazado todos los elementos.

      Responder
  4. Avatar

    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.

    Responder
    • Jefferson M.

      ¿Checaste actualizar los enlaces permanentes?

      Responder
      • Avatar

        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

        Responder
        • Jefferson M.

          Claro que si, un saludo.

          Responder
  5. Avatar

    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?

    Responder
    • Jefferson M.

      Comparte la URL donde tienes los enlaces ancla.

      Responder
  6. Avatar

    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.

    Responder
    • Jefferson M.

      De hecho no, debería funcionar correctamente incluso en móvil.

      Responder
  7. Avatar

    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.

    Responder
    • Jefferson M.

      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.

      Responder

Enviar un comentario

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

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos