Menú de pantalla completa 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 de restaurantes o en cualquier sitio donde necesites mostrar una gran cantidad de elementos.

Un menú de pantalla completa, o menú fullscreen, eleva al instante la percepción de calidad de un sitio: el usuario hace clic en un ícono de hamburguesa y, en lugar de un dropdown clásico, toda la ventana se cubre con una capa elegante que muestra la navegación a lo grande. Es ese detalle que ves en portfolios de agencias y marcas premium, y lo mejor es que no necesitas ningún plugin: todo se construye con el Theme Builder más un módulo de código. Trabajo sobre un diseño de pizzería oscuro, pero al final te explico cómo invertirlo para un sitio claro cambiando apenas un par de valores.

Importante: aunque para este ejemplo construí el menú aplicado a una página específica, en tu caso debes crearlo dentro del encabezado global del Theme Builder. Solo así el menú se aplica de forma automática a todo el sitio sin que tengas que repetirlo página por página.

Cómo se estructura el menú

El menú se compone de dos partes dentro del mismo encabezado personalizado. La primera es una barra superior fija con el logo, el ícono de hamburguesa y un módulo de código donde vive el CSS y el JavaScript. La segunda es una sección aparte con todos los elementos del menú, que permanece oculta y se revela con una animación al hacer clic en la hamburguesa, gracias a unas clases CSS que el JavaScript alterna y a la librería anime.js. Por eso diseñamos todo primero y solo al final activamos el código que la oculta.

Paso 1: La barra superior con logo y hamburguesa

Dentro del encabezado personalizado del Theme Builder, agrego una sección con una fila de tres columnas (la del medio, la más ancha). A la fila le doy 95% de anchura, canalón del ancho personalizado en 1 e igualo la altura de las columnas; la sección queda con relleno cero y fondo transparente. En la columna izquierda coloco el logo (altura máxima de unos 60px, posición absoluta a la izquierda). En la derecha, un módulo de texto al que, en lugar de texto, le pego un bloque HTML con tres líneas: ese HTML, junto con el CSS de más abajo, se transforma en el ícono de hamburguesa. Lo posiciono absoluto a la derecha con tamaño cuadrado de 80px. Recuerda que al crear un elemento por primera vez debes salir del constructor y guardar para verlo en el frontend.

Consejo: para que la barra acompañe al usuario mientras hace scroll, ponla en posición Fixed con un índice Z alto (yo uso 13). Así el logo y la hamburguesa quedan siempre visibles, sin importar cuánto baje la persona en la página.

Paso 2: La sección de pantalla completa con los elementos

Debajo agrego una segunda sección, que ocupará toda la pantalla al abrir el menú. Le pongo un nombre descriptivo ("elementos del menú") para no confundirme, y le defino altura mínima y máxima de 100vh para que siempre cubra el viewport completo. También la pongo en Fixed para que baje junto con la barra.

Dentro coloco los enlaces del menú con módulos de anuncio, porque me dejan combinar ícono y título en una sola pieza, muy elegante para entradas como Home, About o Order Now. Para el título uso la tipografía del diseño en negrita y a buen tamaño (entre 32px y 48px en escritorio). Arma el menú con los elementos que quieras: lo importante es la técnica, no mis ejemplos.

Para que esos enlaces se sientan vivos, configuro un hover: en normal el texto y el ícono van en blanco, y al pasar el mouse cambian al color de acento. Para aplicarlo a todos de golpe uso "extender estilos a todas las burbujas de esta columna" y verifico que cada módulo tenga activada su versión hover. En la otra columna pongo un apoyo visual: una imagen destacada, un texto y un botón. Eso convierte el menú en una pequeña pantalla de bienvenida con personalidad, no en una simple lista de enlaces.

Paso 3: El fondo desenfocado, el detalle que lo hace premium

Un menú que tapa el contenido por completo puede sentirse pesado. El truco para que se vea sofisticado es dejar entrever el fondo: al fondo de la sección le pongo negro con opacidad alta (alrededor del 85%), de modo que la página de atrás se intuya levemente y el usuario nunca pierda el contexto de dónde está.

El segundo ingrediente es un desenfoque sobre lo que queda detrás del menú, con una sola línea de CSS aplicada a la sección: backdrop-filter: blur(5px);. Ese valor de 5 píxeles controla la intensidad: más alto, más borroso; más bajo, más nítido.

Consejo: como te digo en todos mis tutoriales, esto es cuestión de probar, probar y probar. Ajusta la opacidad y el blur recargando el frontend cada vez, porque el efecto no se aprecia bien dentro del constructor visual.

Paso 4: Las clases y el código que dan vida al menú

Con el diseño terminado, conectamos todo con dos clases CSS. Al módulo de texto de la hamburguesa le pongo la clase fullwidth-open, y a la sección que contiene los elementos del menú le pongo fullwidth-menu. Estas dos clases son las que el JavaScript reconoce para saber qué elemento dispara la acción y qué sección revelar.

En el módulo de código del medio pego el bloque completo de CSS y JavaScript de la zona de recursos. El CSS convierte las tres líneas HTML en el ícono de hamburguesa y anima la X cuando el menú está abierto; el JavaScript carga anime.js, alterna las clases al hacer clic y cierra el menú al pulsar cualquier enlace.

Hay un detalle de orden clave para no frustrarte. Dentro del CSS verás un bloque comentado con la nota "habilitar cuando termines de editar el menú": ese bloque es el que oculta la sección (con opacity: 0 y visibility: hidden). Si lo activas demasiado pronto, el menú desaparece del frontend y ya no podrás diseñarlo. Por eso dejas todo listo y, al final, quitas los símbolos de comentario para activarlo; si luego quieres volver a editar, vuelves a comentarlo con /* y */.

Paso 5: Ajustes para móvil y versión clara

Los menús grandes lucen genial en escritorio, pero en móvil hay que afinarlos para que todo entre en una sola pantalla sin scroll. Reduzco las tipografías e íconos en la vista móvil (algo como 24px) extendiendo el cambio a toda la columna y compacto las separaciones. Un truco útil: a la fila de elementos le agrego un display: flex para que en móvil no se traslapen. A la imagen de apoyo le quito la anchura completa y la dejo en un 70% centrada, y un separador visible solo en tablet y móvil divide las dos zonas con claridad.

Pruébalo en tamaños reales: a partir de unos 390px de ancho se ve bien, y en equipos más pequeños como un iPhone SE quizá debas reducir más la imagen y los textos. Importante: como las secciones están en Fixed, en cada página debes darle una separación superior al primer elemento (la sección hero) para que el contenido no quede pegado debajo de la barra.

¿Y si tu sitio tiene fondo claro? La adaptación es muy sencilla: en el CSS cambias el color de la línea de la hamburguesa de #fff a #000 en dos lugares (la línea normal y la línea cuando el menú está abierto). El resto es puro diseño: fondo de la sección en blanco o gris claro y textos e íconos en colores oscuros. La estructura y el código siguen siendo los mismos.

🎓 Si quieres dominar el Theme Builder y crear encabezados profesionales como este, explora los cursos en uxdivi.com/cursos/ — desde los fundamentos de Divi hasta técnicas avanzadas de diseño.

Preguntas frecuentes

¿Necesito un plugin para crear un menú de pantalla completa en Divi?

No. Todo el menú se construye con el Theme Builder nativo de Divi más un módulo de código con el CSS y el JavaScript. La librería anime.js se carga desde un CDN dentro de ese mismo código, así que no instalas nada adicional en WordPress.

¿Por qué mi menú no aparece después de pegar el código?

Lo más común es que hayas activado demasiado pronto el bloque CSS que oculta la sección. Termina el diseño primero y quita los comentarios de ese bloque solo al final. Y recuerda guardar para ver los cambios en el frontend.

¿Cómo cambio la intensidad del fondo desenfocado?

El desenfoque lo controla la propiedad backdrop-filter: blur(5px);. Sube el número para un fondo más borroso o bájalo para uno más nítido, y combínalo con la opacidad del color de fondo hasta lograr el balance que encaje con tu diseño.

Conclusión

Un menú de pantalla completa con el Theme Builder transforma por completo la percepción de un sitio, sin depender de ningún plugin pesado. La gran ventaja de construirlo en el encabezado global es que lo defines una sola vez y queda activo en todo tu sitio; a partir de ahí, todo es jugar con el diseño y reutilizar la misma estructura en restaurantes, portfolios o sitios corporativos.

Si te animas a implementarlo y logras una variante distinta a la mía, déjame un comentario aquí abajo contándome cómo te quedó. Y si te resultó útil, compártelo con tu comunidad de diseñadores web — siempre suma que más gente descubra todo lo que se puede lograr con Divi.

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

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 👇 Accede a todo esto siendo premium ⭐