Por qué el Salto de Ancla de Divi Falla en el Theme Builder (y la ÚNICA solución que funciona)

diseño web · 30/10/2025

Estás en la recta final. Has creado una hermosa página web “One-Page” con Divi. Has utilizado el poderoso Constructor de Temas (Theme Builder) para diseñar una cabecera fija (header) que se mantiene visible mientras te desplazas y un cuerpo personalizado (Custom Body) para tu página de inicio. Creas tu menú de navegación con enlaces de ancla (ej. /#servicios), lo pruebas con orgullo y…

…el desastre.

Al hacer clic, la página salta correctamente, pero el título de tu sección de “Servicios” ha desaparecido. Está oculto, “tragado” por esa cabecera fija que tanto te costó diseñar.

Si te está pasando esto, bienvenido. Acabas de toparte con uno de los problemas más frustrantes y específicos del ecosistema Divi. Y lo que es peor, has buscado en Google y has probado todas las soluciones obvias: padding, margin, scroll-margin-top… y nada funciona.

Tranquilo, no estás loco y tu Divi no está roto.

Pasé horas depurando exactamente este problema. Probé cada método conocido (y algunos que inventé sobre la marcha) y todos fallaron. ¿La razón? El culpable es un conflicto directo entre el script de smooth scroll de Divi y la forma en que el Theme Builder calcula la posición de las secciones.

Pero hay una solución. Una que funciona siempre.

En este artículo, te ahorraré ese dolor de cabeza. Te explicaré por qué fallan los métodos comunes y te daré la única solución CSS que soluciona este problema de forma limpia, definitiva y sin necesidad de complicados scripts.

Sección 1: ¿Por Qué Falla Realmente? (El Culpable Oculto)

Lo primero que debes entender es que no estás haciendo nada mal. El problema no es un “bug” en el sentido tradicional, sino un conflicto de scripts.

El culpable es la propia función de “desplazamiento suave” (smooth scroll) de Divi.

Así es como funciona (y por qué falla):

Cuando un visitante hace clic en un enlace de ancla (ej. /#servicios), Divi impide que el navegador haga su "salto" instantáneo por defecto.
En su lugar, el JavaScript de Divi toma el control.
El script localiza la sección (la que tiene el ID #servicios) y le pregunta al navegador: "¿Cuál es tu posición exacta en la parte superior de la página?" (su offsetTop).
Luego, el script anima el desplazamiento de la pantalla exactamente a esa coordenada de píxel.

Aquí está el fallo: El script de Divi es “ciego”. No tiene en cuenta la altura de tu cabecera fija del Theme Builder, que está flotando por encima de todo. Simplemente te lleva al borde superior de la sección, y ese borde queda, por supuesto, tapado por tu cabecera.

¿Por qué es peor en el Theme Builder? Porque el Constructor de Temas envuelve tu contenido en contenedores especiales (como .et-boc y .et-l–body), lo que hace que los cálculos de posición sean aún más complejos y propensos a que el script de Divi se confunda.

Por eso, la mayoría de las soluciones CSS modernas, como scroll-margin-top, están destinadas a fallar. Estamos intentando solucionar un problema de cálculo de JavaScript con una regla de CSS, y el script de Divi simplemente la ignora.

Sección 2: Las Soluciones que "Deberían" Funcionar (Pero Fallan en el Theme Builder)

Cuando te enfrentas a este problema, tu primer impulso (y el mío) es buscar una solución en Google o foros de desarrollo. Invariablemente, encontrarás tres soluciones principales. El problema es que, en el contexto específico del Constructor de Temas de Divi, estas soluciones fallan estrepitosamente.

Aquí te resumo los métodos que probé y por qué no funcionaron, para que no pierdas tu tiempo:

Intento #1: El CSS Moderno (`scroll-margin-top`)

La Teoría: Esta es la propiedad CSS moderna, diseñada exactamente para este problema. Con una simple regla como scroll-margin-top: 140px;, le dices al navegador: "Cuando saltes a esta ancla, por favor, detente 140 píxeles antes de llegar a ella".
Por Qué Falló: Como explicamos en la sección anterior, el script de Divi anula el comportamiento nativo del navegador. El script no le pide al navegador que salte, sino que calcula una posición de píxel exacta y anima el scrollTop hasta allí. La propiedad scroll-margin-top nunca llega a actuar.

Intento #2: El "Truco" Clásico de CSS (`padding-top` y `margin-top`)

La Teoría: Esta es la solución de la vieja escuela. Aplicas un padding-top: 140px; a tu sección para "empujar" el contenido hacia abajo, y luego un margin-top: -140px; para "subir" la sección y que no quede un espacio en blanco.
Por Qué Falló: De nuevo, el script de Divi es demasiado listo. No calcula la posición del contenido dentro de la sección; calcula la posición de la sección misma. Aunque el contenido esté 140px más abajo, el script sigue animando el scroll hasta el borde superior de la sección (offsetTop), que sigue estando detrás de la cabecera.

Intento #3: La "Guerra de Scripts" (JavaScript Personalizado)

La Teoría: Si el problema es un script de Divi, ¡luchemos contra él con nuestro propio script! Usando jQuery o JavaScript, podemos "interceptar" el clic (e.preventDefault()), detener el script de Divi y calcular manualmente el salto correcto restando la altura de la cabecera.
Por Qué Falló (O por qué es una mala idea): Esto es como intentar cambiar una pieza del motor de un coche en marcha. Entras en una "guerra de scripts". Puede que soluciones el salto, pero es muy probable que rompas otras funciones (como el script que resalta el enlace activo en el menú mientras haces scroll) o que tu script entre en conflicto con futuras actualizaciones de Divi. Es una solución frágil, complicada y poco mantenible.

Tras probar todo esto, me di cuenta de que el enfoque era erróneo. La solución no era luchar contra el script de Divi. Era aceptarlo y usar una especificidad de CSS aún mayor para ganarle la partida al diseño.

Sección 3: La Solución Definitiva (El CSS de "Fuerza Bruta")

Después de todos esos intentos fallidos, la solución correcta resultó ser sorprendentemente simple. La filosofía es: dejar de luchar contra el script de Divi.

Dejamos que el script haga su cálculo erróneo y nos lleve detrás de la cabecera. Luego, usamos una regla de CSS con una especificidad tan alta que Divi no puede ignorarla, forzando al contenido dentro de esa sección a “empujarse” hacia abajo, haciéndose visible.

Aquí tienes el método exacto, paso a paso.

Paso 1: Confirmar la Ubicación del ID

Este método funciona asumiendo que tus IDs de ancla (#infoproductos, #diseno-web, etc.) están colocados en el lugar correcto: la Sección principal de Divi (la de color azul), en la pestaña Avanzado > ID de CSS.

Paso 2: El Código Mágico (La Solución)

Ahora, ve a Divi > Opciones del Tema > CSS Personalizado (o al style.css de tu tema hijo) y añade el siguiente bloque de código:

CSS

/*
* SOLUCIÓN DEFINITIVA: ANCLA DE THEME BUILDER
*
* Fuerza un padding superior solo a las secciones
* ancla que están dentro de un cuerpo de plantilla
* personalizado de Divi (et-l--body).
*/
body.home .et-boc .et-l--body .et_pb_section#infoproductos,
body.home .et-boc .et-l--body .et_pb_section#diseno-web,
body.home .et-boc .et-l--body .et_pb_section#sobre-mi {
padding-top: 140px !important;
}

(Nota: Asegúrate de cambiar #infoproductos, #diseno-web y #sobre-mi por los IDs exactos de tus secciones. Y si tu cabecera es más alta o más baja, ajusta el valor de 140px hasta que quede perfecto).

Paso 3: ¿Por Qué Funciona Este Código?

Este código gana la batalla por dos razones:

Selector Ultra-Específico: La clave es body.home .et-boc .et-l--body .et_pb_section#infoproductos. Al ser tan largo y específico, tiene más "peso" que los estilos por defecto de Divi. Le estamos diciendo al navegador: "Ignora las reglas de padding de Divi para esta sección; esta es la que manda".
padding-top: 140px !important;: El padding-top crea un "relleno" interno en la parte superior de la sección azul. El script de Divi sigue saltando al borde de la sección, pero el contenido (tus filas y módulos) ahora empieza 140px más abajo, quedando perfectamente visible. El !important es el seguro final para garantizar que nuestra regla gane siempre.

Conclusión: ¡Problema Resuelto!

¡Y listo! Con esta simple regla de CSS, tu navegación por anclas en el Constructor de Temas de Divi funcionará perfectamente, el contenido será visible y habrás solucionado uno de los problemas más frustrantes de esta plataforma.

Como has visto, Divi es increíblemente potente, pero a veces hay que conocer sus secretos más profundos para dominarlo por completo.

Espero que esta guía te haya ahorrado horas de frustración. Resolver estos desafíos técnicos es mi especialidad. Si estás cansado de pelear con tu sitio web y prefieres que un experto se encargue de la optimización, el mantenimiento y la solución de problemas, hablemos.

Contactar Ahora