Menú transparente sobre el hero que se vuelve sólido al scrollear
Esta lección no crea archivos de código. Todo se configura dentro del Divi Theme Builder usando opciones nativas de Divi 5 — sin tocar CSS. Este efecto lo usán Apple, Stripe y las agencias más caras del mundo. Vos lo vas a tener también.
1. ¿Qué vamos a construir?
La mayoría de los sitios tienen un menú blanco estático que se queda ahí desde el principio. Lo que vamos a construir es diferente:
→
- Al entrar a la página: menú transparente, texto blanco, flotando sobre la imagen del hero
- Al hacer scroll: menú blanco sólido, texto oscuro, con sombra suave
- La transición entre los dos estados es suave y animada
- Todo configurado con opciones nativas de Divi 5, sin código
2. Cómo funciona esto en Divi 5
Divi 5 tiene un sistema de estado doble para el sticky. Cada propiedad de diseño (color de fondo, tamaño de texto, etc.) tiene un ícono de pin 📌 al lado. Al hacer clic en ese pin, se abre un segundo valor que solo se aplica cuando el elemento está pegado arriba.
| Estado | ¿Cuándo se aplica? | Lo que configuramos |
|---|---|---|
| Normal | Al entrar a la página, antes de scrollear | Fondo transparente, texto blanco |
| Pegajoso (Sticky) | Después de scrollear, mientras está fijo arriba | Fondo blanco, texto oscuro, sombra |
3. Paso 1 — Preparar la sección del menú
1
Abrir el Encabezado Global en el Theme Builder
Ir a Divi → Theme Builder.
Hacé clic en el ícono del lápiz ✏️ del Encabezado Global.
Vas a ver la topbar azul oscura (lección 6.1) arriba.
Abrir el Encabezado Global en el Theme Builder
Ir a Divi → Theme Builder.
Hacé clic en el ícono del lápiz ✏️ del Encabezado Global.
Vas a ver la topbar azul oscura (lección 6.1) arriba.
2
Agregar una nueva sección debajo de la topbar
Hacé clic en «+» para agregar una sección debajo de la topbar.
Hacé clic en el ícono de ajustes ⚙️ de esa sección nueva para abrirla.
Agregar una nueva sección debajo de la topbar
Hacé clic en «+» para agregar una sección debajo de la topbar.
Hacé clic en el ícono de ajustes ⚙️ de esa sección nueva para abrirla.
3
Fondo de la sección: transparente (estado normal)
Pestaña Contenido → Fondo.
En Color De Fondo hacé clic en el cuadro de color → elegí un color completamente transparente (arrastrá la opacidad a
Resultado: la sección no tiene fondo visible. Los links van a mostrarse sobre lo que haya debajo (la imagen del hero).
Fondo de la sección: transparente (estado normal)
Pestaña Contenido → Fondo.
En Color De Fondo hacé clic en el cuadro de color → elegí un color completamente transparente (arrastrá la opacidad a
0%).Resultado: la sección no tiene fondo visible. Los links van a mostrarse sobre lo que haya debajo (la imagen del hero).
4
Quitar el relleno de la sección
Pestaña Diseño → Espaciado → Relleno De: todos los valores en
Quitar el relleno de la sección
Pestaña Diseño → Espaciado → Relleno De: todos los valores en
0 px.
4. Paso 2 — Hacer que la sección flote sobre el hero
Para que el menú quede encima de la imagen del hero (y no empuje el contenido hacia abajo), tenemos que cambiar la posición de la fila a Absoluta.
5
Insertar una fila de 1 columna
Dentro de la sección, hacé clic en «+» → elegí estructura de 1 columna.
Insertar una fila de 1 columna
Dentro de la sección, hacé clic en «+» → elegí estructura de 1 columna.
6
Posicionar la fila de forma absoluta
Hacé clic en el ícono de ajustes ⚙️ de la fila (no de la sección).
Pestaña Avanzado → Posición:
Posicionar la fila de forma absoluta
Hacé clic en el ícono de ajustes ⚙️ de la fila (no de la sección).
Pestaña Avanzado → Posición:
- Posición: elegí Absoluta
- Ubicación: elegí Centro Superior (arriba al centro)
Esto hace que la fila flote sobre el contenido de la página sin desplazar nada hacia abajo. El hero va a quedar debajo del menú.
¿Por qué es necesario? Si la fila tiene posición normal, el menú empuja el hero hacia abajo y la ilusión de «flotante» se pierde. Con posición Absoluta, el menú y el hero comparten el mismo espacio vertical.
5. Paso 3 — Agregar y configurar el módulo Menú
7
Agregar el módulo Menú
Hacé clic en «+» dentro de la columna → buscá
Agregar el módulo Menú
Hacé clic en «+» dentro de la columna → buscá
me → elegí Menú.
8
Conectar el menú de WordPress (Contenido)
Pestaña Contenido → Contenido → Menú: elegí Mi Menu Primario.
Pestaña Contenido → Logo: subí el logo en versión blanca o clara (se va a ver sobre el hero oscuro).
Conectar el menú de WordPress (Contenido)
Pestaña Contenido → Contenido → Menú: elegí Mi Menu Primario.
Pestaña Contenido → Logo: subí el logo en versión blanca o clara (se va a ver sobre el hero oscuro).
Tip: Si tenés el logo en un solo color oscuro, podés usar el bloque Diseño → Logo → Filtros para aclararlo, o subir temporalmente una versión PNG con fondo transparente y texto blanco.
9
Color del texto en estado normal: blanco
Pestaña Diseño → Texto Del Menú:
Color del texto en estado normal: blanco
Pestaña Diseño → Texto Del Menú:
- Color:
#ffffff(blanco — se ve sobre el hero oscuro) - Tamaño:
15px - Peso: Seminegrita
6. Paso 4 — Activar el sticky y configurar el estado pegajoso
Ahora viene la parte más importante: activar el sticky en la Sección y definir cómo se ve cuando está pegada arriba.
10
Activar sticky en la sección
Hacé clic en los ajustes de la sección ⚙️ → pestaña Avanzado → Efectos De Desplazamiento.
En Posición Pegajosa elegí Arriba.
Activar sticky en la sección
Hacé clic en los ajustes de la sección ⚙️ → pestaña Avanzado → Efectos De Desplazamiento.
En Posición Pegajosa elegí Arriba.
11
Fondo blanco en el estado pegajoso (el ícono de pin 📌)
Con la sección en modo sticky activo, volvé a Contenido → Fondo → Color De Fondo.
Ahora vas a ver un ícono de pin 📌 al lado del campo de color.
Hacé clic en ese pin → aparece un segundo campo para el estado sticky.
En el segundo campo poné
Fondo blanco en el estado pegajoso (el ícono de pin 📌)
Con la sección en modo sticky activo, volvé a Contenido → Fondo → Color De Fondo.
Ahora vas a ver un ícono de pin 📌 al lado del campo de color.
Hacé clic en ese pin → aparece un segundo campo para el estado sticky.
En el segundo campo poné
#ffffff (blanco sólido).
Resultado: fondo transparente cuando entra → fondo blanco cuando está pegado arriba.
12
Texto oscuro en el estado pegajoso
Ahora abrí el módulo Menú → pestaña Diseño → Texto Del Menú → Color.
Hacé clic en el ícono de pin 📌 al lado del campo de color.
En el segundo campo (estado sticky) poné
Texto oscuro en el estado pegajoso
Ahora abrí el módulo Menú → pestaña Diseño → Texto Del Menú → Color.
Hacé clic en el ícono de pin 📌 al lado del campo de color.
En el segundo campo (estado sticky) poné
#334155 (gris oscuro).
Resultado: texto blanco cuando entra → texto oscuro cuando está pegado.
13
Agregar sombra en el estado pegajoso
En los ajustes de la sección → pestaña Diseño → Sombra De Caja.
Hacé clic en el ícono de pin 📌 → en el estado sticky elegí el segundo preset de sombra (suave).
Agregar sombra en el estado pegajoso
En los ajustes de la sección → pestaña Diseño → Sombra De Caja.
Hacé clic en el ícono de pin 📌 → en el estado sticky elegí el segundo preset de sombra (suave).
Resultado: sin sombra cuando está sobre el hero → sombra sutil cuando está pegado.
7. Paso 5 — Activar la transición suave
14
Animar el cambio entre estados
En los ajustes de la sección → pestaña Avanzado → Efectos De Desplazamiento.
Buscá la opción Transición Entre Estilos Predeterminados Y Pegajosos y activala (Sí).
Animar el cambio entre estados
En los ajustes de la sección → pestaña Avanzado → Efectos De Desplazamiento.
Buscá la opción Transición Entre Estilos Predeterminados Y Pegajosos y activala (Sí).
Esto hace que el cambio de transparente a blanco sea una animación fluida en lugar de un corte abrupto.
8. Paso 6 — Guardar
15
Guardar y publicar
Hacé clic en Guardar → luego Salir.
En el Theme Builder hacé clic en Guardar Cambios.
Cuando aparezca la confirmación, el efecto está activo en todo el sitio.
Guardar y publicar
Hacé clic en Guardar → luego Salir.
En el Theme Builder hacé clic en Guardar Cambios.
Cuando aparezca la confirmación, el efecto está activo en todo el sitio.
9. Tabla resumen — ícono de pin 📌 en acción
| ¿Qué configurás? | ¿Dónde? | Estado normal | Estado sticky (pin 📌) |
|---|---|---|---|
| Fondo de la sección | Sección → Contenido → Fondo | Transparente (0% opacidad) | #ffffff blanco sólido |
| Color del texto del menú | Módulo Menú → Diseño → Texto Del Menú | #ffffff blanco |
#334155 gris oscuro |
| Sombra de la sección | Sección → Diseño → Sombra De Caja | Ninguna | Preset 2 (sombra suave) |
| Posición de la fila | Fila → Avanzado → Posición | Absoluta → Centro Superior (igual en ambos estados) | |
| Sticky activado | Sección → Avanzado → Efectos De Desplazamiento | Posición Pegajosa → Arriba | |
| Transición suave | Sección → Avanzado → Efectos De Desplazamiento | Transición Entre Estilos → Sí | |
10. Vista previa del resultado
Así se ve al entrar a la página (menú transparente sobre el hero):
Al hacer scroll (menú blanco sólido):
MiLMS
InicioCursosBlogContactanos
11. Verificación
Para confirmar que el efecto funciona:
- Ctrl + Shift + R en el frontend para forzar recarga.
- Al entrar: el menú debe aparecer sin fondo, con texto blanco, sobre la imagen del hero.
- Hacé scroll hacia abajo — el menú debe transicionar suavemente a fondo blanco con texto oscuro.
- La topbar azul (lección 6.1) debe desaparecer al scrollear pero el menú blanco queda fijo.
- Si algo no se ve bien, revisá que el ícono de pin 📌 esté activo en los campos de color (fondo y texto).
¿Por qué este diseño es diferente?
El 95% de los sitios web tienen un menú blanco fijo desde el primer momento. Este efecto hace que la primera impresión del visitante sea una imagen de hero que ocupa toda la pantalla sin interrupciones — el menú aparece solo cuando lo necesita. Es el estándar de sitios como Apple, Stripe y las mejores agencias digitales.
El 95% de los sitios web tienen un menú blanco fijo desde el primer momento. Este efecto hace que la primera impresión del visitante sea una imagen de hero que ocupa toda la pantalla sin interrupciones — el menú aparece solo cuando lo necesita. Es el estándar de sitios como Apple, Stripe y las mejores agencias digitales.