Saber cómo crear enlaces ancla en WordPress y conectarlos correctamente al menú de navegación es una de las configuraciones más importantes cuando trabajas con páginas tipo One Page o con navegación interna dentro de una misma página. Aunque puede parecer algo sencillo, es muy común cometer errores al añadir el ID de una sección o al configurar el enlace en el menú, lo que provoca que el desplazamiento no funcione como debería.
En este tutorial aprenderás paso a paso cómo añadir correctamente un ID a cada sección, cómo enlazarlo desde el menú de WordPress y cómo evitar el error más frecuente cuando el enlace ancla no se queda exactamente en la sección correcta. Si quieres que tu navegación interna funcione de forma profesional, limpia y bien configurada, aquí encontrarás la forma correcta de hacerlo.
Qué son los Enlaces Ancla en WordPress y Cómo Funcionan
Primero vamos a entender qué son los enlaces ancla y cómo funcionan.
Los enlaces ancla permiten que, cuando hacemos clic en una opción del menú, la página se desplace automáticamente hasta una sección específica dentro de la misma página. Es decir, no cambia de página, simplemente baja hasta el contenido que queremos mostrar.
Para que esto funcione necesitamos algo llamado ID.
Un ID es simplemente un nombre único que le damos a una sección para poder identificarla. Es como ponerle una etiqueta a esa parte del contenido. Por ejemplo, si tienes una sección de contacto, puedes asignarle como ID la palabra “contacto”.
Y así de la misma manera para las demás secciones que quieras asignarle un identificador.
Buenas Prácticas al Usar Enlaces Ancla en WordPress
Ahora vamos a ver algunas buenas prácticas al usar enlaces ancla en WordPress.
Primero, utiliza nombres cortos y claros para los ID. Por ejemplo, “contacto”, “servicios” o “nosotros”. Evita nombres largos o complicados.
Segundo, no uses espacios, acentos ni caracteres especiales. Los ID deben escribirse en una sola palabra y preferiblemente en minúsculas.
Tercero, cada ID debe ser único. No puedes repetir el mismo nombre en dos secciones distintas porque el navegador no sabrá a cuál ir.
Y por último, si tu sitio tiene un header fijo, asegúrate de compensar la altura para que la sección no quede tapada al hacer clic en el menú.
Siguiendo estas buenas prácticas, tus enlaces ancla funcionarán de forma limpia y profesional.
Cómo Añadir un ID a una Sección en WordPress
Ahora vamos a ver cómo añadir un ID a una sección en WordPress.
Si estás trabajando con un constructor como Elementor, simplemente debes editar la sección, ir a la pestaña de opciones avanzadas y buscar el campo que dice “CSS ID”. Ahí escribes el nombre que quieres asignarle a esa sección, por ejemplo “servicios”.
Es importante que no pongas el símbolo numeral aquí, solo el nombre. Tampoco debes usar espacios ni caracteres especiales.
Una vez guardes los cambios, esa sección ya tendrá su identificador y estará lista para conectarla con el menú mediante un enlace ancla.
Cómo Crear el Enlace Ancla en el Menú de WordPress
Ahora vamos a crear el enlace ancla en el menú de WordPress.
Primero debes ir a Apariencia y luego a Menús. Allí puedes elegir el menú que ya estás utilizando en tu sitio o crear uno nuevo si todavía no tienes uno configurado.
Es muy importante entender que no vamos a añadir una página al menú, sino un enlace personalizado.
En la parte izquierda encontrarás la opción que dice Enlaces personalizados, y es esa la que debemos usar. En el campo de URL escribes el símbolo numeral seguido del ID que asignaste a la sección. Por ejemplo, si el ID es “servicios”, aquí debes escribir #servicios.
En el campo de texto del enlace escribes el nombre que quieres que aparezca en el menú, por ejemplo “Servicios”. Luego haces clic en Añadir al menú y finalmente guardas los cambios.
De esta manera el menú no abrirá otra página, sino que se desplazará dentro de la misma página hasta la sección correspondiente.
Si quieres ver otro ejemplo práctico utilizando WordPress y Elementor, también tengo este tutorial donde explico cómo crear enlaces ancla paso a paso:
👉 Cómo crear enlaces ancla con WordPress y Elementor
https://youtu.be/xU_bUxGK60g
Cómo Hacer que el Menú Baje Exactamente a la Sección Correcta
Ahora vamos a ver cómo hacer que el menú baje exactamente a la sección correcta y no quede cortada o tapada.
Si al hacer clic en el enlace ancla notas que la sección queda un poco más arriba o parcialmente cubierta, normalmente el problema es que tu sitio tiene un header fijo o sticky. Es decir, el menú se mantiene visible en la parte superior mientras haces scroll.
Cuando eso ocurre, el navegador lleva la sección hasta la parte superior de la pantalla, pero el header la tapa.
La solución correcta es compensar la altura del header usando una propiedad llamada scroll-margin-top. Simplemente debes añadir un pequeño código CSS al ID de esa sección indicando el alto aproximado de tu header.
De esta forma, cuando alguien haga clic en el menú, la sección quedará perfectamente alineada y visible, sin trucos ni espacios adicionales.
Cómo Activar el Scroll Suave en los Enlaces Ancla de WordPress
Si al hacer clic en una opción del menú notas que la página salta de forma brusca directamente a la sección, es posible que tu sitio no tenga activado el desplazamiento suave. Esto no significa que el enlace ancla esté mal configurado, simplemente que el navegador está usando el comportamiento de desplazamiento por defecto.
Para mejorar la experiencia de usuario, puedes activar el scroll suave añadiendo un pequeño código CSS en tu tema. En WordPress puedes hacerlo desde Apariencia, luego Personalizar y finalmente en la sección de CSS adicional.
Solo debes añadir el siguiente código:
html {
scroll-behavior: smooth;
}Si estás utilizando Elementor en su versión gratuita y necesitas añadir código CSS personalizado para activar el desplazamiento suave o ajustar el comportamiento del enlace ancla, puedes ver este tutorial donde explico cómo hacerlo paso a paso: Cómo añadir CSS personalizado en la versión gratuita de Elementor
En conclusión: como ves, crear enlaces ancla en WordPress no es complicado, pero sí hay pequeños detalles que marcan la diferencia entre que simplemente funcionen y que realmente estén bien configurados. Añadir correctamente el ID, usar enlaces personalizados en el menú y ajustar el comportamiento cuando el header es fijo son pasos clave para que todo quede profesional.
Al final, lo importante no es solo que el menú baje a una sección, sino que la experiencia sea limpia y fluida para el usuario. Con estos ajustes ya puedes implementar navegación interna de forma correcta en cualquier página tipo One Page sin recurrir a trucos innecesarios.
Si aplicas estas buenas prácticas desde el inicio, evitarás errores comunes y tendrás una estructura mucho más sólida en tus proyectos.
