Enlaces ancla en Divi: cómo crearlos paso a paso

En este tutorial te enseñamos cómo usar los enlaces ancla en Divi. Los enlaces ancla (anchor links o enlaces de anclaje) son hipervínculos que llevan al usuario a una sección específica de una página, ya sea en la misma página o en una página diferente del sitio.

La principal función de los enlaces ancla es mostrar una breve descripción del contenido enlazado para que el usuario pueda encontrar información ampliada sobre la temática que está leyendo. Se utilizan principalmente en estrategias de SEO, pero también para mejorar la navegabilidad dentro de un sitio web con mucho contenido en una sola página.

Los enlaces ancla pueden mejorar la navegación y ayudar a organizar el contenido, especialmente en páginas con muchas secciones. En este artículo nos centramos en cómo usarlos específicamente en Divi.

Crear una one page de navegación vertical con enlaces ancla en Divi

Comenzamos con algo práctico: crear una one page de navegación vertical con Divi, una de las funciones más solicitadas por los usuarios.

Este tipo de diseño de menú es popular para sitios de una sola página (one page sites). Para eso debes crear los enlaces en el menú para saltar de una sección a otra dentro de la misma página.

El primer paso es crear una nueva página, abrimos el constructor visual y seleccionamos un diseño prefabricado — por ejemplo, «Design Agency Landing Page» — como base de trabajo.

Ahora agrega el CSS ID a cada sección a la que desees vincular. En la sección «What We Do», abre la configuración de la sección, ve a la pestaña Avanzado y agrega:

CSS ID: proceso

Haz lo mismo con «Our Latest Work»:

CSS ID: trabajos

Y con «Award Winning Design»:

CSS ID: premios

Cierra la sección y guarda los cambios.

Crear el menú para asignar los enlaces

Desde el personalizador de temas de WordPress ve a Apariencia > Menús y crea un nuevo menú principal. Agrega tres enlaces personalizados con la siguiente configuración:

• Enlace personalizado 1 — URL: #proceso — Texto: Proceso
• Enlace personalizado 2 — URL: #trabajos — Texto: Trabajos
• Enlace personalizado 3 — URL: #premios — Texto: Premios

Selecciona «Menú principal» como ubicación de visualización y guarda el menú.

Al visitar la página y hacer clic en cualquier enlace del menú de navegación, verás cómo la página se desplaza suavemente hasta la sección correspondiente.

Crear un enlace ancla que enlace a cualquier parte del sitio web

También puedes asignar un enlace ancla a cualquier módulo dentro de Divi para enlazar a cualquier parte del sitio. El proceso es el mismo: primero defines el CSS ID en la sección o módulo de destino, y luego apuntas a ese ID desde el botón o texto de enlace.

Por ejemplo, para que un botón en la parte superior de la página lleve al usuario directamente al final:

1. Abre la sección de destino, ve a Avanzado > ID y clases CSS y asigna: CSS ID: final.
2. En el módulo de botón de origen, en la sección «Enlace», escribe la URL: #final.
3. Guarda y verifica en la vista live que el clic en el botón desplaza la página al elemento correcto.

Tabla de contenidos con enlaces ancla en Divi

Una aplicación muy útil de los enlaces ancla es crear una tabla de contenidos (TOC) al inicio de un post o página larga. Esto mejora la experiencia del usuario y tiene impacto positivo en SEO porque Google suele mostrar los jumlinks de la tabla de contenidos directamente en los resultados de búsqueda como «sitelinks».

Para crear una TOC con enlaces ancla en Divi:

1. Agrega un módulo de texto al inicio de la página con la lista de secciones que tendrá el contenido.
2. Cada elemento de la lista es un enlace que apunta a un #ancla específica (por ejemplo: #introduccion, #metodo-1, #conclusiones).
3. En cada sección de destino, asigna el CSS ID correspondiente en la configuración avanzada de la sección o fila.

Este patrón lo usan muchos blogs de autoridad y es especialmente efectivo en guías largas, tutoriales paso a paso y comparativas.

Anclas en Divi 5

En Divi 5, el sistema de CSS IDs funciona de manera idéntica a Divi 4. Aun así, hay dos diferencias a tener en cuenta:

• Interfaz mejorada: en Divi 5, el campo de CSS ID se encuentra en el panel de Inspector > Avanzado > Atributos. La ubicación es ligeramente diferente, pero la funcionalidad es la misma.
• Scroll suave nativo: Divi 5 incluye comportamiento de scroll suave más refinado al usar anclas. En algunos casos, es posible que ya no necesites el CSS adicional de scroll-behavior que se requería en versiones anteriores.

Errores comunes con anclas en Divi y cómo resolverlos

• La página salta a la sección pero se posiciona muy arriba o muy abajo: ocurre cuando el header fijo (sticky) de Divi cubre parte del contenido al hacer el scroll. Solución: agrega un offset con CSS o con un pequeño padding-top en la sección de destino del mismo alto que el header.
• El enlace ancla desde otra página no funciona: para que un enlace ancla que viene desde otra página funcione, la URL debe tener el formato completo: https://tudominio.com/nombre-pagina/#seccion. Si solo pones #seccion sin la URL de la página, el navegador buscará esa ancla en la página actual.
• El CSS ID tiene mayúsculas o espacios: los CSS IDs deben ser en minúsculas y sin espacios. Usa guiones para separar palabras (mi-seccion, no Mi Seccion). Un ID mal formado no funciona como destino de ancla.
• El scroll no es suave sino un salto instantáneo: agrega html { scroll-behavior: smooth; } en el CSS adicional del tema para activar el desplazamiento animado en todos los navegadores modernos.

Preguntas frecuentes

¿Los enlaces ancla afectan el SEO de la página?

Positivamente, sí. Los anchor links internos contribuyen a la estructura de la página y facilitan que los bots de búsqueda entiendan la jerarquía del contenido. Además, si usas una tabla de contenidos con anclas, Google puede mostrar esos saltos como «sitelinks» en los resultados de búsqueda, lo que aumenta la visibilidad y el CTR orgánico.

¿Puedo usar anclas para navegar entre páginas diferentes?

Sí. Para enlazar a una sección específica de otra página usa la URL completa seguida del ancla: https://tudominio.com/sobre-nosotros/#equipo. El navegador cargará la página y luego hará el scroll automático hasta la sección con ese ID.

¿Las anclas funcionan en el menú de Divi 5?

Sí. En Divi 5, el menú de navegación funciona igual que en Divi 4: puedes crear enlaces personalizados con URL del tipo #nombre-seccion y el menú navegará a esa sección dentro de la página actual. Para one pages completas, este es el método recomendado.

Conclusiones

Los enlaces ancla tienen muy buenos usos prácticos, pero no los uses en exceso. Siempre debes considerar primero a tu audiencia y tus objetivos. Un buen diseño se trata de usabilidad y función: en algunos casos, los enlaces ancla en Divi son muy útiles (guías largas, one pages, TOC). Pero en otros, solo hacen que el usuario navegue de un lado a otro sin una experiencia clara.

¿Te ha parecido útil este tutorial? Deja un comentario y cuéntanos en qué proyecto lo aplicaste. Si trabajas con menús complejos en Divi, el siguiente paso natural es revisar cómo ocultar el menú en páginas específicas — una técnica que combina muy bien con los anclas para diseños one page completos. Y si quieres profundizar en SEO técnico para Divi, mira el episodio de nuestro podcast sobre SEO en Divi donde cubrimos esto con más detalle.