Menú fijo con efecto hover en Divi (Theme Builder)

Recuerda que puedes descargar tanto el archivo .JSON como el código que se usó en el tutorial en la parte inferior, en la zona de recursos del tutorial.

Puedes aplicar este tipo de menús en sitios corporativos o con estilos Dark Mode para darle ese efecto de transparencia superinteresante.

La idea de estos tutoriales es crear una serie de menús personalizados con el Theme Builder, de manera que aprendas a detalle crear encabezados globales en Divi, con cierto grado de personalización para que luzcan fenomenal en todos los dispositivos.

Qué es un menú fijo con cambio de estilos al hacer scroll

La idea de este menú número 9 es sencilla pero el resultado se ve profesional. Partimos de un menú transparente que se monta sobre la imagen del hero, con el logo y los enlaces en blanco. Luego, al hacer scroll, se queda fijo arriba y cambia de estilos: aparece un fondo semitransparente con un filtro de desenfoque por detrás que da ese aspecto de vidrio esmerilado tan de moda. Para el tutorial parto de un layout corporativo de seguridad con buena paleta de colores, porque es el tipo de proyecto donde un encabezado así brilla. Y lo mejor: todo se construye con el Theme Builder, sin plugins de terceros y con apenas una pizca de CSS.

Paso 1: Crear la plantilla de encabezado en el Theme Builder

El primer paso es ir a Divi → Generador de temas y crear el encabezado. En el tutorial creo la plantilla para una página específica solo por practicidad de la demostración, pero en tu proyecto real lo querrás hacer desde Agregar encabezado global, para que el menú se aplique a todo el sitio de un golpe. Asignas la plantilla, guardas y entras a construir.

Un consejo desde el arranque: como el menú será transparente y con texto blanco, al inicio no vas a ver nada sobre el fondo claro del editor. Para trabajar cómodo, copia con el cuentagotas un color oscuro de la paleta del layout y aplícalo temporalmente como fondo de la fila; al final se lo quitas para recuperar la transparencia.

Consejo: Para ver reflejados los cambios del Theme Builder en el frontend tienes que salir del constructor visual y guardar desde la vista de plantillas. Si esperas verlos editando la página directamente, vas a pensar que algo falló cuando en realidad solo falta refrescar desde el lugar correcto.

Paso 2: Construir la estructura del menú con logo y botón CTA

Dentro de la sección creo una fila de ancho completo y le quito la separación y el relleno —tanto en la sección como en la fila— para que el encabezado quede compacto y pegado arriba. La estructura que busco es la clásica de tres zonas: logo a la izquierda, menú al centro y un botón de llamada a la acción a la derecha. Para lograrlo agrego una columna adicional más angosta donde vive el botón, en lugar de pelear con propiedades flotantes.

En el módulo de menú quito el fondo, pongo el color del texto en blanco y elijo una tipografía limpia. Un matiz útil: una fuente con personalidad como Michroma luce genial en títulos o en el botón, pero para los enlaces del menú suele verse mejor algo más neutro como Ubuntu. El logo lo coloco manualmente en versión clara; si es muy alto y ensancha de más el menú, un truco es usar uno que admita el filtro invertir para volverlo blanco y bajarle la altura a unos 50px. Para el botón replico los colores de contraste del layout (texto blanco, fondo naranja y cambio de color en hover), copiando relleno y tipografía con el cuentagotas. Y para centrar todo verticalmente: en la fila activo igualar la altura de las columnas y agrego un pequeño CSS, align-items: center;, para que logo, menú y botón queden alineados.

Paso 3: Afinar colores, hover y submenús

Con la estructura lista, toca pulir los detalles que separan un menú correcto de uno impecable. Para los enlaces configuro un color de hover —un amarillo de la paleta— para que el usuario reciba retroalimentación al pasar el mouse. Los submenús desplegables necesitan su propio cariño: el color de fondo del desplegable debe coincidir con el fondo oscuro de la cabecera, y conviene definir también el fondo y el color de texto del menú en su versión móvil.

Un detalle que suele pasar desapercibido es esa línea de color que Divi dibuja bajo el menú desplegable. La controlas desde Diseño → Enlace del menú desplegable → Color de la línea: puedes igualarla al fondo para que desaparezca, o convertirla en un acento de marca con tu naranja o amarillo. Es cuestión de probar sobre el diseño real y quedarte con lo que mejor contrasta, justo como harías en un proyecto de cliente.

Paso 4: Ajustar el menú para tablet y móvil

Antes de meterle los efectos sticky conviene resolver el responsive, porque el encabezado cambia bastante entre escritorio y móvil. Un principio clave de Divi: lo que ajustas en tablet se hereda hacia móvil, así que casi siempre empiezas por tablet y luego corriges solo lo puntual en teléfono. En la fila defino una anchura máxima del 100% para tablet y le agrego un relleno superior e inferior de unos 10px solo en móvil para que el logo no quede pegado a los bordes.

Para que el logo y el botón queden uno al lado del otro en pantallas pequeñas, a la fila le aplico display: flex; en el CSS personalizado, manteniendo igualar ancho de columnas. El botón CTA suele verse demasiado grande en teléfono, así que le reduzco el tamaño de fuente y la separación únicamente en móvil, dejando tablet como estaba. Y el menú hamburguesa lo dejo con sus íconos en blanco y un tamaño más generoso para que sea cómodo de tocar con el dedo.

Consejo: Aprovecha que los ajustes hechos en tablet se replican hacia móvil para no duplicar trabajo. Configura primero el comportamiento en tablet, verifica en teléfono y corrige solo las excepciones puntuales. Vas a ahorrar un montón de tiempo y vas a evitar tener valores contradictorios entre breakpoints.

Paso 5: El efecto sticky con fondo de vidrio esmerilado

Aquí está el corazón del tutorial. Para que el encabezado se monte transparente sobre la imagen del hero, a la sección le quito el fondo y, en Avanzado → Posición, la pongo como Fixed anclada arriba al centro. Esto elimina ese rectángulo blanco que Divi suele poner detrás del menú y deja ver la imagen de fondo. Si al hacer scroll el menú se pierde sobre secciones claras, la solución elegante no es la sección sino la fila: a la fila le activo, en Avanzado → Scroll Effects, la opción Sticky on the Top, y le defino un color de fondo que solo aparezca en estado sticky. Así, al hacer scroll la fila se fija arriba con su fondo, mientras al inicio se mantiene transparente sobre el hero. Para asegurar que quede por encima del contenido, sube el z-index de la sección fija a un valor alto como 99999.

El toque final que eleva todo el diseño es el efecto de vidrio. A la fila, cuando está sticky, le doy un poco de transparencia al color de fondo —alrededor del 80% al 90%— y le aplico un filtro de fondo borroso. Ese backdrop-filter: blur(8px); es lo que hace que los elementos que pasan por detrás del menú se vean difuminados, creando ese aspecto premium de cristal esmerilado. Es una línea de CSS, pero es la que transforma el menú de bueno a memorable.

Para rematar la experiencia móvil incorporo dos snippets que reutilizo de otros menús de esta serie. El primero es un CSS más un pequeño JavaScript que convierten los submenús móviles en elementos colapsables: en lugar de mostrar todos los enlaces hijos abiertos, aparece un ícono que el usuario toca para desplegar cada submenú. El segundo es puramente estético: hace que el ícono del menú hamburguesa rote al abrir y cerrar. El CSS, el JavaScript y el JSON completo del menú los tienes abajo, en la zona de recursos, listos para copiar; importar el JSON en el Theme Builder te ahorra rehacer el layout desde cero.

¿Te ha gustado nuestro menú #9 personalizado con el Theme Builder de Divi?

Recuerda que en estos tutoriales te damos snippets con los que puedes lograr cosas fascinantes con diseños personalizados en Divi

Preguntas frecuentes

¿Necesito un plugin para hacer un menú fijo con efecto hover en Divi?

No. Todo el menú se construye con el Theme Builder nativo de Divi usando un módulo de menú, posicionamiento Fixed y la opción Sticky de los Scroll Effects. Lo único que sumamos es algo de CSS para el filtro de desenfoque y para los submenús colapsables, pero no hace falta instalar ningún plugin externo.

¿Por qué el menú se ve separado cuando estoy logueado?

Porque WordPress reserva el espacio de la barra de administración superior y lo emula bajo el encabezado fijo. Ese hueco solo aparece cuando estás logueado como administrador. Si revisas el sitio en una ventana de incógnito o deslogueado, vas a ver que el menú queda perfectamente pegado a la parte superior, tal como lo verán tus visitantes.

¿Qué hace exactamente el backdrop-filter del menú?

El backdrop-filter: blur(8px); difumina lo que queda por detrás del menú, no el menú en sí. Combinado con un fondo semitransparente, genera ese efecto de vidrio esmerilado donde el contenido se ve borroso al pasar bajo el encabezado. Es el detalle que le da el aspecto premium al diseño.

¿Puedo aplicar este menú a todo mi sitio?

Sí. En el tutorial creo la plantilla para una página específica solo para la demostración, pero en un proyecto real debes crearla como encabezado global desde el Theme Builder. Así el menú se aplica de forma automática a todas las páginas, manteniendo la coherencia en todo el sitio.

Conclusión

Este menú número 9 demuestra que con el Theme Builder de Divi puedes lograr encabezados que parecen sacados de un sitio premium, sin escribir más que unas pocas líneas de CSS. La combinación de transparencia sobre el hero, fijación al hacer scroll y ese fondo de vidrio esmerilado funciona de maravilla en proyectos corporativos y en diseños Dark Mode. Y como todo se resuelve de forma visual, puedes iterar rápido y ajustar el resultado hasta que quede como lo imaginas.

Si quieres profundizar en este tipo de técnicas y dominar el Theme Builder de Divi a fondo, explora los cursos de Divi en UXDivi, donde te llevamos paso a paso desde los fundamentos hasta las técnicas más avanzadas de personalización. Descarga el JSON y los snippets de este menú aquí abajo, móntalo en tu sitio y cuéntame en los comentarios cómo te quedó.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Recursos, Snippets y descargas de este tutorial 👇 Puedes acceder a todos estos recursos siendo premium ⭐